Liwen's Notes

Recent Notes

Manual - Anki

11 min read

Anki is the crème de la crème of flashcard programs.

It is free and open source (except for the mobile apps) and has a large community around 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 general knowledge retention, look no further - Anki is the one.

Tip: On Organising Content

Below are extracts from Anki Doc that I often use as a reminder.

On Organising Content with Decks

Quote

Lots of little decks may mean you end up seeing cards in a recognisable 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!

Quote

Rather than creating many little decks, it is better to use tags and/or fields to classify your content.

Quote

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 search for “book:Unicon Is Awesome” 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.

Tip: Useful Features

Deck Override

Quote

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 put into the specified deck instead of the one 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 going to by choosing Deck Override again.

Text to Speech

Quote

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.

Quote

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

Quote

If there are multiple voices that support your chosen language, you can specify the 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 the Anki doc for details on more advanced text-to-speech usage.

HTML Stripping

Quote

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 field.

Templates

Special Reserved Fields

Quote

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 the back template): {{FrontSide}}. As with other fields, reserved field names are case sensitive - you must use {{Tags}} rather than {{tags}}, for example.

id=answer

Quote

id="answer" tells Anki where the divider is between the question and the answer. This allows Anki to automatically scroll to where the answer starts when you press Show Answer on a long card (handy 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 a div.

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 Custom 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