kramdown et filer :colorize_syntax not working

27 views
Skip to first unread message

Seb Astien

unread,
Oct 21, 2021, 5:06:33 PM10/21/21
to nanoc
HI,

I am trying to build my first site with nanoc and I'm  stuck with code color highlighting at the very beginning.
I followed the tutorial, the site is quite about of the box after the
nanoc create-site
command
I installed also the gem for krackdown (2.3.1) and rouge (3.26.1)

I made a simple file.md with the following content
code
{:.language-ruby}
``` ruby
int main() {
return 0;
}
```
I adapted my Rules files with this rule
compile '/**/*.md' do
   filter :kramdown
   filter :colorize_syntax, :default_colorizer => :rouge
   layout '/default.*'

   if item.identifier =~ '**/index.*'
     write item.identifier.to_s
   else
    write item.identifier.without_ext + '/index.html'
   end
end

The output file isn't rendered as I expect. The webpage is like this
code

ruby int main() { return 0; }

The html output of with page is

<div id="main">
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">code</span>
</code></pre></div></div>

<p><code>ruby
int main() {
return 0;
}
</code></p>

So I must have miss something in the nanoc nor filter usage.
The css class language-ruby highlighter-rouge or for the <code>  must not be generated automatically by the filter in the stylesheet.css file ?

Thanks for helping

Sébastien







 

Eric Sunshine

unread,
Oct 21, 2021, 7:19:10 PM10/21/21
to na...@googlegroups.com
On Thu, Oct 21, 2021 at 5:06 PM Seb Astien <babo...@gmail.com> wrote:
> I am trying to build my first site with nanoc and I'm stuck with code color highlighting at the very beginning.
> I made a simple file.md with the following content
> code
> {:.language-ruby}
> ``` ruby
> int main() {
> return 0;
> }
> ```

A few notes: (1) kramdown predates the ``` extension; use ~~~ instead;
(2) no need to specify `.language-ruby` yourself since kramdown will
do that for you; (3) add a blank line before the code block.

code

~~~ ruby
def hi()
puts "hi"
end
~~~

> I adapted my Rules files with this rule
> compile '/**/*.md' do
> filter :kramdown
> filter :colorize_syntax, :default_colorizer => :rouge
> layout '/default.*'

kramdown interfaces directly with rouge, so you don't need to do the
colorization yourself. (You would do colorization yourself if you were
trying to colorize some raw HTML files rather than the output of
kramdown.) Therefore, you don't need to invoke the `colorize_syntax`
filter at all; just drop that line.

Denis Defreyne

unread,
Oct 22, 2021, 4:08:28 AM10/22/21
to na...@googlegroups.com
Hey both,

You can indeed use Kramdown’s built-in syntax highlighting as Eric suggested, though I believe the error you’re seeing is because of the extra space after ```:

Correct: ```ruby
Incorrect: ``` ruby

Removing that space should fix the problem you’re seeing. When using ~~~, I think that extra space would also need to be removed. Lemme know how that goes!

Cheers,

Denis Defreyne
[dəˈni] • pronouns: he/him

+49 1573 1969 173
he...@denisdefreyne.com
https://denisdefreyne.com
> --
> You received this message because you are subscribed to the Google
> Groups "nanoc" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to nanoc+un...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/nanoc/CAPig%2BcR86QPwxWkiGHEL3eoV8760b2%3DbsxWhFahkVjqj1F-ceg%40mail.gmail.com.

Seb Astien

unread,
Oct 22, 2021, 4:40:18 AM10/22/21
to nanoc
Hi both,
thanks for helping but it is still not highlighting anything...

I join a screenshot of the rendering (screenshot_1.png), the md file (about.md) and the output generated file (index.html)
I also join a screenshot of what I expect, like my Markdown editor propose (screenshot_typora.png)

I may completely mistaken, but I expect that nanoc would propose a kind of code rendering like my editor out of the box.

But, even if the output html looks ok, as I don't have css class like language-ruby highlighter-rouge in my project, the code is not highlighted.

Should I create the specifics css by myself ?

Thanks for helping

Sébastien

PS : partial gem list

*** LOCAL GEMS ***
adsf (1.4.6)
asciidoctor (2.0.16)
coderay (1.1.3)
kramdown (2.3.1)
nanoc (4.12.3)
nanoc-checking (1.0.1)
nanoc-cli (4.12.3)
nanoc-core (4.12.3)
nanoc-deploying (1.0.1)
nokogiri (1.12.5 x86_64-linux)
rouge (3.26.1)
Screenshot_1.png
index.html
Screenshot_typora.png
about.md

Eric Sunshine

unread,
Oct 22, 2021, 8:07:45 PM10/22/21
to na...@googlegroups.com
On Fri, Oct 22, 2021 at 4:42 AM Seb Astien <babo...@gmail.com> wrote:
> thanks for helping but it is still not highlighting anything...

The two examples which use "~~~ language" seem to be working
correctly. Inside the HTML, we can see that `rouge` tokenized the code
into distinct elements, each with the appropriate CSS class:

<div class="language-ruby highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code>
<span class="k">def</span>
<span class="nf">hi</span>
<span class="p">()</span>
<span class="nb">puts</span>
<span class="s2">"hi"</span>
<span class="k">end</span>
</code>
</pre>
</div>
</div>

> I may completely mistaken, but I expect that nanoc would propose a kind of code rendering like my editor out of the box.
> But, even if the output html looks ok, as I don't have css class like language-ruby highlighter-rouge in my project, the code is not highlighted.
> Should I create the specifics css by myself ?

You could create it by hand, but the `rouge` website says that it is
compatible with Pygments stylesheets, which means you should be able
to download and use an existing stylesheet easily. A quick Google
search results in some possibilities:

https://richleland.github.io/pygments-css/
https://github.com/Anomareh/pygments-styles-dump

Seb Astien

unread,
Oct 23, 2021, 5:09:22 AM10/23/21
to nanoc
Hi both,

Oh, captain I've been hit !
Well, it looks so easy when you know it ! I thought that rouge was autonomous.

OK it's working now...

Thanks Eric for your patience !

Sébastien
Reply all
Reply to author
Forward
0 new messages