Skip to content

Latest commit

 

History

History
72 lines (47 loc) · 4.2 KB

README.md

File metadata and controls

72 lines (47 loc) · 4.2 KB

Anki theme: Styles

Tomorrow light and Monokai

Basic styling

For basic styling of your html, css, python or your programming language of choice, you can use simple HTML5 tags to add colour to your code. These work out of the box with ☆ Syntax (inline code) and ♘ Puzzle (inline code) (you don't need to add a <code> tag to these fields). For all other code you want to highlight, wrap in <code> or <pre><code> to get the pretty colours!

  • Default colour is white

  • <b> or <strong> for operators (if, and, >=, print etc)

  • <i> or <em> for an int or float

  • <s> or <u> for a string

  • <span> or <sup> for keywords (function, class)

  • <var> or <sub> for arguments (args, variables)

  • <small> for # comments

  • <q> wildcard (could be used for css class for instance)

  • <mark> wildcard (could be used for a specific highlight)

Changing the default theme

I'm using Less to generate the main.css file from src/assets/less/main.less — refer to code and comments there. The colour scheme is set with variables in src/assets/less/theme/code.less and src/assets/less/theme/pre.less, it's best to create your own variables file to avoid losing changes when updating the theme:

  • Copy @theme-dark- and @theme-light- variables into my-variables.less.
  • Add my-variables.less as the last @include in main.less.
  • Recompile the main.css file using Codekit (or Gulp).

Automatic syntax highlighting with Pygments

Previous versions of Anki Theme used highlight.js. It's an amazing plugin, but proved too unreliable to be useful. "Practicality beats purity".

Anki Theme now provides styles for use with Pygments. You can either convert Markdown to pygments with a plugin, or via the command line.

Step 1

  1. Download the power format pack for Anki. It's a great plugin that speeds up your workflow, allowing you to quickly convert Markdown to HTML.
  2. By default, the plugin uses inline styles, not the standard Pygments classes. Follow this guide to force pygments to output properly.

If you prefer using stock Anki, you can use Python Markdown and it's codehilite plugin to generate your code blocks.

Step 2

Ok, so that's the hard part over. Next, it's as simple as ...

  1. Write your code as Markdown fenced code blocks.
  2. Hit the Markdown button M↓ on your new plugin's control panel.
  3. That's it. You're done. Did you expect more steps?!

You don't have to keep a backup, as Power Format Pack handles this for you (using a checksum, so even if you delete the plugin, your code is safe!). You can always keep a backup in the ✎ Markdown field provided — here you can store raw markdown or a link to the original code (Github gist for example).

Changing the Pygments theme:

See Changing the default theme. If you have specific needs, you can create your own pygments.less file:

  1. Compile your prefered theme via the command line with Pygments
  2. Rename the file to my-pygments.less, add to src/assets/less/theme/ folder
  • Add in the @theme-dark- variables if required.
  1. Recompile main.less.
  2. Done!