On the Kirby docs code examples have syntax highlighting. I know on GitHub, syntax highlighting is added by specifying the language on code blocks.
```php
<?php echo "This is how you do it in GitHub Markdown" ?>
```
I’ve checked the content files for the docs and they use the same syntax as GitHub. When I try the same on my Kirby install, I don’t syntax highlighting.
Am I missing a plugin? Thanks.
If I’m not mistaken, getkirby.com uses prism.js: http://prismjs.com
You are correct! I just checked a couple of PrismJS tutorials and the resulting HTML is the same as the Kirby Docs.
Cheers!
I believe Kirby still uses PHP Markdown Extra, so to better work with Prism.js you can write it like this:
```````````````````````````` .language-html
<p>paragraph <b>emphasis</b>
````````````````````````````You actually don’t need that.
Parsedown translates Github flavored markup correctly.
For server side rendering on our blog, I installed pygments on our server and called it on the command line like this:
<?php
function pygments($post)
{
return preg_replace_callback('/```[\s]*([a-z]+)\n(.*?)\n```/is', function($match)
{
list($orig, $lang, $code) = $match;
$proc = proc_open(
'pygmentize -f html -O style=default,encoding=utf-8,startinline -l ' . $lang,
[ [ 'pipe', 'r' ], [ 'pipe', 'w' ] /* ignore stderr */ ],
$pipes
);
fwrite($pipes[0], $code);
fclose($pipes[0]);
$output = stream_get_contents($pipes[1]);
fclose($pipes[1]);
return (proc_close($proc))
? $orig
: $output;
}, $post);
}
array_push(Kirbytext::$pre, function($this, $text) {
return pygments($text);
});
It now works as a prepocessor for Kirbytext. However, it will result in long initial page loading times and therefore enabling caching is highly recommended.
If you’re fine with prism.js, just use it.
Actually, this solution doesn’t work, because Parsedown Extra doesn’t support attributes on fenced code blocks.
[Edit:] Ok, somehow the code above doesn’t work, but
```````````````````````````` html
<p>paragraph <b>emphasis</b></p>
````````````````````````````
does. It actually adds a class called .language- plus the custom string to the <code> element. This is probably trying to be a safe implementation of the Markdown extra example.
Anyone still having issues with using a highlighter within the editor? I am. I think i had it working on a previous version of kirby but not now.
I’ve tried prism and am in the process of trying highlight.js. It seems to work with css but when I try it for html it does not.
Right now I have this for highlight inside the editor. If I switch the class to html for another code block it doesnt show anything except the text is between the html elements. I’ve tried the back ticks with the class and that doesnt do anything either.
CSS seems to work
<pre><code class="css">
.body {
background-color:gray;
}
</pre></code>
HTML doesnt seem to work.
The output on the front-end only shows the number 11 with the styles of the ‘code’ background but not the elements.
<pre><code class="html">
<div class="post-corner">11</div>
</pre></code>
The resulting code block above only shows number 11 on the front-end
First of all, check the result in the source code without any highlighting library added.
The result should look like this:
<pre><code class="language-html"><div class="post-corner">11</div></code></pre>
i.e. with a class of language-html in the code element.
If that looks as it should, add the prism.css in your head; and the prism.js in your footer.
The resulting html should now look like this:
<pre class=" language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post-corner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>11<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
thank you, I’ll give it a try. I deleted the post because, I swapped out for rainbow js and it seemed to work. Then for some reason, it was not working. I was trying to bring the post back but cannot find how to do that. I’ll give your advice a try and see what happens.
Thanks!!!
Oh no. If I copy and paste your code up top with entities and paste it into the kirby editor, save and check it seems to work. So this leads me to my last question. Do I have to go through lines of code and change the open/close html brackets to entities? That seems like an aweful lot and should be handled by Prism. Heres an example of what I just explained.
Here is the source which seems right.
No, that’s just what I copy/pasted from the source code.
In the panel, I just added code blocks wrapped within three backticks and the language code after the first three backticks in the textarea field, and then rendered with kirbytext().
And yes, the source code in your image looks ok.
I’ve tried the 3 back ticks with the language-html as well. I wrapped a div with them as you have done as well but its not showing correctly in the source.
Ok, judging from the message. It really is no big deal to go through search and replace the ‘<’ and ‘>’ to entities to make it work for the time being. Thank you for help today/tonight. I really appreciate it!
But prism doesn’t render HTML entities in my source code, it’s just when I copy the HTML into here, that the angle brackets are converted to HTML entities…
So weird. Right?! It seems to be rendering those entities into html brackets for me. But just not rendering them as brackets in the first place. I’ll keep fiddling around and try another theme perhaps. I’m currently using this in the template. I even added the markdown extras to see if that would help but no go.
<?php echo $page->text()->kirbytext();?>
The content file should look like this:
In the template:
<?php echo $page->text()->kirbytext() ?>
Result in frontend:
Tested in a Kirby 2.4.1 Starterkit.
No markdown.extra enabled.
Boom thats it! “language-” must of been conflicting with it. Tested in my theme as well as Kirby starterkit!
Thank you very much for the immense help (AS ALWAYS) @texnixe
I just want to briefly dig this up again, as I’ve been following it to get syntax highlighting to work. After setting up prism it works really nicely.
The one thing I’m struggling with is with code structuring (actually the same as in the forums). If I paste my code into the panel (editor field) with either leading tabs or leading spaces, it is getting removed.
This solution does work, but only outside of code fields, so it does not help. But even if it would, it would be quite cumbersome to replace all tabs (or spaces) with html entities of some sort.
So how can this be accomplished?
Thanks Hagen
@HagenW Kirby 2 or 3? Are you using backticks to wrap your code?
