In this example deck you'll find note type showing how to do syntax coloring for field content or only part of field content.
More precisely, you'll see:
- having a field whose content is assumed to be code in python, in haskell, etc... in any specific language
- Having a field whose content is an unknown language guessed automatically (it usually work fine, since a lot of coloring does not depend that much of the language)
- Having a field whose content is in a language specified by another field
- Having a field such that some part of the field is treated as code. This does not work perfectly, in particular, it tries to color "..." of cloze deletion, which of course lead to non sens.
Comparison with Syntax Highlighting for Code
Glutanimate, Tim Rae and tmbb made an add-on that also do syntax coloring. This add-on is entirely compatible with my technique in the sens that you can have card which is one technique and card that use the other one. However, you can't use both techniques at once for a given card.
In my opinion, and with all due respect, there are two main problems with their add-ons:
- for each code you need to select the code, then indicates in which language it is. Instead, my cards allows you to state that the field Python always contains some python code for example. Or that the field Code always contains some code, and that the program may try to guess which language
- The coloring is fixed at note creation. This means that if you want to change the coloring later on, you'll need to change every note on by one.
- The coloring is done by adding html in the field. This means that any change become complex to do if you don't have the add-on installed (i.e. smartphone, or with a version of anki breaking the add-on). It's not even clear to me how you can update the code even with their add-on. This is solved by my add-on since it only color code when reviewing/previewing
- Creating a note with code require the add-on. If you create a card on AnkiDroid, or by importing some csv, you'll need to do the coloring by hand later on computer. With this add-on, card can be created with code on AnkiDroid directly
However, their add-ons has two main advantage over this technique:
- color appear in the note editor, which makes editing far nicer. Instead, with my technique, you need to open the (p)reviewer to discover the card colored
- They use Pygments for coloring while I use Highlight. Pygments seems to give far better coloring.
- Since they do the coloring only once, it's quicker to load. With my method, you can notice the time we have to wait for the code to be colored.
How to use it
You can download the shared deck and take a look. Hopefully, if you are a dev', you can make sens of it. Essentially, you need to put
<link rel="stylesheet" href="\_default.css"/>
<script src="\_hl.pack.js"/>
<script src="\_highlight\_automatic.js"/>
on top of the card template, then
<pre><code class="language">FieldName
</code></pre>
to obtain the field "FieldName" colored as a code in the programming language "language". You can omit `class="language"` if you want to let Highlight guess the language.
The file "_hl.pack.js" comes directly from https://highlightjs.org/download/ , you may want to generate your own file with the languages you're interested with. This example only contains the languages I have an interest in myself so you won't have Ruby or C# but you'll have oCaml and LaTeX in it. You may also want to use other stylesheet than the default one
Any improvement is welcome.
Since this is not an add-on (as it works on ankidroid directly), not a real deck (as the content is useless for learning), and not code source either, I am actually not sure what's the best place to share it. Any idea is welcomed.