I can change code appearance with custom css for code chunks (font family Arial in my example)
code.r{ /* Code block */
font-family: arial;
}
How can I do this for inline code?
Unevaluated inline code is contained inside a code element with no class:
`round(pi, 3)`
leads to
<code>round(pi, 3)</code>
Therefore using the CSS selector code {} is sufficient.
Related
I want to apply a piece of code (for example, a specific font) to all parts of a widget
What selector or what should I call to be able to do this?
In the following code snippet, the font is applied to the selectors and part of the comments, but when a new comment is registered in the comments section of the site, the previous font is displayed again for the new comment.
/* Widget post comments */
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can use [attribute*=value] CSS Selector in this case.
/* Widget post comments */
div[class*="elementor-element-"] .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can also add a specific common comment parent class with div if needed.
you can use the body element tag to apply font on every part of element as we should write the code of element in body only.
The code written in body element (css) will be applied to every part of the body code and used to write background color so that it can be applied to whole page and used to write font size and family etc using css in style tag in head part.
using
<style> body{ font-size=34px;} </style>
I would like to include a code block in a presentation I am preparing with Restructured Text. But the font used in the code block is huge and it can not fit inside resulting code box:
How can I reduce the font size used in code blocks?
Set the fontSize property of the code style in your style file.
e.g.
code:
parent: literal
fontSize: 10
Some of the builtin themes (alabaster) accept usage of custom.css.
Create _static/custom.css and add the following to adjust the code-block font-size:
_static/custom.css:
.highlight { background: #f8f8f8; font-size: x-small;}
You need a layout.html in a dir mysources/_templates and in your mysources/conf.py you need a declaration templates_path = ['_templates'].
In layout.html add a declaration
div.highlight {
font-size : 0.8em; /* or another value you prefer */
}
This works for me because I use the html_theme sphinxdoc. Maybe in other themes the declarations differ. If so you must find out the declaration by a html debugger like Inspektor in Firefox or Developer Tools in Chrome or DOM Explorer in IE.
In Jekyll, when I set the Markdown converter to kramdown and bundle exec jekyll serve, this fenced code block
```javascript
function hey(name) {
return 'Hey ' + name;
}
console.log(hey('Brienna'));
```
renders like this:
This happens no matter what I do. I've tried setting the input: GFM option, but it doesn't make a difference whether or not it's included.
However, when I set the Markdown converter to Redcarpet, the same code block renders like this:
This is what I want to see! But I don't want to use Redcarpet. I want to use kramdown.
As you can see from the rendered HTML below, the code block gets highlighted. I'm using a CSS stylesheet for Pygments, which Rouge is supposed to be able to work with. I noticed that the div's class changed between Markdown converters. With kramdown, its class is .highlighter-rouge, whereas with Redcarpet, its class is just highlight. Do I need to manually modify the CSS if switching between Markdown converters?
Kramdown:
Redcarpet:
Your Pygments CSS file looks like this:
.highlight { font-size: 13px; }
div.highlight, div.highlight code, div.highlight pre { background: #29281e; }
div.highlight code { padding: 0; }
div.highlight .c { color: #75715e } /* Comment */
In the Kramdown output, the .highlight block is no longer a <div>, so simply removing all "div" instances from the CSS would restore syntax highlighting.
Bonus: without specifically targeting <div>, your CSS now works with output of both Markdown processors.
For the fenced code blocks to work in Kramdown, you need to turn on recognition of GitHub Flavored Markdown:
kramdown:
input: GFM
Note that Jekyll reads _config.yml only once at execution time. You need to restart jekyll serve for further changes to apply.
I am trying to format the content of some QToolTip using stylesheets.
Setting a widget's stylesheet to
<h1>Title</h1>Content
produces the expected result, and I can style the tooltip with, for instance
QToolTip { color: red; }
to get red colored text. I am now trying to use the stylesheet for the h1 inside the tooltip, but this produces no effect:
QToolTip h1 { color: blue; }
while setting it directly in the string works:
<h1 style='color: blue'>Title</h1>Content
Is there a way to perform this action with stylesheets? I tried using classes, but without success.
TIA
The selector you trying to use is invalid, you can see a list of Selector Types here.
There is no way to select the <h1> of a QToolTip using style sheets, since it's not a Widget. You have to go for the other way you already pointed out.
I am using reset css for my application which includes ck editor, i dont want the reset css should be applied for the output of CK editor inside my html page. How to unset the reset css for the particular portion of a page?
Give the CK output a class. Write your own CSS code after the reset.css code. Refer to the class and give it the properties that you prefer. For example:
index.html:
<p>Normal text formatted by reset.css</p>
<span class="my-format"><p>Output of CK editor to be formatted by my CSS</p></span>
style.css:
#import url("reset.css");
/* My code goes down here: */
.my-format { font: normal 14px georgia,times,serif; }
You havent quite understood the point of a reset.css, have you?
You cannot apply some CSS to make all browsers read the css differently (like the do before, like padding, margin, lineheight, zoom and other things)