Replace Highlight.js with Pygments

[badlydrawnrob]

As a couple of posters have mentioned, using Highlight.js is problematic for the following reasons:

1. Javascript must be inline, src= isn't supported (an addon is available to allow this, but it'll only work for desktop)
2. iOS is really laggy at times, with [random crashes] and it also crashes AnkiDroid
3. It really increases overall deck size and performance, as you can see in the below screenshot comparison (no media or scheduling have been included in the export):

I'm a novice with javascript (and have no intention of learning), so I can't continue supporting Highlight.js unless a) Anki supports src= attributes, or b) someone wiser than me creates a working, lightweight, reliable script to integrate Highlight.js

So, until Anki fully supports src= on all devices, I think using something like pygments is a far more practical solution, as there's backwards compatibility (albeit maintaining css for the code it outputs) and it can be safely swapped out for a js version if Anki eventually allows imports.

Pygments can be used via the command line, or using an addon like Power format pack ... it outputs like this:

<div class="hlcode">
    <div class="syntax">
        <pre><span></span><span class="k">def</span> <span class="nf">fib</span><span class="p">(</span><span class="n">n</span><span class="p">):</span>
            <span class="sd">&quot;&quot;&quot;Print a Fibonacci series up to n.&quot;&quot;&quot;</span>
            <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span>
            <span class="k">while</span> <span class="n">a</span> <span class="o">&lt;</span> <span class="n">n</span><span class="p">:</span>
                <span class="nb">print</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">end</span><span class="o">=</span><span class="s1">&#39; &#39;</span><span class="p">)</span>
                <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="n">b</span><span class="p">,</span> <span class="n">a</span><span class="o">+</span><span class="n">b</span>
            <span class="nb">print</span><span class="p">()</span>

        <span class="c1"># Now call the function we just defined:</span>
        <span class="n">fib</span><span class="p">(</span><span class="mi">2000</span><span class="p">)</span>

        <span class="c1"># Returns</span>
        <span class="mi">0</span> <span class="mi">1</span> <span class="mi">1</span> <span class="mi">2</span> <span class="mi">3</span> <span class="mi">5</span> <span class="mi">8</span> <span class="mi">13</span> <span class="mi">21</span> <span class="mi">34</span> <span class="mi">55</span> <span class="mi">89</span> <span class="mi">144</span> <span class="mi">233</span> <span class="mi">377</span> <span class="mi">610</span> <span class="mi">987</span> <span class="mi">1597</span>
        </pre>
    </div>
</div>

Not pretty, but I have a feeling it'll be lighter weight than including js on every card.

[badlydrawnrob]

• Run a quick test to see how pygments formatting (without Highlight.js) affects package size
• Test Power Format Pack, Markdown > Pygments conversion
• Also test that when Power Format Pack is removed from add-ons, the code isn't corrupted
• Test cloze deletion templates aren't negatively affected
  • I think this is going to be the main sticking point
• If all is well, check out the generating styles docs
• Checkout Sublime/Atom pygments highlighting plugins

[badlydrawnrob]

All systems go with Pygments, and except for cloze deletion, the Power Format Pack is a good companion. There's a workaround for the cloze deletion issue.

Also, without the highlight.js the total deck size is teeny tiny!

So, from now on Anki Themes will use Pygments classes to style the themes.

[badlydrawnrob]

Closing