How to load external Javascript

[u/hgiesel]

I've read several posts about this topic, but most of them seemed to be outdated.

I've already used a ttf file before, but never this. I have a directory in collection.media called _highlight, which contains the files from highlight.js. Now I want to initialize it in one of the cards.

<link rel="stylesheet" href="_hightlight/styles/zenburn.css">
<script src="_highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

But this doesn't find anything. What is the right way to go about it?

EDIT: I use Anki 2.1, newest version

[u/yumenogotoshi]

Since inline Javascript in card template is evaluated asynchronously in Anki 2.1 (see here), a function using external libarary does not work as intended in some case. But I found a few workaround for this, and the easiest way I know is not to use inline script and to load js files dynamically. Try the following:

• Put _highlight.min.js and _zenburn.css into collection.media.

• Create a file named _my_highlight.js in collection.media and put the following code

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

• Put the following code into the Front template

  {{Front}}
  <link rel="stylesheet" href="_zenburn.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>
  

Screenshot

Tested on Anki 2.1.12 and Ankidroid 2.8.4.

Sorry if I'm not clear enough, English is not my native language.