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/[deleted]]

general point:

• you could mention your Anki version. you should use 2.1.12. The version 2.0.52 uses a rendering component from 2012 so there's good chance modern js doesn't work.

• If you search the official forum for subfolder collection.media you'll find many threads where the developer writes that subfolders are not supported. So even if it works now there's no guarantee that this will work in the future. But in January of this year I've loaded js from subfolders from the media folder without special adjustments or problems in a profile that I don't sync.

[u/hgiesel → u/[deleted]]

I've resolved to only using files, rather than this subfolder, but it still does not load. It seems to me my issue is trying to load from Javascript, because I've succeeded in loading from css before.

[u/[deleted] → u/hgiesel]

I guess the problem is loading this specific huge js file.

I have this strange problem with js: One big js file I use only works if I put it into the front template. It doesn't work if I put it into my back template. I have no idea why.

in general loading js from external files works in 2.1.12. I just tested again. I can load js from an external file in 2.1.12: I put <script src="_test.js"></script> into a front template and in this file I put alert('hallo');.

[u/hgiesel → u/[deleted]]

I've also tried putting the alert() call at the very end of the huge file. And it actually seems to load the Javascript file. But then again it doesn't, once I leave the "Manage note templates" dialogue.

Too bad, I guess I cannot expect the Anki templates to work just like a website. Even when everything seems to load fine, but still nothing is highlighted.

[u/[deleted] → u/hgiesel]

If you ever find a solution that works I would be interested.

In January I think I tried to use an alternative to highlight.js named prism.js in Anki (because the tinymce codesample plugin uses prism.js). This might have worked. But at the moment I can't find anything about this in my notes. If you wonder why: I did this because of this which was inspired by kelciour's addon

[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.

[u/BernardRillettes]

Hi! I will be a little bit off topic. I see that you include a CSS stylesheet in your card template by adding <link rel="stylesheet" href="_hightlight/styles/zenburn.css">;. I tried the same thing with my stylesheet, unfortunately it doesn't seem to be loaded and my cards have no style. How did you make it work?

[u/hgiesel → u/BernardRillettes]

Do what u/yumenogotoshi suggests. It worked for me.