Skip to main content

Ralsina.Me — Roberto Alsina's website

New Nikola Plugin: rst code blocks using prism.js

I have been writ­ing some of my posts us­ing Mark­down late­ly. And not even plain old Python Mark­down, but mis­a­ka which is an al­ter­na­tive im­ple­men­ta­tion based on Hoe­down

So, I no­ticed that those mark­down files had no syn­tax high­light­ing! I looked and Mis­a­ka does of­fer some­thing to "high­light things". Here is what it does:

<pre>
<code class="language-python">
def f():
    pass
</code>
</pre>

No class­es in the el­e­ments, no noth­ing, just a class in the code el­e­men­t! It turns out that is the rec­om­mend­ed way to in­di­cate you are show­ing code:

There is no for­mal way to in­di­cate the lan­guage of com­put­er code be­ing marked up. Au­thors who wish to mark code el­e­ments with the lan­guage used, e.g. so that syn­tax high­light­ing scripts can use the right rules, can use the class at­tribute, e.g. by adding a class pre­fixed with "lan­guage-" to the el­e­men­t.

So, I looked for how to ac­tu­al­ly dis­play those things nice­ly, and found pris­mjs.­com which looked very nice!

So nice, in­deed, that now I hat­ed how my re­Struc­tured Text Pages looked!

There­fore, I wrote a new Niko­la plug­in that re­places do­cu­til­s' code di­rec­tive and re­places it with a much sim­pler one that just tags things as code of a giv­en lan­guage and lets prism do the rest.

AFAICS it's functionally equivalent, it supports the :linenos: option, including shifted line numbers.

I doubt any­one ev­er will want to use it but hey, there it is.


Contents © 2000-2024 Roberto Alsina