Anki Syntax Highlighting

Anki is a great app for using spaced repetition to help you retain information in your long-term memory.

But the default configuration is not ideal for displaying code. Here are some guidelines on setting up syntax highlighting (with dark mode compatibility).

Set Up Steps

Download Anki on your computer from here
Install the Syntax Highlighting for Code add-on
Add a Basic Card type (Front → Back)
Apply the config on provided below

Note that if you’re using an older version of Anki (< 2.1.20) then you’ll need the Night Mode add-on for dark mode.

Adding a Note Type

Here are the steps for adding a new note type in case you are not familiar with Anki.

Open the “Manage Note Types” panel from the “Notes” menu.

step 1 - manage note type

Click on “Add” to open the “Add Note Type” panel, select the “Add:Basic” type and click “OK”.

step 2 - add note type

Name your new note type and click “OK”.

step 3 - name note type

Select your new note type and click on “Cards…".

step 4 - open cards customization

This will bring up the card customization panel.

step 5 - customization panel

My Config

Check out the Syntax Highlighting add-on docs here if you want to further customize your config.

You can add different themes from here.

Front Template

1
2
3


<div class="front">
  {{Front}}
</div>

Back Template

1
2
3
4
5
6
7


<div class="back">
  {{FrontSide}}

  <hr id=answer>

  {{Back}}
<div class="back">

Styling

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165


.card {
 font-family: "Open Sans","Lucida Sans",arial,sans-serif;
 font-size: 16px;
 text-align: left;
 color: black;
 background-color: white;
}

pre {
  font-family: Consolas,Menlo,Monaco,monospace;
  font-size: 14px;
  line-height: 1.5;
}

.night_mode code {
  background-color:#1e293d
}

.night_mode . {
background-color: black;
}

/* Dark Mode */
.night_mode .highlight pre { background-color: #272822; }
.night_mode .highlight .hll { background-color: #272822; }
.night_mode .highlight .c { color: #75715e } /* Comment */
.night_mode .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.night_mode .highlight .k { color: #66d9ef } /* Keyword */
.night_mode .highlight .l { color: #ae81ff } /* Literal */
.night_mode .highlight .n { color: #f8f8f2 } /* Name */
.night_mode .highlight .o { color: #f92672 } /* Operator */
.night_mode .highlight .p { color: #f8f8f2 } /* Punctuation */
.night_mode .highlight .cm { color: #75715e } /* Comment.Multiline */
.night_mode .highlight .cp { color: #75715e } /* Comment.Preproc */
.night_mode .highlight .c1 { color: #75715e } /* Comment.Single */
.night_mode .highlight .cs { color: #75715e } /* Comment.Special */
.night_mode .highlight .ge { font-style: italic } /* Generic.Emph */
.night_mode .highlight .gs { font-weight: bold } /* Generic.Strong */
.night_mode .highlight .kc { color: #66d9ef } /* Keyword.Constant */
.night_mode .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.night_mode .highlight .kn { color: #f92672 } /* Keyword.Namespace */
.night_mode .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.night_mode .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.night_mode .highlight .kt { color: #66d9ef } /* Keyword.Type */
.night_mode .highlight .ld { color: #e6db74 } /* Literal.Date */
.night_mode .highlight .m { color: #ae81ff } /* Literal.Number */
.night_mode .highlight .s { color: #e6db74 } /* Literal.String */
.night_mode .highlight .na { color: #a6e22e } /* Name.Attribute */
.night_mode .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.night_mode .highlight .nc { color: #a6e22e } /* Name.Class */
.night_mode .highlight .no { color: #66d9ef } /* Name.Constant */
.night_mode .highlight .nd { color: #a6e22e } /* Name.Decorator */
.night_mode .highlight .ni { color: #f8f8f2 } /* Name.Entity */
.night_mode .highlight .ne { color: #a6e22e } /* Name.Exception */
.night_mode .highlight .nf { color: #a6e22e } /* Name.Function */
.night_mode .highlight .nl { color: #f8f8f2 } /* Name.Label */
.night_mode .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.night_mode .highlight .nx { color: #a6e22e } /* Name.Other */
.night_mode .highlight .py { color: #f8f8f2 } /* Name.Property */
.night_mode .highlight .nt { color: #f92672 } /* Name.Tag */
.night_mode .highlight .nv { color: #f8f8f2 } /* Name.Variable */
.night_mode .highlight .ow { color: #f92672 } /* Operator.Word */
.night_mode .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.night_mode .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.night_mode .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.night_mode .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.night_mode .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.night_mode .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.night_mode .highlight .sc { color: #e6db74 } /* Literal.String.Char */
.night_mode .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.night_mode .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.night_mode .highlight .se { color: #ae81ff } /* Literal.String.Escape */
.night_mode .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.night_mode .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.night_mode .highlight .sx { color: #e6db74 } /* Literal.String.Other */
.night_mode .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.night_mode .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.night_mode .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.night_mode .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.night_mode .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.night_mode .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.night_mode .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.night_mode .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

.night_mode .highlight .gh { } /* Generic Heading & Diff Header */
.night_mode .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.night_mode .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.night_mode .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */

.night_mode .highlight {background-color: #272822 !important}
.night_mode pre {color: #666666;}
.night_mode .linenodiv {background-color: #272822 !important}

/* End Dark Mode */

.highlight {
  text-align:left;
  font-family: droid sans mono;
  background-color: #f2f2f2;
  padding-left: 5px;
  padding-right: 5px;
}

.highlight .hll { background-color: #ffffcc }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #7D9029 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */