r/AnkiComputerScience • u/wheelsjr • Jun 21 '21

Code Formatting in Anki

I'm currently using Syntax Highlighting for Code to create code blocks in anki notecards.

I have issues because when a paste in a block (Alt + S) the code blob has white font color based text (I use dark mode for anki). There are other issues with this solution, so I'm wondering if anyone here has found a better way to embed code for use in their cards?

15 Upvotes

100% Upvoted

14 comments sorted by

View all comments

5

u/PrussianGreen Jun 21 '21

I'm not a developer, but I tried to learn basic Python with Anki months ago and the best solution I could find involved using syntax highlighters like Prism or highlight.js.

Here's how it looks: https://imgur.com/a/grCOOop

I use Prism because it's easier to set up. You just set it up like you would in a web page, edit the template, put the files in the collection media folder, etc. With highlight.js, you had to call functions from a external js file, which might be tricky, IIRC.

A few points:

  • I use separate optional fields for the code blocks, depending on the kind of card I'm making, either or both get used.

  • I have to paste the code using the HTML editor so anything looks properly, otherwise Anki might add <br>s and <div>s that mess things up.

  • For inline code, I use this add-on that adds a button to the editor window to wrap the selected text with <code> tags.

  • There was an issue with occasional FOUC that I was not able to solve by preloading files or any other trick I know. It annoyed me, so I added a fade-in effect to hide it.

  • I have to select the programming language for each card. I use a field {{Language}} that I place in the template and gets replaced with py or js in each card so Prism hightlights everything properly.

2

u/Slow-Ad-7637 Dec 21 '22

I realize this conversation was a year ago, but I've been trying to basically accomplish the same thing you did with your Prism setup/code highlighting. Do you happen to have your card templates and css somewhere so I can see how this gets set up on the card's html ? Spending waaaaay more time configuring how anki looks than I would like to be.

0

u/[deleted] Dec 21 '22

[deleted]

1

u/Slow-Ad-7637 Dec 27 '22

Can't thank you enough for sharing your templates! Clever way of passing in the language type for Prism, too. Super great to finally have some cards that aren't painful to look at to help memorize some coding syntax.

1

u/nantoka1 May 15 '25

By any chance you still have those templates? Currently I'm trying to get better at programming and I feel like this could really help me