Easy Code Blocks/Tags for Anki
Convert backticks to HTML <code> tags in the Anki editor.
This makes the Anki editor parse backticks as Markdown.
Single backticks: (x == 2) will be converted like so <code>x == 2</code>.
Triple backticks: (x == 2) will be converted like so <pre><code>x == 2</pre></code>.
Append a newline-delimited, alphanumeric string to a triple backtick to add a class.
```php echo “hi”; ```
(Note the newline after php!) This will be converted to:
<pre><code class=“language-php”>echo “hi”;</code></pre>
Also works with <br> instead of “raw” newline, since the Anki editor automatically inserts <br>
```php<br> echo “hi”; ```
Many popular JS-based syntax highlighters (highlight.js, prismjs) can automatically detect what language you’re using, but sometimes you have to be explicit and specify the language yourself.
FWIW, to install a syntax highlighter:
Copy the downloaded JS code into your collection.media directory (for example, highlight.min.js) Prefix the JS library name with _ (for example, highlight.min.js -> _highlight.min.js) This is so Anki doesn’t try to delete it since it’s not being referenced by any field Copy an associated CSS file for styling and also prefix it with an _ (e.g., _github-dark.min.css) Edit your cards to call the JS library and load the CSS like so: <link rel=“stylesheet” href=“_github-dark.min.css”> <script src=“_highlight.min.js”></script> <script>hljs.highlightAll();</script>
A few notes The text in the editor is updated automatically when you… Jump to a new field Or save/submit your edits (Ctrl-Enter or click “save”) The text displayed in the editor is NOT updated automatically The new text will be shown next time you view the card in the editor (in the browser, you can hit Ctrl-n, Ctrl-p to go to the next card and back to “refresh” it). Next steps Add a hotkey to insert a pair of backticks and a hotkey to insert a pair of triple backticks Add a UI button to insert a pair of backticks and a UI button to insert a pair of triple backticks Make the hotkeys and UI buttons work on selected text
Liên kết hỗ trợ
Reviews (11)
👍 2025-10-12
This would be great!
👍 2025-05-31
Working with 25.02
👍 2024-07-09
Hello! I am the author of this addon. I lost my account, so can’t update the description.
Don’t use this addon.
I built Simple Markdown that includes all the functionality of this addon and more.
- Simple Markdown addresses the issue that many people had with this addon where
<br>tags were inserted. This is due to the Anki editor inserting them every time you hit return. In the new addon, I replace all the<br>tags before processing input,
👍 2024-04-04
To solve the triple ticks problem where all appear in a single line, follows this instruction: https://github.com/dempe/anki-easy-code-tags/issues/1#issuecomment-2037994904
Copy this code into Prism.js :
Prism.hooks.add(‘before-highlight’, function (env) { env.code = env.element.innerText; });
Then it will work.
👍 2024-02-18
the code is syntax highlighted but all in one line as the newline is replaced by br which has no effect inside pre and code
it works fine if only has one line of code, if you have two lines, you see the problem.
👍 2024-01-03
For triple backtick code blocks, the newlines seem to be replaced with <br> tags… This is on 23.12.1
👍 2023-12-22
Super useful — thanks!
👍 2023-11-16
Thank you! I updated Anki today and my old addon for code cards broke. I followed the instructions for syntax highlighting and I like how the cards look. Is there a way to include line numbers anyone know?
👍 2023-11-04
Good for programmers
👍 2023-07-09
This is absolutely fantastic! I use the code tag to style text in my fields, and having to put the Tags by hand is such a chore. This helps so much! As someone else suggested, having a button or, ideally, a shortcut to mark something as code similarly to bold, italics, etc would be perfection 👌
Still thumbs up from me, for sure!
👍 2023-06-17
Fu*** legend!! was looking for this. Now the next step is to add a button or keyboard shortcut that can just automatically add ticks to selected text in editor, if you have time.
you can also add prism.js to your collection.media and modify this extension’s “bactick_converter.py” on line 12 to tag = "<pre><code class=\"language-python\">" for python for your any other favorite language and enjoy your favorite theme like solarized, monokai etc within Anki!
