Mostly automatic build into Anki with preprocessor from IDE and testing in browser

Greetings!

I recently stumbled upon the utility of using h ttps://www.npmjs.com/package/preprocessor to transfer my cards from my IDE into Anki.

As an enthusiast of rapid prototyping and of my IDE (WebStorm), I employ preprocessor to convert my sources into a suitable format for the Anki Addon [Templates Import / Export](htt ps://ankiweb.net/shared/info/712027367) to import them into Anki. This method proves particularly beneficial as I share code between templates and the front and back of a card. Until now, I haven’t found a more efficient solution than duplicating the code, which I now automate using preprocessor.

Here’s my file “ToAnki.html”:

// #include “front.html”
< !-- back – >
// #include “back.html”

At the top of my source files, you’ll find this:

// #if false
< script src=“sharedCode.js”>
// #endif

This implies that while testing in my browser, this script is included, but this line is automatically excluded when I build for Anki.

Since I utilize the same code for my Cloze and Non-Cloze template, I also have this in my code:

const frontFieldFromDb = “”
// #ifdef Cloze
+{{cloze:Front}}
// #else
+{{Front}}
// #endif
;

Here’s my make.cmd:

call preprocess toAnki.html -Cloze=true > “L:\Dropbox\Anki\CardTemplatesExport\HelgeCloze\Cloze.html”
copy style.css L:\Dropbox\Anki\CardTemplatesExport\HelgeCloze\style.css
call preprocess toAnki.html > “L:\Dropbox\Anki\CardTemplatesExport\iHelge1\Karte 1.html”
copy style.css L:\Dropbox\Anki\CardTemplatesExport\iHelge1\style.css

After executing that, I import these two templates and their six files in one step using the aforementioned addon. If you want to use my format from above you have to configure the addon to use the divider “< !-- back – >” between front and back of card.

I hope this information proves useful to someone.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.