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 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
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.
- A descriptive title (or intro)
- A clear question and answer
- Your key learning point
- A subtitle or tags (to group cards)
- Supporting notes (in bullet point form)
- 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!
There's two types of cards to choose from:
- Simple
- What's the answer?
- What does this syntax do?
- Missing!
- A question with a
[…]word - A question with a
[missing]word
- A question with a
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).
- Default themes
- Custom themes
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)
- Download the latest deck (
.apkg) - Open Anki. Select
File > Import ... - Import the deck
- Add card
- Select
Anki themetype - Get creative!
Next, you'll probably want to add some pretty colors.
⚠️ != 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.
brew install node- Add this
package.jsonto your project folder npm install
Next, follow the instructions for custom theme colors:
Practicality beats purity
It may look cool, but shit breaks.
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 ...
- One is dead, one dying.
- One just doesn't work with Anki.
- It happens all the time in tech.
- Be extra careful what you depend on.
I've worked hard so you can:
- Use Anki themes as they are ...
- Use the excellent
Markdown > HTMLworkflow - Customise the css to your hearts content.
Works on all platforms: AnkiMobile, MacOS and Android.
⚠️ 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.
⚠️ Only use Common Markdown or safe HTML to avoid unintended consequences in Anki.
⚠️ It's better to use the plain html ascopy->pastein Anki often breaks formatting (adds messybrordiv). Choose a field and navigate to:☰ -> Edit htmlto correct any formatting issues.
Anki themes are licensed under the MIT Open Source License
So what's all the fuss about Anki? Some inspiration below ...
- @kompa icons
- Enduring CSS component naming conventions
- @mdo code guide