search

gregorias / anki-code-highlighter

Anki plugin for code syntax highlighting.
GNU Affero General Public License v3.0
54 stars 3 forks source link

Adding additional highlighting/styling with highlight.js #62

Closed moltencrux closed 10 months ago

moltencrux commented 11 months ago

I'm using highlight.js for most of the code examples in my cards and have been quite impressed with it. Is it possible to add additional styling to parts of the code beyond what the current highlighting scheme provides? There are some cards where I'd like to underline a function, put something in italics or draw a box around a line of code to emphasize it, but haven't had any luck. I saw this stackoverflow post where they seem to achieve something similar with highlight.js, but when I tried something similar, it seems to be overridden in the final rendering. Below is a card field where I attempted to achieve this effect.

<pre style="display:flex;"><code class="language-python">def <mark>myfunc</mark>(x)
    print('Hello!')

</code></pre>

Is using pygments my only option here? or is there something else I can try?.

gregorias commented 11 months ago

I'm a bit busy in my life right now. I'll take look as soon as I find some time.

moltencrux commented 11 months ago

Understood. Thanks so much!

gregorias commented 10 months ago

How about you try out Pygments highlighter for this purpose? With Pygments, you may attach arbitrary markup to the HTML code of a note.

For example, here I've manually added style="background-color: red" to highlight the hello string.

image image

I'm closing this issue, because I believe it should be enough. Let me know if I missed something.