Experimental: highlight.js for Anki and AnkiMobile

[badlydrawnrob]

Currently using highlight.js shim and copy and paste html via Marked App viewer (right-click, copy and paste in Anki html view). Also see Marked App html exporting):

• Work-in-progress Codepen example: http://codepen.io/badlydrawnrob/pen/xwzyej
  • doesn't quite work the same as my local deck, but almost. Syntax highlighting is working on iPhone.
  • Need someone to test on AnkiDroid

To do:

• Experiment with Power format pack and see if the syntax highlighting interferes with the themes'.
• See if highlight.js can be enabled using a javascript plugin

[badlydrawnrob]

Default hljs.initHighlightingOnLoad(); doesn't work on iOS app. I have no idea why! Luckily, thanks to this thread, the below seems to work 👍 ... for now at least.

hljs.initHighlighting.called = false;
hljs.initHighlighting();

When opening cards in the Mac app, it takes a while to close down. Hopefully this won't impact performance of the app.

[badlydrawnrob]

Also refer to this issue for an alternative method suggested by the plugin's creator:

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

Changed the above code also to reflect this edit

[badlydrawnrob]

Minified script doesn't work

[badlydrawnrob]

Correct code snippet below, requires hljs.

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

This seems to only affect the front card, not the reverse. Seems to work fine on iOS, works on browse mode on Mac OS (if a little buggy) but doesn't seem to work in drill mode on Mac OS.

[badlydrawnrob]

Ok so progress so far using unminified highlights shim, with script and calling script on only the front card:

hljs.initHighlightingOnLoad();

• Mac app: Works in browse -> cards ... on front and reverse.
  • Doesn't work on drill mode at all
  • Doesn't work in browse mode when Anki is relaunched.
• iPhone app: Doesn't work

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

hljs.initHighlighting.called = false;
hljs.initHighlighting();

• Mac app: Works in browse -> cards ..., doesn't work on, but works if you place either calling script on the reverse card too)
  • Doesn't work on drill mode at all
  • Doesn't work in browse mode when Anki is relaunched.
• iPhone app: Both work fine 👍

[badlydrawnrob]

Mac app console log, not particularly helpful

Anki[9545]: JS error on line 7567: SyntaxError: Parse error
Anki[9545]: JS error on line 0: ReferenceError: Can't find variable: hljs
Anki[9545]: JS error on line 7567: SyntaxError: Parse error
Anki[9545]: JS error on line 0: ReferenceError: Can't find variable: hljs

[badlydrawnrob]

Closing this as #21 is infinitely easier to mantain. Too many bugs.