Markdown support

[BartL]

This is a super simple way to enable Markdown support for Anki. No Add-ons needed and this is guaranteed to work with future versions of Anki.

Click Cards… Set the Basic card to this:

Front

<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>

<zero-md>
  <script type="text/markdown">
{{Front}}
  </script>
</zero-md>

Back:

<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>

<zero-md>
  <script type="text/markdown">
{{Front}}
  </script>
</zero-md>

<hr id=answer>

<zero-md>
  <script type="text/markdown">
{{Back}}
  </script>
</zero-md>

Go to Styling, remove text-align: center (does not work well for code snippets).

Now you are done!!! I recommend setting the default editor as the HTML Editor. You can just write Markdown in the HTML editor. You can find this option when you click Fields…

Here is an example:

[sorata]

Hey, thanks for this. It’s really useful (might be awesome to link from the docs).

I noticed a small mistake though: {{FrontSide}} in the front template should be {{Front}} instead. Otherwise, you’ll get an error. {{FrontSide}} in the back template wasn’t also working so had to change that too.

I made the changes and now it’s working for me! I am trying out the APF templates recently so might try integrating these too.

[krstoevan]

cant it do fancy things like collapsible bulletpoint notes like HTML?
thanks anyway.

Collapsible, foldable outline text. i doubt why no one interested in

i personally use mindmanager, it’s outline format, tree form helps me memorize. i asked and searched, esp in this forum, seems no answer. however AI helped me. it helped me to bring before, but mostly non-editing. now, it’s editable. original text: [image] now in anki: [image] foldable: [image] the most important is, it’s now ediable, so i can modify it. yes it’s hard to modify and need to be careful, because if disrupted the HTML, layman will be hard to edit it back to correct sy…

[BartL]

Thanks, somehow FrontSide is working for me (for the back). But I have updated the thread.

Unfortunately Anki does not seem to support

@media (prefers-color-scheme: dark) {
}

And instead uses the non-standard .night_mode CSS class. There is an issue about this: Selecting Night Mode should trigger `prefers-color-scheme: dark` so relevant CSS rules are applied - #2 by BartL If anyone knows a workaround, please do share.

[sorata]

It seems this doesn’t support markdown lists or headers. It’s unlikely I’d use them much, but if you find anything on this, please let me know.

Actually, now I notice you have used lists, how?

[BartL]

Works fine here. Are you using the HTML editor?

[sorata]

Maybe I’m doing something wrong. I don’t hate my HTML lists so can always work with that though.

Anyways, can you check something else? If you put </script> inside a code block it breaks the whole template for me.

[BartL]

@sorata Yes that is sort of expected. I would create a different field that is not interpreted as Markdown if you want extra script tags.

Found out how to do dark mode. Made a PR.

[sorata]

@BartL

I would create a different field that is not interpreted as Markdown if you want extra script tags.

Now if you don’t know how <script> tag works you can’t make a card for them
(well, that probably won’t be a use case, but I was just wondering what if it is).

@BartL

Found out how to do dark mode. Made a PR.

I saw it

[BartL]

Can you share a screenshot? I am not exactly sure what you are trying to do.

[sorata]

I just took the front template and pasted it in a code block for testing purposes. It’s not an issue for me though as I’m not even learning HTML. I was just testing out the templates.

[BartL]

What do you mean with ‘code block’?

You can paste it in JSFiddle to play around with it Edit fiddle - JSFiddle - Code Playground

If you want to use it in Anki you need to set it as a Card template.

MDN is an excellent resource if you want to learn more about HTML, CSS and JS: Learn web development | MDN

[sorata]

@BartL

What do you mean with ‘code block’?

Ah, that was the source of confusion. I meant this:

```
I just pasted the front template here with three backticks 
on each side and </script> seemed to cause issues (text here wasn't being displayed)
```

Try copy pasting the text above in the template. For me at least it appears blank when I look at the card.

[BartL]

You cannot use Markdown in the template itself.

Well, you could, inside the <script type="text/markdown"></script> tags. But including </script> inside that Markdown will cause a problem. I don’t know why you would want to do that.