kramdown et filer :colorize_syntax not working

[Seb Astien]

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]

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]

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]

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)

[Eric Sunshine]

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]

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