Due to the GDPR regulation, I'm migrating all of my embedded Gists on my Jekyll-based GitHub Page https://mu88.github.io to Rouge.
When enabling line numbers in Rouge, the result looks pretty messy compared to Gist:
Rouge
Gist
Example 1
Example 2
Here is the relevant part from _config.yml:
markdown: kramdown
# !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change
# Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44)
highlighter: rouge
# More › http://kramdown.gettalong.org/quickref.html
# Options › http://kramdown.gettalong.org/options.html
kramdown:
input: GFM
# https://github.com/jekyll/jekyll/pull/4090
syntax_highlighter: rouge
# Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
# span, block element options fall back to global
syntax_highlighter_opts:
# Rouge Options › https://github.com/jneen/rouge#full-options
css_class: 'highlight'
#line_numbers: true # bad idea, spans don't need linenos and would inherit this option
span:
line_numbers: false
block:
line_numbers: true
start_line: 1
I embedded the code like this:
{% highlight shell lineos %}
#!/bin/sh
pwsh -noprofile C:/source/GitHub/config/hooks/Git_EnsureConventionalCommitMessage.ps1 $1
{% endhighlight %}
I'd like to solve the following two things:
Line numbers with more than one digit (like 15) should not be wrapped.
Long code lines should not be wrapped. Instead, I'd like to have a scroll bar and the visible width should adjust nicely to the enclosing text.
For the moment, I've disabled displaying the line numbers as it simply doesn't look good to me.
Which Rouge parameters do I have to set to style the line numbers and wrapping nicely?
I've configured one code snippet with both the Gist and Rouge (see here and scroll down a bit) to better compare the differences.
Thanks!
Related
I am trying to create some fenced in code blocks on my gh-pages blog, but I am encountering some issues.
This is within my _config.yml
#Stuff I have added
highlight: rouge
markdown: kramdown
kramdown:
input: GFM
highlighter: rouge
Now I am attempting to run this code as follows,
~~~
Is this really how code should be represented?
Answer = NO!!!
~~~
but this is
Please help, I just want the nice fenced code structurem Thanks!
Try creating fenced code blocks with triple backticks ``` instead of triple-tilde ~~~
```
Is this really how code should be represented in GFM?
Answer = YEP!!!
```
It is not showing a fenced block for the source code because there is no source code.
If you don't specify anything then it will use:
<div class="highlighter-rouge"><pre class="highlight"><code>
Is this really how code should be represented?
Answer = NO!!!
</code></pre>
</div>
You always have the option to customize the output using the generated classes like highlighter-rouge.
On the other hand, if you specify a language:
~~~ html
<html>
<body>
<p>Is this really how code should be represented?</p>
<div>Answer = NO!!!</div>
</body>
</html>
~~~
then it will generated more spific styling:
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><html></span>
<span class="nt"><body></span>
<span class="nt"><p></span>Is this really how code should be represented?<span class="nt"></p></span>
<span class="nt"><div></span>Answer = NO!!!<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre>
</div>
If you still aren't able to see any default syntax highlighting, then the css containing those classes is missing, typipcally Jekyll comes with _syntax-highlighting.scss where it already contains them, but you can use the color scheme you want, for example the default theme uses this one: https://github.com/jekyll/minima/blob/master/_sass/minima/_syntax-highlighting.scss
Or you can install whatever Rouge theme you want: https://github.com/jneen/rouge/tree/master/lib/rouge/themes
$ rougify foo.rb
$ rougify style monokai.sublime > syntax.css
Is there a way to enable start_inline by default for all code blocks in Rouge?
I'm writing a blog using Jekyll 3 (rouge, kramdown) and I have a lot of PHP code blocks. I'd like syntax highlighting to work without having to replace all the ```php tags into ```php?start_inline=1
kramdown:
syntax_highlighter: rouge
syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
css_class: highlight
# default_lang: console
span:
line_numbers: false
block:
line_numbers: true
start_line: 1
Is it possible to add a post-processing step (in ruby) to run in Jekyll after it converts markup to HTML?
I'd like to add some html content, and can't see a way to do that in Jekyll files in general (though certain dialects of markup might support it), so I think it would have to be done by operating on the HTML after Jekyll converts it and before it writes it into _site/.
EDIT: Clarified that I'm looking to do this in Ruby and in arbitrary dialects of markup.
It looks like I may be able to do this by providing a Liquid filter that postprocess the html content, and changing {{ content }} to {{ content | my_postprocess }} in _layouts/post.html and _layouts/page.html.
Indeed, kramdown will not parse markdown in html element by default.
But, there is some configuration parameters that can be set to force kramdown to parse markdown in span or block elements.
Kramdown parameters in Jekyll documentation (look under the kramdown: key) but more interesting things in the kramdown documentation particularly here and here
In configuration
If you want to globally parse markdown in html, in _config.yml, add :
kramdown:
parse_block_html: true
parse_span_html: true
Or, in your markdown itself
{::options parse_block_html="true" /}
{::options parse_span_html="true" /}
<div>
## Some markdown here
**bold** and `code`
<cite>a **span** level element</cite>
</div>
You can also use markdown includes like this :
{% capture md %}{% include markdown_file.md %}{% endcapture %}
{{ md | markdownify }}
This will render any markdown as if it was in the original post/page.
Newer versions of Jekyll let you use hooks to do post-processing (and many other things).
For example, you could put a file like this in the _plugins/ directory, and it will modify the contents of posts after they've been converted to HTML but before they've been embedded in a layout file or written to disk:
Jekyll::Hooks.register :posts, :post_convert do |post|
post.content = post.content.gsub('old', 'new')
end
I have a Jekyll site that uses kramdown for markdown. In _config.yml I have the following setting that ensures that only <h2> and <h3> elements show up in the automatically generated table of contents:
kramdown:
toc_levels: "2,3"
This works fine, but on some pages I would like to include <h4> elements in the TOC as well, while retaining the existing <h2> and <h3> configuration on other pages. Is this possible?
On any page I can access the _config.yml definitions like this:
{{ site.kramdown.toc_levels }}
Is there a way to set the value of the toc_levels on a page?
I looked through the codes. It appears page-level settings are not possible for Kramdown at this moment. You are left with {:.no_toc} option to suppress unexpected tags.
Is there any global option for rdiscount to enable parsing markdown in block html tags? And any way to use that option within Octopress/Jekyll? This is the option that Kramdown supports:
parse_block_html Process kramdown syntax in block HTML tags If this
option is true, the kramdown parser processes the content of block
HTML tags as text containing block-level elements. Since this is not
wanted normally, the default is false. It is normally better to
selectively enable kramdown processing via the markdown attribute.
Default: false
Unfortunately, Jekyll does not pass this kramdown flag to kramdown. I opened an issue on that: https://github.com/mojombo/jekyll/issues/1095
No. There is no RDiscount option for this. All options are listed in the API docs here:
http://rdoc.info/github/davidfstr/rdiscount/RDiscount
Here is a workaround for Jekyll/Octopress. Consider the following example:
<div>
I want this to be in *Markdown*!
</div>
You can use the markdownify tag in Jekyll to manually force a section to be in Markdown:
<div>
{% capture m %}I want this to be in *Markdown*!{% endcapture %}
{{ m | markdownify }}
</div>