Skip to content
Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!
Branch: master
Clone or download
Latest commit 8c490da Apr 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source Update json Apr 30, 2019
.editorconfig Delete stuff. Edit stuff. Move stuff. Mar 2, 2019
.gitignore Simplify documentation Mar 15, 2019
README.md Update version Apr 30, 2019
license.md Update documentation, make a start with file organisation, add license Mar 8, 2018
package-lock.json Update version Apr 30, 2019
package.json Update version Apr 30, 2019
preview.png New snazzy image Feb 13, 2016

README.md

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
  • Syntax highlighting colors
  • 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!

Simple card preview

Keep it simple, stupid!

Simple is better.

When building your flashcards, simple is better:

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

Try not to stuff a card with facts, as it can overload the brain. You're generally trying to learn:

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

Imagine you're stupid, writing for your stupid future self

100 cards with one idea each, is better than 10 cards with 100 ideas.

Think of it like a tweet. If you only had 280 characters, what would you say? Just like writing code, it's good practice to make your flashcards clear, so when you look back on them they make sense.

You'll probably want

  1. A descriptive title (or intro)
  2. A clear question and answer
  3. Your key learning point

It's sometimes helpful to add

  1. A subtitle or tags (to group cards)
  2. Supporting notes (in bullet point form)
  3. Links to articles or documentation

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

Anki syntax highlighting

Basic syntax highlighting

Basic syntax highlighting can be achieve by marking the selecting <code> or <pre> blocks with the bold or italic buttons in the Anki editor (or the equivalent HTML tags).

Full syntax highlighting (Markdown)

If you like pretty code blocks, you're in luck: themes work with Pandoc to convert Markdown into HTML with full syntax highlighting (a replacement for Power Format Pack which used Pygments — see below)

Quick start

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

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

Advanced

⚠️ != Coming soon

  • Offline syntax highlighting
  • Convert Markdown to HTML
  • Select your theme colors
  • Create custom cards!

You'll know your way around Git and have Homebrew installed.

  1. brew install node
  2. Add this package.json to your project folder
  3. npm install

Next, follow the instructions for custom theme colors:

Why Anki Themes instead of a plugin?

Practicality beats purity

It may look cool, but shit breaks.

Dependency hell

If you're new to programming, let me explain. I previously used Power Format Pack, Stylus and Highlight.js — all of which are great, until ...

  1. One is dead, one dying.
  2. One just doesn't work with Anki.
  3. It happens all the time in tech.
  4. Be extra careful what you depend on.

I've worked hard 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.

⚠️ Be careful when ...

Upgrading your deck

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

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

Creating your flashcards

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

Formatting problems

⚠️ It's better to use the plain html as copy->paste in Anki often breaks formatting (adds messy br or div). Choose a field and navigate to: ☰ -> Edit html to correct any formatting issues.

Licensed under MIT

Anki themes are licensed under the MIT Open Source License

Thanks to ...

Inspiration

So what's all the fuss about Anki? Some inspiration below ...

Credits

  1. @kompa icons
  2. Enduring CSS component naming conventions
  3. @mdo code guide
You can’t perform that action at this time.