Anki themes

Learning to code with Anki — themes, cards, templates and syntax highlighting

Want to learn how to code?

Anki helps you learn and remember quickly. The default cards aren't great for programming, so these flashcards and themes make it fun to learn.

• Suitable for all learning levels
• Perfect for frontend and backend programmers
• Popular languages supported
• Add color to your code
• Fully customisable (create your own themes and cards!)

Are you looking to master html, css, javascript, php, python, R — or just getting started? If you're new to Anki, read these guides first; otherwise ... let's begin!

Keep it simple, stupid!

100 cards with one idea  >  10 cards with 100 ideas

Simple is better. If you only had 280 characters, what would you say? It's good practice to write your flashcards like you'd write code; as clear as possible. Imagine you're stupid, writing for your stupid future self — when you look back on your flashcards, they'll make sense.

• One idea per card
• Trim the fat (less is more)
• Keep it relevant (reduce cognitive load)

A card stuffed with facts will overload the brain. I imagine you're trying to learn:

• A theme, or idea
• A function, or code snippet
• Syntax, or high-level documentation

So, unless its a super hard question, if you're spending more than a minute reviewing each card — reduce, reduce, reduce. Simplify it!

Cards

There's two types of cards to choose from:

1. Simple
   • What's the answer?
   • What does this syntax do?
2. Missing!
   • A question with a […] word
   • A question with a [missing] word

Add color to your code

Basic syntax highlighting

You can mark any inline <code> with bold or italic buttons in the Anki editor for basic syntax highlighting (or the equivalent HTML tags).

Full syntax highlighting (Markdown)

Life is better in full colour!

Anki themes come in light and dark, with full syntax highlighting:

• Starter themes
  • Monokai
  • Solarized light
• Create your own colour theme

Once you've got the basics down, you can get really fancy with offline markdown->html, custom cards, and more ...

Quick start

1. Download the latest deck (.apkg)
2. Open Anki. Select File > Import ...
3. Import the deck
4. Add a card
5. Select Anki theme type
6. Get creative!

Next, you'll probably want to add some pretty colors.

The professional way ...

If you'd like to:

• Highlight your code blocks offline
• Convert Markdown to HTML automatically
• Select your theme colors
• Create custom cards

Then enter the world of the professional developer!

Why Anki Themes instead of a plugin?

I've spent a lot of time so you can:

• Use Anki themes as they are ...
• Use the excellent Markdown > HTML workflow
• Customise the css to your hearts content.

Works on all platforms: AnkiMobile, MacOS and Android.

There are other plugins out there that are fun to use, but beware of dependency hell!

Be careful when ...

Upgrading your deck

⚠️ Always backup your deck before installing a new version!

I try to stick to major.minor.patch semantic versioning, so updates don't break existing cards. Anki makes this tricky, so view commits for any major changes to the theme.

Creating your flashcards

⚠️ Stick to Common Markdown or safe HTML to avoid unintended consequences in Anki.

Formatting problems

⚠️ If you're having formatting problems, make sure you're following the guide and clicking ☰ -> Edit html in the editor, then enter plain html. Many editors break formatting when you copy->paste text, or add junk to the html.

Licensed under MIT

Anki themes are licensed under the MIT Open Source License

Thanks to ...

Inspiration

I've had a lot of inspiration from Anki essentials, Janki method, Enduring CSS component naming conventions, @mdo code guide and @cbracco ... so, thanks!