0
Syntax Highlighting FORK (night mode fix, gui config, etc.)
1.01MB. Updated 2021-03-16. Only supports Anki 2.1.x.
The author has shared 70 other
item(s).
Description
Recently some people reported having problems with the default theme. try another one if it doesn't work for you. In the coming weeks I probably don't have time to look into this.
This description only refers to the add-on version for Anki 2.1.41+
This add-on is a fork (modified version). For the original add-on Syntax Highlighting for Code (maintained/extened by glutanimate) click here.
Instead of a syntax highlighting add-on also check out these pre-made notetypes by Arthur Milchior which should make it easier to later change the code.
Use my version at your own risk!
# SETUP NEEDED
The styling section of the card template (for each note type) must start with the line
Use my version at your own risk!
# SETUP NEEDED
The styling section of the card template (for each note type) must start with the line @import url("_styles_for_syntax_highlighting.css");. In my add-on config you can batch update all your note types with a few clicks.
# changes
The differences to the original add-on are:
- There is a different user interface that allows to quickly filter all available styles.
- This add-on uses classes to apply the styling whereas the original syntax highlighting add-on uses inline styling by default. Using classes allows you to quickly adjust the styling of all code snippets. My fork also supported inline styling before 2021-03 but I removed this option because I don't use it and can't check if it works.
- You can easily configure a custom font for the snippets.
- You can 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.
- I bundle a more recent pygments version with more lexers and styles.
- For centering I no longer use the deprecatedcenter tag. Instead I use margin: 0 auto;. I also add text-align: left; so that I can override the setting text-align: center from the .card class. This wasn't necessary when you use center.
# 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 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.
the style named "default" in 2.1.41+ no longer has a dark background/theme in the editor.
# Versions
- 2021-03-15 fix for 2.1.41+, bundle pygments 2.8.1, removed all code related to inline styling and separate classes for each theme.
- 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 because my code doesn't adhere to the guidelines for contributions the current maintainer glutanimate has published (in 2021-03-14).Download
As add-ons are programs downloaded from the internet, they are potentially malicious. You should only download add-ons you trust.
Supported Anki versions:
- 2.1.20-2.1.31 (updated 2020-09-13)
- 2.1.32-2.1.40 (updated 2020-11-14)
- 2.1.41-2.1.42+ (updated 2021-03-16)
To download this add-on, please copy and paste the following code into Anki 2.1:
1972239816
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
Reviews
on
The add-on is great but can you provide some instruction for batch editing mentioned in the #SETUP NEEDED part.
# SETUP NEEDED
The styling section of the card template (for each note type) must start with the line @import url("_styles_for_syntax_highlighting.css");. In my add-on config you can batch update all your note types with a few clicks.
I downloaded an online deck and need to batch edit it. I tried to look for solution in the config section of the add-on but still not quite sure how it could be done
# SETUP NEEDED
The styling section of the card template (for each note type) must start with the line @import url("_styles_for_syntax_highlighting.css");. In my add-on config you can batch update all your note types with a few clicks.
I downloaded an online deck and need to batch edit it. I tried to look for solution in the config section of the add-on but still not quite sure how it could be done
on
I like it. There I can see all languages and pick from them.
on
Great except problem since today: could you help me out please? I get this error message when trying to format code. Worked fine for months until yesterday. Problem persists if I use R or Python format. (haven't tried others)
Error: Selected style not found.
A common source of errors: When you update the add-on Anki keeps your user settings but an update of the add-on might include a new version of the Pygments library which sometimes renames languages. This means a setting that used to work no longer works with newer versions of this add-on.
Update thanks author for your rapid reply. Problem didn't solve after reinstallation, downgrading or whatsoever. Indeed the problem disappeared after changing to vim instead of solarised dark. Thank you very much for your rapid response! I really appreciate it.
Error: Selected style not found.
A common source of errors: When you update the add-on Anki keeps your user settings but an update of the add-on might include a new version of the Pygments library which sometimes renames languages. This means a setting that used to work no longer works with newer versions of this add-on.
Update thanks author for your rapid reply. Problem didn't solve after reinstallation, downgrading or whatsoever. Indeed the problem disappeared after changing to vim instead of solarised dark. Thank you very much for your rapid response! I really appreciate it.
Comment from author before post was edited
this shouldn't happen.
I suggest we continue at https://forums.ankiweb.net/t/syntax-highlighting-enhanced-fork-official-thread/658 where we can answer multiple times and where we get notifications about posts from the other person.
If you delete my add-on, then reinstall my add-on without changing anything about its config, disable all other add-ons and then restart anki: Do you still get the problem? which anki version do you use. Does it change anything to change the style in the config of my add-on to e.g. "vim" or "solarized" and then restarting anki?
I suggest we continue at https://forums.ankiweb.net/t/syntax-highlighting-enhanced-fork-official-thread/658 where we can answer multiple times and where we get notifications about posts from the other person.
If you delete my add-on, then reinstall my add-on without changing anything about its config, disable all other add-ons and then restart anki: Do you still get the problem? which anki version do you use. Does it change anything to change the style in the config of my add-on to e.g. "vim" or "solarized" and then restarting anki?
on
Perfect
on
Thank you so much! I faced small formatting errors but changing the "style" to monokai in the add-on config fixed it.
Also, here's a gif by the author on how to use it:
https://github.com/ijgnd/anki__syntax-highlighting/blob/master/screenshots/demo_config.gif
Also, here's a gif by the author on how to use it:
https://github.com/ijgnd/anki__syntax-highlighting/blob/master/screenshots/demo_config.gif
on
change "style" from "defalt" to "monokai" in the file config.json, then it works well with dark mode ; )
on
must have for cards with code
on
rocks!!!
on
Easily fixes night mode as promised
on
This fork fixes issues I had with the original in windows 7
on
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%;
text-align:left;
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 ...
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%;
text-align:left;
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
Excellent work. I was just about to look into how I could edit it for Dark Mode. Thanks!
on
Great update!
on
Nice work!
on
thanks
on
Thank you so much. The original add-on was simply crap, especially when using it with dark mode / cards with dark background.
on
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
Thanks.
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?
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
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
Very easy to setup and use.
on
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！
----
Again
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？
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！
----
Again
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 ...
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
Nicely done! Really well-thought out UI.