glutanimate / syntax-highlighting

A fork of Tiago Barroso's Syntax Highlighting add-on with support for Anki 2.1
https://ankiweb.net/shared/info/1463041493
Other
108 stars 27 forks source link

Not compatible with Night Mode #8

Closed Math3mat1x closed 5 years ago

Math3mat1x commented 5 years ago

Hello, I'm a complete beginner in code and I'm going to learn it using Anki. I like dark themes. So, I installed the addon Night Mode and I chose the monokai theme in Syntax Highlighting for Code. One point that is very cool is that the color of the code remains the same on the web app.. The point is that the numeration is in white, and it doesn't look great on my screen, here's a screenshot (the code is not mine ^^): Capture du 2019-06-08 17-47-26 ... but I still want the numbering. Is it possible to disable the background color of the numbering lines?

Thanks in advance.

NB: I'm French so it's possible that they may be spelling mistakes or non-sense in my text.

glutanimate commented 5 years ago

Hi PopCorne. Your English is fine, so no worries!

By default, Syntax Highlighting will use inline HTML style elements to apply its coloring. These do not support different styling depending on other factors such as whether Night Mode is active or not. And since users usually switch between NM on and off, I can't implement a switch that would simply hard-code the line color depending on which was active at code generation time.

However, you might have some success with using the CSS mode of the add-on instead and adding some custom classes that apply only when Night Mode is active. Please see Night Mode's README on how to do that: https://github.com/krassowski/Anki-Night-Mode#custom-css-in-night-mode

Hope that helps!

Math3mat1x commented 5 years ago

Thank you for your answer!

I'm not sure I understood...

you might have some success with using the CSS mode of the add-on

So I did that in your add-on (or maybe should I had do this on the Night Light add-on?): Capture du 2019-06-08 20-43-34

Custom CSS in night mode

You may use night_mode class, to overwrite some of the CSS rules; sometimes usage of important! directive or catch-all selector (*) will be needed to enforce you own styling. Example:

.night_mode *{ color: red; }

So if I understand, I may apply this CSS in the NL add-on and put the monokai theme on it... but your theme is written in Python, so I can't import it... I don't understand what I'm saying :)

Help !!! ;-)

glutanimate commented 5 years ago

With the "Use CSS classes" option active, styling is governed by your card templates. So you will have to copy and paste the pertinent CSS snippets into the styling section of your Anki card templates: https://www.youtube.com/watch?v=F1j1Zx0mXME

So to apply the default css linked before, for instance, you would copy the entire code block and paste it into the Styling section. If you look towards the top, the default css already comes with a night mode rule. I'm not sure how well it works, however, as I don't use Night Mode myself.

Math3mat1x commented 5 years ago

I definitely don't understand all of this... We use CSS because of the "rigidity" of the add-on... When I first used your add-on, I didn't had to go to all of that... I just clicked the thunderbolt and tadam, I had a code that were compatible with the web version because it's HTML. I've seen that the basic function (the thunderbolt one) uses HTML instead of CSS to be configuration-less.

So is it possible, in the Python code of the add-on at ~/.local/share/Anki2/addons21/1612375712, to modify the code so that it doesn't make anymore highlighting on the numbering? Indeed, I've seen that their is lot of documentation on your code so that we can customize the add-on. Python is very cool because of that... Another good point of that is that I could, with that method, still use the monokai theme!

Can you help me do that?