index.md

Themes

• Home
  • 💡 Simple card
  • 🔎 Missing! card
  • 🖍️ Draw! card
  • 🧑‍🎨 Add color to your code
  • 🧑‍🎓 The professional way

Basic syntax highlighting

You can mark any inline code string field with bold or italic buttons in the Anki editor for basic highlighting. It uses simple HTML5 tags to add colour to your code.

1. Bold:
   • <b> or <strong>
2. Italic:
   • <i> or <em>

For regular string fields, such as ★ Title you can highlight a code section by wrapping your text in a code tag. Something like this:

<!-- ★ Title card field is wrapped in a `h1` -->
<code>{ string = <b>"bold"</b>, italic = <i>42</i> }</code>

Full syntax highlighting

• View our default colour themes.
• We use Markdown rendered code blocks for our pretty colours.
• Beginners can use this helpful online tool;

If you know how to use npm, 🧑‍🎓 it's more fun with a compiler

Basic colours are fine for small lines of code, but you'll probably want to go full colour next. Wherever you see a code block, Anki Programming Flashcards provide pretty colours (CSS), and we generate your highlighted code using Markdown and Pandoc. Here's how:

1. Write your code as Markdown fenced code blocks,
2. Convert Markdown to HTML5 online,
3. Add a card in Anki,
4. Choose a code block field,
5. Add your rendered HTML,
6. Press the A𝐴 button (Toggle Visual Editor ⌘⇧X) to preview your code,
7. Repeat the process — save your card!

That's it. You're done. Simple, right?!

Customising themes (the easy way)

For quick customisations, view this file:

source
│
└───style
    │
    └───base
        │
        └───variables
              breezedark.less

The easiest way to change the colors for the code string and code block fields is to edit the --color-code-bold, --color-code-italic, and --color-code-dark-* variables in your Anki cards. This will overwrite the defaults.

How to change your theme colours

If you're a beginner, here's how to change colours.

1. You'll have the latest Anki flashcards release.
2. In the Anki app menu, go to Manage Note Types.
3. Select the Anki flashcards: ... Note Type.
4. Select the Cards button.
5. Select the Styling option.
6. Copy our --color-code variables from breeze.dark.less.
7. Add them to the bottom of the Styling box, and edit them.
8. Repeat for all Anki flashcard card types

A better way to manage our flashcards (and save our changes)

Custom themes (that are better), markdown->html field data, offline cards

So far we've learned how to use colours, but every time you update Anki Programming Flashcards (in Anki), you'll lose your changes. We can do better!

Let's do things the professional way, because 🧑‍🎓 it's more fun with a compiler!

Once you've levelled up your programming skills and the words "clone", "fork", "npm" and "terminal" don't scare you, you're just about ready to do something interesting: let's keep our custom themes up-to-date, save our changes, create cards at lightning speed offline with Markdown, all with a few little handy tools ...