Syntax Highlighting (Enhanced FORK) [Official thread]

thanks for posting this. this looks really nice.

there’s a small problem though - I just saw that I had a post in this forum, assumed that it was a bug and since I don’t use this add-on at the moment (because I don’t have time to learn new coding skills or fix the add-on) I just unpublished it from ankiweb.

I’ll see how to re-upload a new version with your code once I have more time.

That’s unfortunate :') It’s ok tho!
I noticed it was a bit high in the addon’s list, so I hope the people that needed it managed to grab it :disappointed_relieved:
Would you be ok with me sharing my version on a github repo until you can upload it, since I’m building coding cards to share with others? So you can take your time :relaxed:
Wish you the best! Thank you for replying and accepting my request! :two_hearts:

In the end I opted to make the cards like this :slight_smile: It’s really awesome what your add-on makes possible, thank you for making it!
Screencast from 10-09-2022 23 54 19

your screenshot looks great. could you share this note type with me - this would also allow me to copy the css to get the language label from your screenshots. at the moment having just a span with the language name above it looks pretty ugly. Is your code AGPLv3 or under a similar foss license so that i can reuse it?

also my add-on will break again in 2.1.55 because of more changes to the editor (that fix another add-on I originally made …).

Once I have your code and 2.1.55 is released I can look into uploading it again

Though now there’s Highlight Code - AnkiWeb which is made by what appears to be a professional.

Such great news, thank you :smile:
I am a small bit busy those days due to having to make a couple of websites, but I think I’ll be able to upload everything (after cleaning up a small bit the code) in the next days!
Of course the code is open source, it’s actually my first “contribution” to another project so it feels pretty awesome :smile:

Is there any preference about the css? I will add --vars on values that can be changed (console-width, cloze’s colours and the like). As of now, I used flexbox’s ordering to push the languages together at the top of the code, but they could also be seen as in the first screenshot, although I think it makes for harder design when it comes to prompts and explanations on longer codes…
Let me know what can help you the most :slight_smile:
I’ve also used BEM nomenclature for the code-card component to make the CSS easier to understand and followed a SMACSS methodology, so it should be rather easy to read.

Have a nice day!

When I reinstalled my system I was a bit surprised that your addon changed from its previous id 1972239816 to 1100811177. Now I understand. So this is the new link: syntax highlighting FORK (css only, night-mode) - AnkiWeb.

By the way. I don’t think your addon is any less professional than Highlight Code - AnkiWeb you mentioned (I actually just tried it with mixed results). I’d recommend setting your github repo to public.

1 Like

The default color scheme seems to be hard to read for Strings (<span class="s">):


When choosing the editor css file (see the @import statement) it looks much better:

Color schemes listed in the config are “colorful” and “dracula” (the default ones).

this shouldn’t happen.

  1. I assume this is not limited to the preview window (which I don’t care about) but also in the reviewer.
  2. Which Anki version do you use?
  3. if you change the styles used for both day and night mode in the add-on settings and restart anki. Does the problem persist?
1 Like

I do agree :slight_smile:

  1. Unfortunately it is
  2. Version ⁨2.1.54 (b6a7760c)⁩ installed using winget (new install without my collection interfering)
  3. Interchanging the themes and restarting didn’t really improve the situation
    image
    EDIT: Setting both to monokai though does look pretty
    image
    Only on Ankidroid it stays… isn’t the imported CSS file changed whenever the theme is changed?

the problem is the combination of the styling for dark and bright. the dark theme doesn’t set the background color for the s1 class which seems to be loaded from the bright theme because in this theme the background color is set.

Putting just one theme into the css file for the reviewer solves this problem (the editor file holds just one theme).

But then on mobile where you don’t have add-ons switching between dark and day mode doesn’t load the matching theme.

I could adjust the themes so that for each theme the color and background color is set. That’s manual work. I could use js to load different files depending on in nightMode is on but javascript might be slightly different on desktop - ankimobile - ankidroid. That’s also not ideal.

Maybe I should just find themes that work together and add a warning somewhere …

1 Like

Switching the defaults to a theme, that works well, would be sufficient for me already (e.g. monokai). A warning in the config then would be stellar :+1: .

Now I only have to figure out, how to update the two files _styles_for_syntax_highlighting(_editor).css on Ankidroid. Unfortunately they are not updated to the new theme as expected… even after forcing a full sync and adding other media :sob: .

EDIT: I just replaced them manually using a plain old USB cable :laughing: To prevent this for new users it would be appreciated if the defaults were changed I suppose. Great find by the way with the background and all :heart:

PS You really should consider setting up Github again.

i just uploaded a new version to ankiweb.

I have different default themes. In the config dialog I added some info text. And I added a workaround that makes Anki sync file changes in the media folder that I forgot to include before.

let me know if this solves your problems.

1 Like

Hey, that solves all of the problems I had initially :white_check_mark: ! Thanks a ton, that was blazingly fast!

PS I’m still curious what you changed. Github :octopus: . Nudge, nudge. Okay… I try not to mention that again, I’ve got the feeling you don’t want to discuss it anymore (or at least not here) :slight_smile: .

I thought I’d do something like this a long time ago, but I couldn’t. Would you please share the decks?

I second that. To notify and encourage you, @ijgnd, here’s the review I posted on the addon page:

This includes high-utility improvements over the add-on from which this was forked–dear author, you are selling yourself short here! I prefer this one over the more “popular” Highlight Code add-on because it includes advanced customizability (deck-specific default language, favorite languages for quick selection, and more), full support for Pygments (necessary for cloze deletion support), and a simpler highlighting UI.

Thank you :pray: