Using safe HTML, avoiding javascript, and {{{ mustache }}} templates

[badlydrawnrob]

TL;DR

Stick to plain HTML and Markdown
You can find code we're using for Anki desktop app in themes/cards/ folder.

1. Take care when you're adding code to Anki fields!
2. I'd advise you to stick to plain Markdown and HTML in the Anki App, as javascript can break things.
3. Also be careful when importing other people's decks (or using plugins), especially if they include javascript.
4. The demo/ files are for preview purposes only.

Internal notes on Mustache.js

You can safely ignore this section if you're not wanting to create your own templates.
The themes/demo/ card is similar but not the same to themes/cards/. It's just for show.
Mustache escapes HTML by default to avoid malicious code. You can unescape it with {{{ triple brackets }}}

Mustache javascript library is the closest representation of the Anki app field templates that I can find. It's not exactly the same as the docs so beware of bugs.

We can generate live card previews that are compiled from the demo/ folder and the .json file populates the content.

• {{{☆ Syntax}}} Triple brackets are used, to unescape json html in the live demo cards
  • Without it, syntax blocks are interpreted as strings (not raw html)
  • We escape json and compile with {{{ mustache }}}.¹
  • HTML, or speech marks (" ") in json must be escaped before they're compiled.
• Triple brackets will not work in the Anki app

Footnotes

1. Mustache requires {{{ ... }}} triple brackets and escaped json to render our HTML data properly. This is not supported in Anki as it uses similar, but not the same, template language. The demo files are for preview and styling purposes only. If you want to edit these demo/ files, you can use an online tool to escape your json. ↩