17 0
Contact Author Sign in to rate

Syntax Highlighting FORK (night mode fix, gui config, etc.)

0.98MB. Updated 2020-11-14. Only supports Anki 2.1.x.
The author has shared 70 other item(s).


This description only refers to the add-on version for Anki 2.1.32+ For the original add-on Syntax Highlighting for Code (maintained/extened by glutanimate) click here. This add-on is a fork (modified version). My version has several improvements, mainly better night mode compatibility and a different user interface which I think is more flexible to use and easier to setup. You can e.g. - ... quickly filter all available styles. - ... easily make your syntax highlighting compatible with night mode: If you don't need a custom background color for your code block it's just one checkbox in the add-on config for many themes. If you want custom background colors check two boxes in the configuration dialog (use CSS and update templates). With the original you need to install a different add-on, copy a file to your media folder and adjust all your templates manually. As in the original add-on the css option only works if the style you use is suited to the night mode. Only the default layout is adjusted to the anki nightmode. I haven't tested other layouts. - ... paste code unformatted (wrapped in "pre" or "code" tags). For pre this add-on automatically set the inline styling style="text-align: left;" so that the code is properly left aligned even if you have "text-align: center" from the .card class. - ... easily configure a custom font for the snippets - ... paste highlighted code as inline code wrapped in a "< code >" tag. To use this press "win/meta" while selecting your action from the menu. This feature only partially works. - ... when in the editor you can override your default settings with modifier keys. e.g. You just opened the language selection menu with "Alt+s" in the editor. Then use the cursor to select the relevant language. Before you press "Return" hold down "Alt" and only release it after you have pressed "Return". "Alt" means you get inline styling and you can set a custom style even though in general you use css. "Shift" toggles the default setting for line numbers for this one time and "Control" toggles your setting for centering for this one time. - ... set a custom font. Use my version at your own risk! This add-on works well for me but as a prudent user you have backups ... You can download the following screencasts (gifs) by right-clicking them. Then select "save image as" from the context menu (tested in Chrome and Firefox). Then open these gifs with a program that supports to pause gif files. On Windows I use the popular image viewer IrfanView that can also display gifs. IrfanView has "Options->Start/Stop Animation" and you can adjust the speed with [SHIFT][CTRL][+] or [SHIFT][CTRL][-]. On Linux I use mpv. In this screencast I use this add-on to toggle the night mode for webviews. Here is a screencast about the initial setup and use. # Night Mode setup (if you use the default options that don't use classes) By default pygments creates code snippets that have a bright background. # technical changes Apart from the different UI I made these changes: - I bundle much more recent pygments versions. - For centering I no longer use the deprecated "<center>" tag. Instead I use "margin: 0 auto;". When no css is used I also add "text-align: left;" for the code (or pre tag) so that I can override the setting "text-align: center" from the .card class. This isn't necessary when you use "<center>". - When no css is used pygments still applies the classes "highlight". This has advantages but also some drawbacks. Usually I want a really dark background but such a background doesn't work for all themes, e.g. keywords in the borland theme are dark blue and hardly readable on a dark background. So my add-on adds a custom class for each theme: Instead of just "highlight" a class like "shf__default__highlight" (if you use the default theme) or "shf__borland__highlight" is added. - For inserting html without classes I don't use "inserthtml" because this strips inline styling when it matches the css styling. For technical details see e.g. this stackoverflow thread. In the editor text-align is set to left. When I use "inserthtml" this removes the inline style "text-align: left;" from a tag. When I review and use "text-align: center" this will be a problem. So I switched to a custom html insertion function. For some styling related changes I use bs4. # bugs etc. Please do not use reviews for bug reports or support requests. I don't get notified of your reviews, and properly troubleshooting an issue through them is nearly impossible (formatting is limited and I can't reply multiple times). If you find a bug let me know on github or in the anki forum (click the "contact author" button in the upper right). When you use the css option and the code doesn't look like expected: Make sure to check if the styling section of your card template starts with the line '@import url("_styles_for_syntax_highlighting.css");'. Then check if you have the file "_styles_for_syntax_highlighting.css" in your media folder and if it contains the css styles you want. # Versions - 2020-11-13 "pre" has inline style "text-align: left;" and custom class, individual class for each theme when using inline styling, when using classes option to use style per class, use less bs4, - 2020-09-13 pygments 2.7.0, add button in settings to view/edit css file (location), add dialog to update all templates (instead of having to select each one). - 2020-05-13 try to fix #2 (display chosen font when using classes) - 2020-05-05 fix #1 (some code isn't inserted) - 2020-04-27 small improvements for the filter dialog: remember size, etc. - 2020-03-24 pygments 2.6.1, night-mode fix in settings, reset font option in settings, remove leading spaces if possible (code by hakakou), - 2020-01-03 handle non-existent lang names - 2019-12-28 Pygments 2.5.2, fix for "sometimes no text was pasted" - 2019-11-19 multiple fixes, improve inline code function, postprocess with bs4 - 2019-10-18 initial release # Credits and License see the file __init__.py of this add-on. the code to insert/wrap in "pre" or "code" tags is reused from the add-on Mini Format Pack Supplementary. I didn't make a pull request to the original repo because my version is different and maybe some people prefer the old menu in the buttons bar and because my code doesn't adhere to the guidelines for contributions the current maintainer glutanimate has published (still latest in 2020-11).


As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.

Supported Anki versions:

To download this add-on, please copy and paste the following code into Anki 2.1:


If you were linked to this page from the internet, please open Anki on your computer, go to the Tools menu and then Add-ons>Browse & Install to paste in the code.

All Anki 2.1.x Add-Ons Contact Author


on 1609668916
change "style" from "defalt" to "monokai" in the file config.json, then it works well with dark mode ; )
on 1608485169
must have for cards with code
on 1607277825
on 1605016802
Easily fixes night mode as promised
on 1602093888
This fork fixes issues I had with the original in windows 7
on 1599555915
Great Work!! I think it better if the add-on can adjust the line spacing,
Comment from author
I can see that this might be useful. On the other hand I don't use this and I don't want to add to much into the config dialog.

But if you use css to apply the syntax highlighting you need to add just one line into the file "_styles_for_syntax_highlighting.css" in your media folder. Add "line-height: 150%;" (without the quotes) to the class highlight so that the first three lines of the file look like this:

.highlight {
line-height: 150%;

If you ever change the style you use in the add-on config you'll have to re-apply this change.

I also just uploaded a new version of this add-on. If you have "use css" checked now there's a button "Edit css file in media folder" that gives you the full file location. Future versions will extend the function of this button to actually open the file ...
on 1592699810
Excellent work. I was just about to look into how I could edit it for Dark Mode. Thanks!
on 1590026846
Great update!
on 1589224030
Nice work!
on 1588972326
on 1587501070
Thank you so much. The original add-on was simply crap, especially when using it with dark mode / cards with dark background.
on 1587485475
Alt+S, Space/Enter for keyboard shortcut code formatting worked perfectly! Thanks a bunch for the great tip :D
Comment from author before post was edited

So far I haven't added a dedicated shortcut for the default formatting because I can use everything with my left hand from the default position: I can quickly insert the default language with "Alt+S, Space" (because default is preselected and in my menu "space" means "accept/Enter") or "Alt+S, d". "Alt+S" opens the menu and inside the menu you can use single letters to trigger an action from the main window (the relevant letters are underlined). In the menu you can also go up and down with "g" and "b" so that the menu can be used with just the left hand.

Does this also suffice for you?
on 1584378716
This add-on is, IMHO, much more efficient to use than the original version, where I need to hack together CSS classes to just change the font (and often achieving inconsistent results). Now it's just putting the font name in the config. Boom. Works like a charm. Thanks for developing this.
on 1583793021
Very easy to setup and use.
on 1576482466
It has become more beatiful, and can you add the R Language ?
Comment from author
this add-on uses the python package "pygments" which offers "rconsole" or "rd" for the R language, see https://pygments.org/docs/lexers/?highlight=sass#lexers-for-the-r-s-languages
on 1574336327
Already updated.
It works,bug has disappeared.thx
My work is heavy,I will learn how to discuss on reddit when I am in leisure.
Sorry for disturbing you for long time,it just because I don‘t know how to begin a topic on reddit and how to play with the website reddit,you kown that my English is poor. I have followed you,you are a friend whom is so enthusiasm!
if I insert the word "bold" before the color string #66d9ef",it works.
another bug is after update after 2019.11.19
if I select a block of code,and click the icon,it can highlight code,but a copy of initial code appears under the highlight code.
I am busy these days,sorry for replying you late.
other suggestion
,you are an awesome and productive author
if you know some add-on which can keep full format when copy from word(color and background color )?
or does a idea of combine tomato clock and anki attract you?
here is some references:add-on "Pomodore (Tomato Clock Port)"
I have updated,and find if I toggle disable the add-on "Syntax Highlighting for Code"
then I can use style "solarized",it may be a problem of overload, his package may override yours.
However, key words in others styles are still normal instead of bold.
Does it work on your computer?
you can test with style "monokai"
Initial Q:
thx for update,it may works better.
1 The question is that if I choose style“monokai”,key words is normal instead of bold while style "default" bold key wordsis.I know this add-on is a fork,but original add-on Syntax Highlighting for Code has this problem as well.
2 when I use GUI window to search style "solarized-dark" or "solarized-light",it doesn't appear,do you mean only if use CSS,can I use this style?
Comment from author before post was edited
> if I select a block of code,and click the icon,it can highlight code,but a copy of initial code appears under the highlight code.

I shouldn't have missed that bug. That's fixed. Could you update and try again? Could you try other parts of the code to check if I missed other bugs in the code. You helped to make the add-on much better.

> some add-on which can keep full format when copy from word(color and background color )?

that's a deliberate choice by the anki creator to remove them. When you copy and paste content from MS Word it contains a lot of garbage formatting that usually means the text looks off/slightly broken/change in an html editor like Anki. So a lot of html editors actually process pasted word content a lot and remove parts that can cause problems. Sometimes too much is removed ... You could have a look at my fork of glutanimate's html-cleaner which was for processing word snippets (among other things), https://github.com/ijgnd/html-cleaner. That's hard to setup. Maybe also have a look at my "extended (table) editor", https://ankiweb.net/shared/info/805891399 - when you paste into it the html is not processed by anki if i remember correctly.

> or does a idea of combine tomato clock and anki attract you? here is some references:add-on "Pomodore (Tomato Clock Port)"

What do you mean exactly. The add-on already exists? It's probably easier to discuss this in a different place. I prefer reddit because other people can also contribute their ideas. or maybe the anki forum?


Thanks for your help. Could you update again. Now it should work as expected. Does it?

Actually Monokai is a bad example for getting bold keywords. The goal of this add-on is to insert code into Anki that is generated by the python package "pygments" and pygments doesn't bold keywords when you use the style "monokai", see e.g. https://stylishthemes.github.io/Syntax-Themes/pygments/ . Other software might behave differently.

You could adjust the source code of my add-on. But all changes will be lost when you update so that you have to reapply them.

It seems to be just one change. Try it at your own risk. From the folder of this add-on go to libs/pygments/styles/monokai.py and change line 39 to

Keyword: "bold #66d9ef", # class: 'k'

(Insert the word "bold" before the color string #66d9ef".)


I uploaded another version. Could you test it and report if it works.

"Solarized" works for me even if I don't use the css option.


Initial Reply:

Thanks for the upvote and the feedback.


Compatibility with the add-on AutoMarkdown:

I agree that it would be nice if my add-on worked better with AutoMarkdown.
1. a workaround seems to be to surround the output of my add-on with ``` (three backticks before the code and three backticks after the code). Make sure that my add-on does NOT include line numbers (because these will be added by "Auto markdown".
2. the original syntax highlighting is also incompatible with AutoMarkdown.
3. There's no real solution. AutoMarkdown doesn't work with styling related add-ons and also ignores built-in styling options like different text colors. Adjusting Anki itself and all add-ons to AutoMarkdown can't be the solution. The solution must be in AutoMarkdown. AutoMarkdown is a very nice add-on but it tries something virtually impossible: Even with the add-on installed the anki editor is still a html editor ...
on 1571421754
Nicely done! Really well-thought out UI.