Anki Syntax Highlighting

☕ 8 min read
🏷️
  • #Productivity
  • 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 */