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.
Related
I want to write a demo with xaringan for xaringan. I want to write a slide where I explain how students can write inline code or code chunks, but so far my attempts failed. Mostly because the ` are not printed. If i use `r knitr::inline_expr('mean(mtcars$mpg)')` the `are not printed.
Actually, it should work as mentioned in the comment, but it doesn't for some reason. This may be a bug. However, you can simply write a CSS class that highlights monospaced text and adds backticks before and after your code.
Add the following to the styles.css file in your xaringan project directory:
.ilr {
font-family: monospace;
padding: 2px 2px;
background-color: #e4e6e8;
}
.ilr:before, .ilr:after {
content: "`";
}
Use the above as follows:
---
# Test Slide
This is inline code: .ilr[r rnorm(100)].
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
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.
Using kramdown and rouge for markdown syntax-highlighting in a jekyll blog, I'd like to prevent long lines of code from wrapping onto a new line. I'd like to be able to use a horizontal scrollbar to reveal the rest of the content.
Here is the jekyll config:
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
I'm using the base16.solarized.dark css theme generated by the rougify command.
Here is an example code usage:
```` js
console.log("some code") // and a really really long long long comment which i'd like to not wrap onto the next line
````
Boostrap is adding a white-space: pre-wrap rule in order to help code block readability.
If you want you code block to avoid this wrap, you can edit your css/data-creative.css and add
pre code{
white-space: pre;
}
You have somewhere a CSS rule that for the code element sets white-space: pre-wrap. Add the following rule to override it:
code {
white-space: pre;
}
I solved it like this:
pre {
...
overflow-x: scroll;
}
Related:
Code styling for black and white documents
I want to use a simple custom CSS for code highlighting in knitted .Rnw/.tex/.pdf documents. However only a select few rules seem to be implemented upon knitting.
For the moment I am focusing on colorless highlighting, consequently I would like to manipulate rules such as text-decoration, font-weight, font-style and - for grays - color; cf. the theme "print" here. But, even with the simplest examples, I can only get a certain few to be implemented, e.g., color and font-style; specifically, I've found that font-weight does nothing, nor does text-decoration. E.g.:
.background {
color:#F6F6F6;
}
...
.kwc {/* e.g., parameters */
font-weight:100;
color:#8C8C8C;
}
.kwd {/* e.g., methods */
text-decoration:underline;
}
...
.com {/* comments */
font-style:italic;
}
...
(The sets of three dots indicate that my CSS file contains more than the example above.)
With the above in my style sheet, in the output PDF the code block background and parameters are colored accordingly and the comments italicized, however the parameters do not have a font weight of 100 nor are methods underlined.
Is there some sort of limitation as to the rules custom knitr themes may use? What else may be the problem here?
N.B.:
Mac 10.9.3
knitr v1.6.3.
I have the CSS in the same directory as my Rnw document and I pass it to knitr in a chunk at the beginning of my document via:
theme <- knit_theme$get('./my_css.css')
knit_theme$set(theme)