Work-in-Progress: general refactor (modular code), modernizing of tooling (bundles), small enhancements to code block display

[goepigen]

hello everyone,

i was using flashcards in logseq for a long while, but decided to migrate back to anki. upon returning i realized there were features i loved in logseq (markdown and latex support, for example) that i wanted to have in anki.

i found this plugin and it was very useful, but it took me a while to figure out how to do simple things such as adding a new field (to the note types provided by the plugin) and making it appear on a card.

in hindsight, it isn't that complicated, but hindsight is 20/20.

i decided to dig into the code and understand how it works as a way to learn more about anki itself.

i ended up refactoring a lot of the code — not the logic, but the organization.

Here is my fork.

i am taking this MIT course online and would like to use this repo as a way to implement all the good practices i have been learning about.

i've never really contributed to open source but have always wanted to and this seems like a great opportunity.

any feedback would be welcome, or requests for features that would be useful to you.

i would be interested in being of help, as it would help me learn about anki as well.

would be glad to make this into a PR. the previous code was working, but i think the structure of the codebase has been improved, and i will soon add tests and other tooling such as static type checking for both javascript and python.

here are a few of the things i remember that i did

• javascript to be injected into anki card or editor views was contained in long strings
  • i split this code into individual modules
  • and then created two bundles, editor.bundle.js and card.bundle.js.
  • in the case of the card view, instead of seeing a bunch of javascript, there is now just

<div id='mdkatex-front'><pre>{{Front}}</pre></div>
<script src="card.bundle.js"></script>

• for the record, if someone wants to rename the "Front" and "Back" fields, everything works fine (because Anki handles updating the templates for notes that are already created).
  • if, however, you want to create a new field, you must do something like the following (a real-world example of my main type of card, which i call "KM-concept"

front of card

<div id='mdkatex-front'><pre>{{prompt}}</pre></div>
<script src="card.bundle.js"></script>

back of card

<div id='mdkatex-front'><pre>{{prompt}}</pre></div>
<hr id="answer" />
<div id='mdkatex-back'><pre>{{explanation}}</pre></div>

<hr id="mdkatex-example-hr" />

<div id='mdkatex-example'><pre>{{example}}</pre></div>
<script src="card.bundle.js"></script>

• in this example, i changed "Front" to "prompt" and "Back" to "explanation".
• then i added a field "example"
• as of now, the only thing i had to add (manually) to get the example field on the back of the card was <div id='mdkatex-example'><pre>{{example}}</pre></div>
• i added <hr id="mdkatex-example-hr" /> just for aesthetic reasons.
• the prefix mdkatex- is being assumed in the code.

other changes

• i use a lot of code snippets in my flashcards, so i needed that to work.
• my computer uses a dark theme and i noticed that the code blocks were being rendered with a light background and also the colors were off.
• i updated one of the CSS files being used (_highlight.css), and the colors were as desired
• i also added the following

  document.querySelectorAll(`#${ID} pre code`).forEach((block) => {
    window.hljs.highlightElement(block);
  });

• to actually apply highlighting that wasn't being applied before.
• following is a screenshot from a piece of a long flashcard i was using to test.

I also added some tooling such as

• esbuild
• python static type checker, pyright

i am using this fork via symlink as i continue to make changes.

• as part of the next steps, i want to
  • create an abstraction for a note, and create more basic types of notes, including
    • reversed
    • optionally reversed
  • add typescript
  • add tests
  • add specs

[goepigen]

I've addressed issue #52 in one of the commits.

i now know how to implement this fix in the main branch, but I am not currently willing to do that work because my fork was intended precisely to make such fixes easier.

in my fork, this fix was a relatively easy and minimal fix.

in the main branch of this repo, it involves changing javascript contained in strings, which is error-prone.