Support HTML for Writing Flashcards

[lingocoder]

Expected Behavior

The Anki VSCode extension should support the native markup language of Anki itself for writing questions and answer flashcards.

Current Behavior

The Anki VSCode extension currently supports only Markdown for writing questions and answer flashcards. Presumably — at some point before sending flashcard content to Anki —the extension implements a Markdown-to-HTML transformation step to transform users' Markdown into the native markup language that Anki requires.

Context

TL;DR

As a software developer I have experience writing HTML. I also have experience using vscode. So, knowing that the native markup language of Anki is HTML, I would like to be able to write HTML in vscode and have the Anki VSCode extension create Anki flashcards using that vscode-authored HTML.

Rationale

It is reasonable to presume that vscode is used by software developers. It is reasonable to presume the majority of software developers are very likely to have at least some development experience writing basic HTML.

The vscode IDE supports the creation and editing of HTML out of the box…

...There is syntax highlighting, smart completions with IntelliSense, and customizable formatting...

The native markup language in Anki itself, is HTML…

[jasonwilliams]

Could you show me a workflow and provide an example?

This is so i can understand exactly how you expect this to work. Cards usually have a Front and a Back, so how does the extension know which bit of html to send to the front and which bit to send to the back? Is this 2 files? a <hr />?

[lingocoder]

Could you show me a workflow…

By workflow, I'm assuming you mean the steps a user would execute to create a flashcard? If so, the workflow for using HTML to create flashcards need not be significantly different from the existing workflow…

Send to deck

If you're writing up Markdown HTML files and want to send some Q & As to a deck you can do that quite easily with the Anki: Send To Deck command. It will send to this extension's default deck named "notes" but you can change this in the settings… …

Send to own deck

Very similar to the above but will send to a new deck that will have the same name that you marked with {{implementation detail}} as the title of the current document…

…how does the extension know which bit of html to send to the front and which bit to send to the back?…

As an Anki end user who knows nothing about The API, I sorta don't care about „the how“. I see „the how“ as an implementation detail.

In addition to having faith in your open-mindedness and tenacity, I would also defer to your expertise — as the vscode extension developer — to decide how best to implement the requested enhancement.

[jasonwilliams]

As an Anki end user who knows nothing about The API, I sorta don't care about „the how“. I see „the how“ as an implementation detail.

Sure, but you raised issue, so you must care enough to want this as a thing, and if that’s the case you must have some idea of how it would work? Even if it’s just from a UX point of view.

Maybe you could start by explaining how you make your HTML Anki cards currently and the manual process you have to go through?

[lingocoder]

you raised issue, so you must care enough to want this as a thing

„I sorta don't care about ‚the how‘...“, doesn't mean I literally DGAF about wanting it to be a thing. I meant I don't have a strong preference or opinion for how the feature should be implemented at the programming language level.

you must have some idea of how it would work?

In all honesty and humility: I don't.

I don't know The API. I've never built nor maintained a vscode extension. So I sorta would rather stay in my lane as an Anki user and defer the programming language level decisions to you.

how you make your HTML Anki cards currently and the manual process you have to go through?

This recording shows my current manual process…

In an HTML editor, I manually draft the markup and content of my cards. In the recording, you should see three blocks (for lack of a better word) of HTML. The first block directly underneath the green <!-- Card --> comment is the front of the card. Lines 4, 5 and 6 in the recording.

Following that, the block that starts with the first <hr /> tag is the top half of the back of the card (lines 8-14) . That part of the back will contain a few Extra lines of info that clarify the concept on the front side. The third and final block starts with the second <hr /> tag at the bottom (lines 16-17). That block typically contains a URL to the source location of wherever I found the clarifying Extra info above it.

Then I just copy and paste all three blocks into an Anki cloze note. First the front, then the back.

[jasonwilliams]

@lingocoder thanks, i think we can do something similar with the comment as a delimiter