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
<div class="front">
2
  {{Front}}
3
</div>

Back Template

1
<div class="back">
2
  {{FrontSide}}
3

4
  <hr id=answer>
5

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

Styling

1
.card {
2
 font-family: "Open Sans","Lucida Sans",arial,sans-serif;
3
 font-size: 16px;
4
 text-align: left;
5
 color: black;
6
 background-color: white;
7
}
8

9
pre {
10
  font-family: Consolas,Menlo,Monaco,monospace;
11
  font-size: 14px;
12
  line-height: 1.5;
13
}
14

15
.night_mode code {
16
  background-color:#1e293d
17
}
18

19
.night_mode . {
20
background-color: black;
21
}
22

23
/* Dark Mode */
24
.night_mode .highlight pre { background-color: #272822; }
25
.night_mode .highlight .hll { background-color: #272822; }
26
.night_mode .highlight .c { color: #75715e } /* Comment */
27
.night_mode .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
28
.night_mode .highlight .k { color: #66d9ef } /* Keyword */
29
.night_mode .highlight .l { color: #ae81ff } /* Literal */
30
.night_mode .highlight .n { color: #f8f8f2 } /* Name */
31
.night_mode .highlight .o { color: #f92672 } /* Operator */
32
.night_mode .highlight .p { color: #f8f8f2 } /* Punctuation */
33
.night_mode .highlight .cm { color: #75715e } /* Comment.Multiline */
34
.night_mode .highlight .cp { color: #75715e } /* Comment.Preproc */
35
.night_mode .highlight .c1 { color: #75715e } /* Comment.Single */
36
.night_mode .highlight .cs { color: #75715e } /* Comment.Special */
37
.night_mode .highlight .ge { font-style: italic } /* Generic.Emph */
38
.night_mode .highlight .gs { font-weight: bold } /* Generic.Strong */
39
.night_mode .highlight .kc { color: #66d9ef } /* Keyword.Constant */
40
.night_mode .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
41
.night_mode .highlight .kn { color: #f92672 } /* Keyword.Namespace */
42
.night_mode .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
43
.night_mode .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
44
.night_mode .highlight .kt { color: #66d9ef } /* Keyword.Type */
45
.night_mode .highlight .ld { color: #e6db74 } /* Literal.Date */
46
.night_mode .highlight .m { color: #ae81ff } /* Literal.Number */
47
.night_mode .highlight .s { color: #e6db74 } /* Literal.String */
48
.night_mode .highlight .na { color: #a6e22e } /* Name.Attribute */
49
.night_mode .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
50
.night_mode .highlight .nc { color: #a6e22e } /* Name.Class */
51
.night_mode .highlight .no { color: #66d9ef } /* Name.Constant */
52
.night_mode .highlight .nd { color: #a6e22e } /* Name.Decorator */
53
.night_mode .highlight .ni { color: #f8f8f2 } /* Name.Entity */
54
.night_mode .highlight .ne { color: #a6e22e } /* Name.Exception */
55
.night_mode .highlight .nf { color: #a6e22e } /* Name.Function */
56
.night_mode .highlight .nl { color: #f8f8f2 } /* Name.Label */
57
.night_mode .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
58
.night_mode .highlight .nx { color: #a6e22e } /* Name.Other */
59
.night_mode .highlight .py { color: #f8f8f2 } /* Name.Property */
60
.night_mode .highlight .nt { color: #f92672 } /* Name.Tag */
61
.night_mode .highlight .nv { color: #f8f8f2 } /* Name.Variable */
62
.night_mode .highlight .ow { color: #f92672 } /* Operator.Word */
63
.night_mode .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
64
.night_mode .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
65
.night_mode .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
66
.night_mode .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
67
.night_mode .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
68
.night_mode .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
69
.night_mode .highlight .sc { color: #e6db74 } /* Literal.String.Char */
70
.night_mode .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
71
.night_mode .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
72
.night_mode .highlight .se { color: #ae81ff } /* Literal.String.Escape */
73
.night_mode .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
74
.night_mode .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
75
.night_mode .highlight .sx { color: #e6db74 } /* Literal.String.Other */
76
.night_mode .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
77
.night_mode .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
78
.night_mode .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
79
.night_mode .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
80
.night_mode .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
81
.night_mode .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
82
.night_mode .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
83
.night_mode .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
84

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

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

94
/* End Dark Mode */
95

96
.highlight {
97
  text-align:left;
98
  font-family: droid sans mono;
99
  background-color: #f2f2f2;
100
  padding-left: 5px;
101
  padding-right: 5px;
102
}
103

104
.highlight .hll { background-color: #ffffcc }
105
.highlight  { background: #f8f8f8; }
106
.highlight .c { color: #408080; font-style: italic } /* Comment */
107
.highlight .err { border: 1px solid #FF0000 } /* Error */
108
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
109
.highlight .o { color: #666666 } /* Operator */
110
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
111
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
112
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
113
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
114
.highlight .gd { color: #A00000 } /* Generic.Deleted */
115
.highlight .ge { font-style: italic } /* Generic.Emph */
116
.highlight .gr { color: #FF0000 } /* Generic.Error */
117
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
118
.highlight .gi { color: #00A000 } /* Generic.Inserted */
119
.highlight .go { color: #808080 } /* Generic.Output */
120
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
121
.highlight .gs { font-weight: bold } /* Generic.Strong */
122
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
123
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
124
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
125
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
126
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
127
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
128
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
129
.highlight .kt { color: #B00040 } /* Keyword.Type */
130
.highlight .m { color: #666666 } /* Literal.Number */
131
.highlight .s { color: #BA2121 } /* Literal.String */
132
.highlight .na { color: #7D9029 } /* Name.Attribute */
133
.highlight .nb { color: #008000 } /* Name.Builtin */
134
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
135
.highlight .no { color: #880000 } /* Name.Constant */
136
.highlight .nd { color: #AA22FF } /* Name.Decorator */
137
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
138
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
139
.highlight .nf { color: #0000FF } /* Name.Function */
140
.highlight .nl { color: #A0A000 } /* Name.Label */
141
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
142
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
143
.highlight .nv { color: #19177C } /* Name.Variable */
144
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
145
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
146
.highlight .mf { color: #666666 } /* Literal.Number.Float */
147
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
148
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
149
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
150
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
151
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
152
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
153
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
154
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
155
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
156
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
157
.highlight .sx { color: #008000 } /* Literal.String.Other */
158
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
159
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
160
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
161
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
162
.highlight .vc { color: #19177C } /* Name.Variable.Class */
163
.highlight .vg { color: #19177C } /* Name.Variable.Global */
164
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
165
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */