Anki: add syntax highlighting with javascript (highlight.js)

Tested on Anki 2.1.44 desktop version, however, I could not make it work for Ankidroid.

Go to highlightjs.org and download a custom package. copy and paste the files highlight.min.js and xxxxx.min.css into the Anki folder: /collection.media/. This folder is usually located around:

• On windows: C:\Users\win_user_name\AppData\Roaming\Anki2\user_name_in_anki\collection.media
• On Mac: ~/Library/Application Support/Anki2
• On Linux: ~/.local/share/Anki2

Create a file my_highlight.js and paste the following code inside:

document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
});

Move this file into your /collection.media/ folder as well. Now, go to the menu "Tools" -> "Note Types" and select the note type you'd like to use for syntax highlighting. Click on that type and the button"Cards...".

Choose "front template" radio button and paste the following:

{{Front}}
<link rel="stylesheet" href="xxxxx.min.css">


<script>
    if (typeof hljs === "undefined") {
        var script = document.createElement('script');
        script.src = "highlight.min.js";
        script.async = false;
        document.head.appendChild(script);
    }

    var script = document.createElement('script');
    script.src = 'my_highlight.js';
    script.async = false;
    document.head.appendChild(script);
    document.head.removeChild(script);
</script>

<script>hljs.highlightAll();</script>

Now if everything went according to plan you can now create a card and open the "edit html" window add:

<pre><code class="language-cpp"> some code </pre><code>

to see some syntax highlighting!

Reference

reddit thread

Donate

No comments

You are the only person to ever get this message.