An Anki plugin that adds syntax highlighting to code snippets.
The recommended way to install this plugin is directly from AnkiWeb using Anki's add-on management.
Alternatively, you can install this plugin from source.
dev/bin/package
.codehighlighter.ankiaddon
in Anki.You can either highlight code from your clipboard or highlight a snippet of code already present in a card field.
CTRL+'
(on macOS, β+'
) or click this add-on's button in the
editor's button bar.CTRL+'
(on macOS, β+'
) or click this add-on's button in the
editor's button bar.For the list of supported languages and their corresponding codes, see
assets/_ch-hljs-lang-*.min.js
files in this repository.
The plugin works on untagged code blocks. Do not add your own HTML tags like
<code>
or <pre><code>
to the snippet you want to highlight. If you have run
into issues with preannotated code snippets, see this
comment
for how to fix this.
The plugin accepts the following configuration options:
block-style
(default: "display:flex; justify-content:center;") β The CSS
style applied to the outer most container of a block code snippet. The
default centers the block.css-files
(default lives in codehighlighter/main.py
) β the list of CSS
styles to use.shortcut
(e.g. ctrl+;
) β this sets the shortcut that triggers this
plugin.default-highlighter
(highlight.js
, pygments
, ``) β this sets the
default highlighting mechanism.If you see "The selection splits an HTML node, which prevents the highlighting plugin from proceeding", you are partially selecting an HTML element.
This plugin can not highlight a selection that partially selects an HTML element. To work around this, see these instructions.
This plugin installs its own JS and CSS files. It also modifies card templates. You need to run some manual steps if you:
If you add a new card template, run Extras/Tools > Refresh Code Highlighter Assets
.
To remove the plugin, run Extras/Tools > Delete Code Highlighter Assets
before deleting the plugin using Anki's internal add-on system. This
manual step is necessary until Anki adds add-on lifecycle
hooks.
This plugin supports a modified Solarized style out of the box (its day and night variants) provided by two CSS stylesheets:
assets/_ch-hljs-solarized.css
assets/_ch-pygments-solarized.css
You may install your own style but defining and configuring custom stylesheets.
To add a custom style, do the following:
_
. This is necessary to
prevent garbage collection from Anki when you save it in the media
directory. Let's say you named it _ch-my-style.css
._ch-hljs-solarized.css
.Open this plugin's configuration in Anki and change the value of
css-files
to use your new stylesheet, e.g.,:
{
"css-files": [
"_ch-my-style.css",
"_ch-pygments-solarized.css",
]
}
In the example above, we keep the default styles for Pygments.
You may download a ready stylesheet for highlight.js from the list of available styles.
You may customize it further by adding a custom border or adding a separate
style for dark mode. For how it's done, see
_ch-hljs-solarized.css
.
XXX_STYLE
variables in dev/bin/generate-pygments-css
to use your
desired style for each mode.dev/bin/generate-pygments-css
.
You may need to install a few dependencies for that script to run
(pygments
, webcolors
). Import errors will guide you.