How Did You Solve iOS Highlight.js?

[adeluccar]

Hey @badlydrawnrob,

I have the following code in a template (Front Side):

<link rel="stylesheet" href="_highlight.css">
<script src="_highlight.js"></script>

<div class="question">
{{Question}}
</div>

<pre><code class="language-{{Code Snippet Language}}">
{{Code Snippet}}
</code></pre>

<script>
hljs.initHighlighting.called = false;
hljs.initHighlighting();
</script>

Do you know why this works in Anki OS X and not in IOS?

How did you fix it?

Would really appreciate if you could help me out.
I downloaded your deck but couldn't figure it out myself.
Thanks! :

—Alberto

[adeluccar]

🆘

[badlydrawnrob]

@adeluccar Hi Alberto, I've been testing the Highlight.js script for a while now and honestly, I don't think Anki handles javascript well at all. I'm a complete novice with js, so perhaps someone else has a better method of handling Highlight.js (I've been looking for lighter examples, or different libraries, but no success yet) ...

The current method I'm using is the shim repository via Bower, with the following code:

var blocks = document.querySelectorAll('pre code:not(.hljs)');
Array.prototype.forEach.call(blocks, hljs.highlightBlock);

This works well on iOS, and partially in OSX (on the front card, but not on the reverse). The caveats are:

1. Javascript must be inline, src= isn't supported (unless using an addon)
2. iOS is really laggy at times, and it seems to crash 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):

So, until Anki fully supports src= js on all devices, I'm beginning to 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.

I've been using Power format pack quite a bit, which really speeds up card creation. So I'll open another issue and see what people think.