HTML/CSS code used to generate my Anki setup.
Make the text bold in the Anki editor to get coloured bold text. Underline code to make text coloured, bold, and underlined. The highlighting colour is set to the trim of the card.
Italicising text to generate inline code, and write code in the "Terminal" fields to display blocks of code in a mini-Terminal (see Instructions below).
Italicise text in the Terminal field to make it stand out -- useful for highlighting errors in code.
The front, back and CSS can be found here, here and here, respectively. The fonts used by the CSS file are stored here.
Note: fonts can also be incorporated by adding a <head> block in the front and back cards and inserting a link to the relevant font family but this does not work without an internet connection. To allow offline use, the fonts have been downloaded.
For syntax highlighting I used the Syntax Highlighting FORK (night mode fix, gui config, etc.) add-on.
The styling for my version of Monokai can be found here. I have updated the styling so that long comments do not automatically go off the card/page, and instead wrap onto the next line.
To see the terminal shown in the screenshots above, you need to do the following three things:
- Edit the card fields so that they are called Question, Terminal (Question), Answer, and Terminal (Answer);
- Go to the config for the syntax highlighting add-on (I used the Syntax Highlighting FORK (night mode fix, gui config, etc.) add-on) and click "Select Templates to update" and click "Yes". This will allow you to provide your own customised styling for the syntax highlighting, then;
- Copy the image here, the fonts folder here and the syntax highlighting CSS here into your
collection.media/folder.
