- Home
- 💡 Simple card
- 🔎 Missing! card
- 🖍️ Draw! card
- 🧑🎨 Add color to your code
- 🧑🎓 The professional way
Default colors: Monochrome and Breeze Dark
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.
- Bold:
<b>
or<strong>
- 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>
We use our
code block
s with generated HTML for our pretty colours. For beginners, use the online tool. If you know how to usenpm
go here.
Currently using Monochrome and Breeze Dark themes. To generate highlighted code block
s you can follow the steps below. If you know how to use a terminal, there's a 🧑🎓 better way!
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 Theme provides pretty colours (CSS) to use with Markdown and Pandoc to generate your code.
- Write your code as Markdown fenced code blocks,
- Convert Markdown to HTML5 online,
- Add a card in Anki,
- Choose a
code block
field, - Add your rendered HTML,
- Press the
A𝐴
button (Toggle Visual Editor ⌘⇧X
) to preview your code, - Repeat the process — save your card!
That's it. You're done. Simple, right?!
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.
Pandoc has some ready made themes you can use. See this issue for more info.
- You'll have the latest Anki flashcards release.
- In the Anki app menu, go to
Manage Note Types
. - Select the
Anki flashcards: ...
Note Type. - Select the
Cards
button. - Select the
Styling
option. - Copy our
--color-code
variables frombreeze.dark.less
. - Add them to the bottom of the
Styling
box, and edit them. - Repeat for all Anki flashcard card types
If you edit your colors this way, changes will be lost every time you download a new release of Anki Flashcards and import them to Anki. See below for a better way.
If you don't want to lose your theme changes everytime a new release of Anki Flashcards is imported to Anki, you'll need to clone or fork this repo.
Once you've levelled up your programming skills and the thought of using terminal doesn't scare you, you're ready to try your hand at doing things 🧑🎓 the professional way.