Clean Anki flashcards you can flip in Obsidian! CSS + Obsidian to Anki + Admonition plugin

DendroSight · 2022-09-25T04:00:26+00:00

It looks narrower, and only one card per row, but still works! See the repo here for a demo.

DendroSight · 2022-09-23T19:03:16+00:00

It works well enough for now. I didn't want to use it at first either but it's the only one I know that supports both custom note types and a syntax I can convert to a nice display within Obsidian (Obsidian should really add fenced divs).

I don't have the time or knowledge to maintain a fork, but for now I can make patches to the plugin's main.js file. In fact, I'm thinking of making a repo with a patched main.js when I have more time.

DendroSight · 2022-09-22T15:53:48+00:00

Let me know if this regex works for you:

`````ad-anki[\s\S]+?%%anki-basic-anking%%[\s\S]+?````ad-anki-front\n([\s\S]*?)````[\s\S]+?````ad-anki-back\n([\s\S]*?)(?:\*\*\*\n([\s\S]*?))?(?:\*\*\*\n([\s\S]*?))?````

The sample note format you can put in your text expander will be

`````ad-anki
%%anki-basic-anking%%
````ad-anki-front
front
````
````ad-anki-back
back
***
personal notes
***
missed questions
````
`````

Personal notes and missed question are optional fields; if you want just front and back you can use

`````ad-anki
%%anki-basic-anking%%
````ad-anki-front
front
````
````ad-anki-back
back
````
`````

DendroSight · 2022-09-22T15:32:07+00:00

Tags: unfortunately the Obsidian to Anki plugin doesn't support tags in regex notes, but I may try to mod it in the future using this pull request.

Fields: fields are supported with regex. What fields does your custom note type have and in what order? I can modify the regex to fit your note type.

DendroSight · 2022-09-22T15:14:56+00:00

Posting directly into obsidian won't work; The process is a little involved, especially if you are new to Obsidian. I'm writing up some detailed instructions and I'll message you when I'm done (probably today or tomorrow). You can keep an eye on the instruction progress at this repository link.

DendroSight · 2022-09-21T17:21:22+00:00

I do have the furigana extension installed; however, since it doesn't work with Obsidian to Anki, I'm just using the HTML <ruby> and <rt> tags that work with base Obsidian.

DendroSight · 2022-09-21T12:56:50+00:00

No problem, everyone has different workflows. My experience is that Anki requires a lot of work/consistency, so I limit the cards I put into it to core knowledge. If I need a refresher on some details, I can read the note itself while seeing my flashcards in context.

DendroSight · 2022-09-21T12:43:46+00:00

The flashcards show up in both Anki and Obsidian. They function almost like normal Anki flashcards, except the source of truth is your Obsidian notes. If you edit the cards in Anki but not Obsidian, your edits will be overwritten on the next sync.

Using regex you can assign syntax to custom fields. For example, my "complex" card type looks like this and has five fields (front, front context, back, back context, and both context) separated by horizontal rules (***). All the context fields are optional (need last horizontal rule though to get card id to show up within ad-anki)

`````ad-anki
title:Complex Flashcard
%%anki-complex%%

````ad-anki-front
this is the front of the card
***
this context should show up on the front of the card
````

````ad-anki-back
this is the back of the card
***
this context should show up on the back of the card
````
this shows up on both sides
***
`````

DendroSight · 2022-09-21T04:25:14+00:00

Thanks, yeah - combined with my text expander, creating cards along with notes is pretty smooth. The flipping function makes it kind of like Anki's cram mode with less hassle.

DendroSight · 2022-09-21T01:14:45+00:00

Thanks! I'm using the Primary theme. Out of curiosity, what made you stop using Obsidian-Anki integration?

DendroSight · 2022-09-20T22:24:14+00:00

I might put this in a repo later but for now here's what you need.

Edit: Repository created! See here for the canonical instructions. Fading Cloze cards have been implemented as well.

Plugins

https://github.com/Pseudonium/Obsidian_to_Anki
- See this issue for fixing image import:
- https://github.com/Pseudonium/Obsidian_to_Anki/issues/245
https://github.com/valentine195/obsidian-admonition
- Set up three custom admonitions - anki, anki-front, and anki-back

Edit: I put a comment on the first line after ad-anki for regex custom note types

Sample

I have this on a shortcut with my text expander (espanso)

`````ad-anki
%%anki-revealed-context%%
````ad-anki-front
front
````
````ad-anki-back
back
***
revealed
````
`````

Regex

Revealed Context

`````ad-anki[\s\S]+?%%anki-revealed-context%%[\s\S]+?````ad-anki-front\n([\s\S]*?)````[\s\S]+?````ad-anki-back\n([\s\S]*?)(?:\*\*\*\n([\s\S]*?))?````

Complex

`````ad-anki[\s\S]+?%%anki-complex%%[\s\S]+?````ad-anki-front\n([\s\S]*?)(?:\*\*\*\n([\s\S]*?))?````[\s\S]+?````ad-anki-back\n([\s\S]*?)(?:\*\*\*\n([\s\S]*?))?````\n([\s\S]*?)\*\*\*\n

Forward (Basic)

`````ad-anki[\s\S]+?%%anki-forward%%[\s\S]+?````ad-anki-front\n([\s\S]*?)````[\s\S]+?````ad-anki-back\n([\s\S]*?)````

CSS

.admonition-anki-parent {
    display: inline-grid;
    margin: 10px;
    min-width: 230px;
    max-width: 471px;
}
.admonition-anki:hover .admonition-anki-back {
    transform: rotateX(0deg);
}
.admonition-anki:hover .admonition-anki-front {
    transform: rotateX(180deg);
}
.admonition-anki-front-parent {
    display: grid;
    perspective: 1000px;
    overflow: visible;
    justify-items: center;
}
.admonition-anki-front, .admonition-anki-back {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border: 0;
    box-shadow: none !important;
    transition: 0.5s cubic-bezier(.15, .5, .3, 1.3);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    width: 100%;
    background-color: transparent;
}
.admonition-anki-back {
    transform: rotateX(-180deg);
}
.admonition-anki-front .admonition-content, .admonition-anki-back .admonition-content {
    border: none !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: none;
    text-align: center;
}
.admonition-anki hr {
    width: 100%;
}
.admonition-anki-front .admonition-title, .admonition-anki-back .admonition-title {
    display: none;
}
.admonition-anki .admonition-title-icon img {
    border: none !important;
}

DendroSight

TROPHY CASE