CSS for Obsidian to Anki

I always found the integration of anki cards extremely messy. So I copied a bit of css together and this is what came out.

When hovering the whole block is displayed.
To insert the code block I use templates and hotkeys.
I started with this:

and made some additions.
I am happy if someone adds to the solution or develops it further.

.app-container pre[class*="language-note-"] {
  border: 0px solid;
}

/* Make the first line of note bold */
*[class*="language-note"]::first-line {
  font-weight: bold;
}
.app-container pre[class*="language-note-"] code[class*="language-note-"] {
  color: rgba(0, 0, 0, 0.781);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0);
  background-color: transparent;
  white-space: pre-wrap;
  /* css-3 */
  font-family: var(--default-font);
  font-size: smaller;
}

/** ANKI label 
----------------------------------------*/

.app-container pre.language-note-anki {
  /* border-color: #016ea6;
  background-color: #2b313a; */

  padding-top: 0.2em;
  width: 55px;
  height: 28px;

  /* position: relative;
  margin-top: -40px;
  right: 90px; */
  z-index: 2;
  position: absolute;
  margin-left: -6em;
  margin-top: -3em;
}

.app-container pre.language-note-anki:hover {
  height: auto;
  width: auto;
  z-index: 3;
}

/** ANKI Inline  
----------------------------------------*/

.app-container pre.language-note-anki-in {
  border-color: #016ea6;
  background-color: #2b313a;
  padding-top: 0.2em;
  height: 5em;
  padding-top: 0.2em;
}

.app-container pre.language-note-anki-in:hover {
  height: auto;
  width: auto;
}

Very nice ! I’ll try.

Option b is the same code as option a ?

Option a creates a label on the left side.
Option b leaves the code block in its position, but hides the last lines.

Both blocks unfold by hovering

Do you have a specifique options for anki plugin ?

I’m not sure what you mean. Both blocks are compatible with the Obsidian to anki plugin.

Your code block only needs to be structured as follows:

```note-anki
START
field 1
field 2
...
END

yes I play a little and here what’s look like my code :

```note-anki-in : deck_name
Anki
Main
here is the question
Back: and here the answer
````

I wish to not display note type and card id but I don’t find a way.

My last setup :

<p style="display:none">ANKI DECK: test
</p>

```note-anki-in
Anki question
Front: How do you use this style?
Back: Just like this.
<!--ID: 1613542677812-->
```

And what is it look like :

image

I use now metadata to store anki deck and anki tags :

can you explain this a little more?
Also I have updated the script

.app-container pre[class*="language-note-"] {
  border: 0px solid;
}

/* Make the first line of note bold */
*[class*="language-note"]::first-line {
  font-weight: bold;
}
.app-container pre[class*="language-note-"] code[class*="language-note-"] {
  color: rgba(0, 0, 0, 0.781);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0);
  background-color: transparent;
  white-space: pre-wrap;
  /* css-3 */
  font-family: var(--default-font);
  font-size: smaller;
}

/** ANKI Lable  
----------------------------------------*/

.app-container pre.language-note-anki {
  /* border-color: #016ea6;
  background-color: #2b313a; */

  padding-top: 0.2em;
  width: 55px;
  height: 28px;

  /* position: relative;
  margin-top: -40px;
  right: 90px; */
  z-index: 2;
  position: absolute;
  margin-left: -6em;
  margin-top: -3em;
}

.app-container pre.language-note-anki:hover {
  height: auto;
  width: auto;
  z-index: 3;
}

/** ANKI Inline  
----------------------------------------*/

.app-container pre.language-note-anki-in {
  border-color: #016ea6;
  background-color: #2b313a;
  padding-top: 0.2em;
  height: 5em;
  padding-top: 0.2em;
}

.app-container pre.language-note-anki-in:hover {
  height: auto;
  width: auto;
}

At the top of my note I have :

---
ANKI DECK: ...
ANKI TAG: ...
---

So on my note, where I want to write questions, I have :

```note-anki-in
Anki question (aka note type)
Front: ...
Back: ...
```

Do you know if it’s possible to show question part for one or two lines but not the answer ?

It’s possible with line-clamp, in example below for two lines, tested only with default theme and with inline way:

.app-container pre[class*="language-note-"] {
  border: 1px dashed;
  border-color: #5118a4;
  background-color: #2a194f;
}

/* Make the first line of note bold */

.app-container pre[class*="language-note-"] code[class*="language-note-"] {
white-space: pre-wrap;
font-family: var(--default-font);
font-size: smaller;
	
}
.app-container pre[class*="language-note-"] code[class*="language-note-"]:not(:hover) {
  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;  
   overflow: hidden;
}


/** ANKI Inline  
----------------------------------------*/

.app-container pre.language-note-anki-in {
  height:auto;
  width:auto;
}

.app-container pre.language-note-anki-in:hover {
  height:auto;
  width: auto;
}

Thanks but it display 2 lines whatever the question is 1 or 2 lines long.

If the question is 1 line, it displays the first line of answer. What am I searching is a way to display only the question, whatever this question is 1 or 2 lines long.