Liwen's Notes

Recent Notes

Manual - Anki

Feb 24, 202311 min read

Anki is the crème de la crème of flashcards program. It is free and open source (except for mobile apps) and has a large community behind it. The mobile apps are among the best apps one can ever ask for. If you are looking for a flashcard app for school studying, exams, language learning, or just general knowledge retention, look no further - Anki is the one.

Below are extracts from Anki Doc that I use as a quick reference guide.

Organising content

On Organising Content with Decks

Lots of little decks may mean you end up seeing cards in a recognizable order. On older scheduler versions, new cards can only be introduced in deck order. And if you were planning to click on each deck in turn (which is slow), you will end up seeing all the “chapter 1” or “food verb” reviews together. This makes it easier to answer the cards, as you can guess them from the context, which leads to weaker memories. When you need to recall the word or phrase outside Anki, you won’t always have the luxury of being shown related content first!

Instead of creating lots of little decks, it’s a better idea to use tags and/or fields to classify your content.

For those who like to stay very organised, you can add fields to your notes to classify your content, such as “book”, “page”, and so on. Anki supports searching in specific fields, which means you can do a search for “book:my book” page:63 and immediately find what you’re looking for.

Difference between Flags and Tags

Tags work on notes, while flags work with individual cards. A note can have multiple tags, but a card can only be associated with a single flag.

Useful Features

Deck Override

The ‘Deck Override’ option allows you to change the deck that cards generated from the current card type will be placed into. By default, cards are placed into the deck you provide in the Add Notes window. If you set a deck here, that card type will be placed into the deck you specified, instead of the deck listed in the Add Notes window. This can be useful if you want to separate cards into different decks (for instance, when studying a language, to put production cards in one deck and recognition cards in another). You can check which deck the cards are currently going to by choosing Deck Override again.

Text to Speech

To have Anki read the Front field in a US English voice, you can place the following in your card template: {{tts en_US:Front}} On Windows, macOS, and iOS, Anki will use the OS’s built in voices.

To see a list of all available languages/voices, place the following on your card template: {{tts-voices:}}

If there are multiple voices that support your chosen language, you can specify desired voices in a list, and Anki will choose the first available voice. For example: {{tts ja_JP voices=Apple_Otoya,Microsoft_Haruka:Field}}

Refer to Anki doc for details on more advanced text-to-speech usage.

HTML Stripping

Anki provides the ability to strip formatting from fields when they are replaced. If you prefix a field name with =text:=, e.g., <a href="http://example.com/search?q={{text:Word}}">check in dictionary</a> Anki will not include any formatting for the Word filed.

Templates

Special Fields

There are some special fields you can include in your templates:

  • The note’s tags: {{Tags}}
  • The type of note: {{Type}}
  • The card’s deck: {{Deck}}
  • The card’s subdeck: {{Subdeck}}
  • The type of card (“Forward”, etc): {{Card}}

The content of the front template (only valid in back template): {{FrontSide}}. As with other fields, special field names are case sensitiv - you must use {{Tags}} rather than {{tags}} for example.

Gotchas

The id="answer" part tells Anki where the divider is between the question and the answer. This allows Anki to automatically scroll to the spot where the answer starts when you press ‘show answer’ on a long card (especially useful on mobile devices with small screens). If you don’t want a horizontal line at the beginning of the answer, you can use another HTML element such as a paragraph or div instead.

Liwen’s Anki HTML Snippets

<span class="grammar"></span>
<span class="register"></span>
<span class="synonym"></span>
<span class="meta"></span>
<span class="collocation"></span>
<span class="collocation entity"></span>
<span class="family entity"></span>
<span class="pronunciation"></span>
 
<span class="refcard"></span>
<span class="concept"></span>
 
<p class="sidenote"><p>
 
<p class="keypoint"></p>
<span class="topic"></span>
<em></em>

Cluster

<div class="cluster">
  <span>Item</span>
</div>
 
<div class="cluster">
  <span><span class="grammar">adj.</span> Item</span>
</div>

Liwen’s CSS for Anki Note Types

Note Type: Close Deletion

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  width: 92%;
  font-size: 1.25em;
  text-align: center;
  margin: 1em auto;
}
 
em { 
  font-weight: 400; 
}
 
.cloze { 
  color: #0897B4; 
}
 
.nightMode 
.cloze { 
  color: #9FC131; 
}

Note Type: Question & Answer

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  text-align: center;
  width: 94%;
  font-size: 1.25em;
  margin: 1em auto;
}
 
.card.nightMode {
  color: #e4f0fb;
}
 
hr { 
  margin: 1em auto; 
  border: 1px solid #91b4d5;
  border-radius: 2px;
}
 
code, 
pre {
  font-family: Menlo, Monaco, monospace ;
  font-size: 0.75em;
  line-height: 1.35;
}
 
pre { 
  text-align: left; 
  padding: 0 10%;
  line-height: 1.5;
}
 
img { 
  display: block; 
  margin: 1em auto; 
}
 
ul, ol, dl  { 
  width: 92%; 
  text-align: left; 
  margin: 0 auto 0.75em; 
}
 
ul, ol, dl { 
  padding: 0; 
}
 
ol { 
  list-style-type: none; 
  counter-reset: ol-counter; 
}
 
ol li:before {
  font-family: Georgia, "Times New Roman", serif;
  content: counter(ol-counter) ".";
  counter-increment: ol-counter;
  color: #8edb04;
  font-size: 1.4em;
  padding-right: 0.2em;
}
 
dt { 
  font-weight: 600; 
  margin: 0.5em 0 0.25em;
}
 
dd {
  margin-left: 1em;
}
 
 
h3 {
  font-size: 1em;
}
 
h3, h4, h5 {
  font-weight: 600;
  color: #32ae85;
  text-align: left;
}
 
 
em { 
  color: #27e8a7; 
  font-style: normal;
  font-weight: 600;
}
 
.keypoint { 
  color: #8edb04;
  font-size: 1.5em;
  font-weight: 600;
}
 
.term,
.refcard,
.concept,
dt {
  color: #df4576;
  font-weight: 600;
}
 
.refcard:after { 
  content: " 🔗"; 
}
 
.meta { 
  font-size: 0.75em; 
  color: #7390aa; 
}
 
.meta::before { 
  content: "["; 
}
 
.meta::after { 
  content: "]"; 
}
 
.metabar { 
  display: block; 
  text-align: right; 
  font-size: 0.75em; 
  margin: 0 auto 0.75em; 
}
 
.sidenote { 
  color: #7390aa; 
}
 
.sidenote::before { 
  content: "📝 " 
}
 
.tags { 
  color: #999; 
  text-transform: capitalize; 
}
 
.tags::before { 
  content: "🔖 "; 
}
 
.clue { 
  color: #0897B4; 
  display: block; 
}
 
.clue::before { 
  content: "💡 "; 
}

Note Type: Standard Note

.card {
  font-family: "Kohinoor Bangla", sans-serif;
  text-align: left;
  width: 92%;
  font-size: 1.15em;
  margin: 1em auto;
}
 
.card.nightMode {
  color: #e4f0fb;
}
 
.title {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2em
}
 
img { 
  display: block; 
  margin: 0 auto; 
}
 
ul, ol, dl { 
  margin: 0 auto 0.75em;
  padding: 0 0 0.5em 1em;
}
 
ol { 
  list-style-type: none; 
  counter-reset: ol-counter; 
  padding: 0 0 0.5em 0;
}
 
ol li:before {
  font-family: Georgia, "Times New Roman", serif;
  content: counter(ol-counter) ".";
  counter-increment: ol-counter;
  color: #27e8a7;
  font-size: 1em;
  padding-right: 0.4em;
}
 
h3, h4, h5 {
  font-weight: 600;
  color: #27e8a7;
}
 
h3 { 
  font-size: 1.1em; 
}
 
h4 { 
  font-size: 0.95em;
}
 
em { 
  color: #27e8a7; 
  font-style: normal;
  font-weight: 600;
}
 
hr { 
  margin: 1em auto; 
  border: 1px solid #91b4d5;
  border-radius: 2px;
}
 
code { 
  font-size: 1.25em; 
}
 
table {
  border-collapse: collapse;
  margin-bottom: 1.6em;
}
 
th, td {
  border: 1px solid #666;
  padding: 8px;
  text-align: left;
  font-weight: 400;
}
 
thead th {
  font-weight: 800;
  color: #27e8a7;
}
 
.upper {
  text-transform: uppercase;
}
 
.pronunciation { 
  font-size: 0.85em; 
  color: #7390aa; 
  font-weight: 400;
  white-space: nowrap;
}
 
.pronunciation::before { 
  content: "[" 
}
 
.pronunciation::after { 
  content: "]" 
}
 
p.examples {
  margin: 0.15em auto;
}
 
.examples::before { 
  content: "📃 "; 
}
 
.term, 
.refcard,
.concept { 
  color: #0897B4; 
  font-weight: 600;
}
 
.keypoint, 
.topic { 
  color: #add7ff;
  font-size: 1.35em;
}
 
.highlight {
  color: #add7ff;
  font-size: 1.35em;
  font-weight: 600;
}
 
.term::after, 
.refcard:after { 
  content: " 🔗"; 
}
 
dt { 
  color: #D95252; 
  font-weight: 600; 
  margin: 0.5em 0 0.25em;
}
 
.meta { 
  font-size: 0.75em; 
  color: #999; 
}
 
.meta::before { 
  content: "[";
 
}
.meta::after { 
  content: "]"; 
}
 
.metabar { 
  display: block; 
  text-align: right; 
  font-size: 0.75em; 
  margin: 0 auto 0.5em;
}
 
.group::before,
.group::after { 
  font-size: 1.25em; 
  color: #add7ff;
}
 
.group::before { 
  content: "⦑ "; 
}
 
.group::after { 
  content: " ⦒"; 
}
 
.tags { 
  color: #888; 
  text-transform: capitalize; 
}
 
.tags::before { 
  content: "🔖 "; 
}
 
.cluster {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1em;
}
 
.cluster > * {
  display: block;
  background-color: #506477;
	padding: 0.25em 0.75em;
  border-radius: 0.5em;
}
 
.cluster .alt1 {
  background-color: #df4576;
}
 
.note {
  padding-left: 0.5em;
  font-style: italic;
  color: #a5a5a5;
  border-left: 6px solid #666;
}

Note Type: Concept

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  font-size: 1.25em;
  text-align: left;
  width: 94%;
  margin: 1em auto;
}
 
.card.nightMode {
  color: #e4f0fb;
}
 
.concept { 
  display: block;
  margin: 0 auto;
  text-align: center;
}
 
img { 
  display: block; 
  margin: 0 auto; 
}
 
ul, ol, dl {
  margin: 0.75em auto;
  padding: 0 1em;
  text-align: center;
}
 
h3 {
  font-size: 1.2em;
  font-weight: 600;
  color: #4682B4;
}
 
em { 
  color: #27e8a7; 
  font-style: normal;
  font-weight: 600;
}
 
dt { 
  color: #D95252; 
  font-weight: 600; 
}
 
hr { 
  margin: 1em auto; 
}
 
.term, 
.refcard { 
  color: #0897B4; 
}
 
.term::after, 
.refcard:after { 
  content: " 🔗"; 
}
 
.metebar { 
  display: block; 
  text-align: right;  
  font-size: 0.75em; 
}
 
.tags { 
  color: #888; 
  text-transform: capitalize; 
}
 
.tags::before { 
  content: "🔖 "; 
}
 
.meta { 
  font-size: 0.75em; 
  color: #999; 
}
 
#notes { 
  background: '';
}
 
.example { 
  color: #DFF5F4; 
} 
 
.notes { 
  color: #bbb; 
  font-size: 0.95em; 
}

Note Type: Pronunciation Correction

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  text-align: center;
  width: 92%;
  font-size: 1.25em;
  margin: 1em auto;
}
 
.card.nightMode {
  color: #e4f0fb;
}
 
hr { 
  margin: 1em auto; 
  border: 1px solid #91b4d5;
  border-radius: 2px;
}
 
em { 
  font-style: normal; 
}
 
.pronunciation { 
  font-size: 0.85em; 
  color: #0897B4; 
  font-weight: 400; 
}
.pronunciation::before,
.pronunciation::after { 
  content: "/" 
}
 
.word { 
  font-size: 1.25em; 
  font-weight: 600;
}
 
.idiom, 
.collocation { 
  font-weight: 400; 
  color: #9370DB; 
}

Note Type: Vocabulary

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  text-align: center;
  width: 94%;
  margin: 1em auto 0;
  font-size: 1.25em;
}
 
.card.nightMode {
  color: #e4f0fb;
}
 
hr { 
  margin: 1em auto; 
  border: 1px solid #91b4d5;
  border-radius: 1px;
}
 
ul, ol { 
  margin: 0 auto; 
  padding: 0; 
  width: 94%; 
  text-align: left; 
}
 
em {
  color: #32ae85;
  font-style: normal;
}
 
h3, h4, h5 {
  font-weight: 600;
  color: #32ae85;
}
 
h3 {
  font-size: 1em;
}
 
.upper {
  text-transform: uppercase;
}
 
.repository {
  color: #9370db;
  color: #e4f0fb;
}
 
.word {
  display: block;
  font-size: 1.1em;
}
 
.pronunciation { 
  font-size: 0.85em; 
  color: #7390aa; 
  font-weight: 400;
  white-space: nowrap;
}
 
.pronunciation::before { 
  content: "[" 
}
 
.pronunciation::after { 
  content: "]" 
}
 
.meta { 
  font-size: 0.75em; 
  color: #999;
}
 
.synonym, 
.antonym { 
  font-weight: 600; 
  color: #ffb900; 
}
 
.synonym::before { 
  content: " 👉 " 
}
 
.antonym::before { 
  content: " 👈 " 
}
 
.grammar { 
  color: #11bafd; 
  font-style: italic;
}
 
.grammar::after {
  content: " ▻ "; 
}
 
.register { 
  color: #df4576;
  font-weight: 600;
}
 
.entity::after { 
  content: " • "; 
}
 
.entity { 
  font-weight: 600; 
}
 
.examples {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-item: flex-start;
  gap: 0.75em 0;
}
 
.conjugations {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1em;
  font-size: 0.9em
}
 
.conjugations > * {
  display: block;
  background-color: #506477;
  padding: 0.15em 0.65em;
  border-radius: 0.5em;
}
 
.sidenote { 
  color: #7390aa; 
}
 
.sidenote::before { 
  content: "📝 " 
}
 
.examples p {
  line-height: 1.85em;
  text-align: left;
  margin: 0;
}
 
.idiom, 
.collocation { 
  color: #27e8a7; 
}
 
.family { 
  color: #0897b4; 
}
 
.family::after { 
  color: #42675a; 
}
 
.cluster {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1em;
}
 
.cluster > * {
  display: block;
  background-color: #506477;
  padding: 0.25em 0.75em;
  border-radius: 0.5em;
}
 
.cluster .alt1 {
  background-color: #df4576;
}
 
.metabar { 
  display: block; 
  text-align: right; 
  font-size: 0.75em; 
  margin: 0 auto 0.75em; 
}
 
.tags { 
  color: #999; 
  text-transform: capitalize; 
}
 
.tags::before { 
  content: "🔖 "; 
}
 
.ipad code#typeans {
  font-family: Menlo, monospace;
  font-size: 0.65em;
}

Node Type: Zettel

.card {
  font-family: "Kohinoor Bangla", "Avenir Next", sans-serif;
  text-align: center;
  width: 94%;
  font-size: 1.25em;
  margin: 1em auto;
}
 
img { 
  display: block; 
  margin: 0 auto; 
}
 
ul, ol, dl,
.sec-title-4-list { 
  width: 92%; 
  text-align: left; 
  margin: 0 
  auto 0.75em; 
}
 
ul, ol, dl { 
  padding: 0; 
}
 
ol { 
  list-style-type: none; 
  counter-reset: ol-counter; 
}
 
ol li:before {
  font-family: Georgia, Times, "Times New Roman", serif;
  content: counter(ol-counter) ".";
  counter-increment: ol-counter;
  color: #8edb04;
  font-size: 1.4em;
  padding-right: 0.4em;
}
 
h3 { 
  font-weight: 600; 
  color: #4682B4; 
  font-size: 1em; 
}
 
em { 
  color: #9370DB; 
  font-style: normal; 
}
 
hr { 
  margin: 1em; 
}
 
code { 
  font-size: 1.25em; 
}
 
.term, 
.refcard { 
  color: #0897B4;
}
 
.keypoint { 
  color: #8edb04;
  font-size: 1.5em;
  font-weight: 600;
}
 
.concept { 
  color: #8edb04; 
}
 
.term::after, 
.refcard:after { 
  content: " 🔗"; 
}
 
dt { 
  color: #D95252; 
  font-weight: 600; 
  margin: 0.5em 0 0.25em;
}
 
.meta { 
  font-size: 0.75em; 
  color: #999; 
}
 
.meta::before { 
  content: "["; 
}
 
.meta::after { 
  content: "]"; 
}
 
.sidenote { 
  color: #999; 
} 
 
.metabar { 
  display: block; 
  text-align: right; 
  font-size: 0.75em; 
  margin: 0 auto 0.5em; 
}
 
.sidenote::before { 
  content: "📝 " 
}
 
.tags { 
  color: #888; 
  text-transform: capitalize; 
}
 
.tags::before { 
  content: "🔖 "; 
}
 
.clue { 
  color: #0897B4; 
  display: block; 
}
 
.clue::before { 
  content: "💡 "; 
}

Graph View

Backlinks

  • No backlinks found