Enabling Syntax Highlighting - tyuichis/modern-anki-card-template GitHub Wiki

Tldr; To enable Syntax Highlighting, please add _highlight.min.js, _github-dark.min.css and all files inside languages/ in your Anki's collection.media folder, then change syntaxHighlighting = false to syntaxHighlighting = true in all of the Front and Back sides of the templates you want to use it on. Use valid HTML to wrap your code.

1. Download the files and extract to collection.media

You'll need to download highlight_js.7z from the Releases tab.

2. Enable syntaxHighlighting in the card template

On the front and back sides of the Card Templates (you'll need to do this for both Q&A and Cloze cards), enable syntaxHighlighting.

3. Format your code

You'll need to use the correct HTML for code blocks and inline code. Be sure to turn on the HTML editor to preserve code snippets.

Important

Code blocks are <pre> <code> </code> </pre> elements and inline-code are <code> </code> elements.

Tip

If you use the Markdown support for code blocks and inline code (addon: 1844938046), it's MUCH easier to copy paste code snippets. See below.

use correct HTML to use syntax highlighting

With Markdown add-on:

Complete! You'll be able to see syntax highlighting.