Update documentation to include advice for adding syntax highlighting to flashcards with code blocks

[djs-CS]

Currently, the Obsidian to Anki plugin does not provide syntax highlighting in Anki for code blocks copied from Obsidian. I propose updating the documentation to include instructions for new users on how to achieve this.

Obsidian uses highlight.js for syntax highlighting in code blocks in the live-preview editor, and PrismJS for syntax highlighting in the reader view. By default, Obsidian_to_Anki copies the HTML from the code blocks of the live-preview editor. Example:

<pre><code class="hljs python language-python">hello = <span class="hljs-string">"world"</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">sayHello</span><span class="hljs-params">()</span>:</span>
    print(hello)
sayHello()
</code></pre>

To get the same syntax highlighting in Anki as in Obsidian's live-preview editor, one only needs to download and link to a highlight.js css file. Example:

<link rel="stylesheet" href="dark.css">
{{Front}}

This plug-in has been a game changer for me in learning software development. I would love to work on and submit a PR to update the documentation with tips and instructions for new users to learn about and set up this feature for themselves.

[bwinner1]

Hey, that's great news. Can you maybe include the individual steps, on how to do that? I'm kind of new into software development.

Maybe you could answer a few questions for people like me:

• Do I need to download the full library or only an individual .js file?
• Where can I actually link it? You probably mean in Anki. There we should go to Tools -> Manage Note Types -> {Select your note type} -> Cards.
• Shouldn't you also somehow link the script?
• Using npm to install highlight.js, your example didn't work for me. Do you have an idea, what I could do to change that?

[ShootingKing-AM]

You can elaborate the steps here and a send a PR for updating Readme.MD linking to this issue. I will merge the PR, seems very useful documentation.

[mbvs]

OP doesn't seem to respond, so forgive me for tuning in

1. go to https://highlightjs.org/demo and choose a theme you like (remember the name)
2. go to the highlight.js source code at https://github.com/highlightjs/highlight.js/tree/main/src/styles and grab the corresponding css file from step 1
3. add an underline at the start of the name of the css file (Anki wants this)
4. save the renamed css file in your collection.media folder, refer to Anki Documentation where to find it depending on platform: https://docs.ankiweb.net/files.html#file-locations
5. in Anki switch to the Browser and choose the Note Type you want syntax highlighting for and then Cards... (or go to Tools/Manage Note Types/[your note type]/Cards)
6. switch to the Styling tab and insert as a first line a css import rule, see below
7. while you're at it change some default styles like font etc. to your liking:

   
   @import url("_ocean.css");

pre code { width: 800px; margin: auto; font-family: "Fira Code"; font-size: 14px; line-height: 150%; }

.card ...

[mbvs]

btw. instead of adding this to the readme.md I think it should go to the wiki (perhaps with some hints for Anki-Plugins useful for learning to code) but afaik there are no PRs for wiki pages in github.