CSS for Obsidian to Anki

Amaroks · 2021-02-15T15:58:52.643Z

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

Anki2880×1668 592 KB

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

Notice blocks - warning, info, success, danger blocks Share & showcase

My take on @mklepaczewski great notice blocks css, with the addition of pulsating gutter markers that can be used together or separately. [obsidian-css] Usage in a note: ```bullet-pulse-red ``` ```note-red RED ``` A gist of the CSS can be found here gist

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

Amaroks · 2021-02-15T16:00:31.150Z

.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;
}

Hydro · 2021-02-16T11:09:48.969Z

Very nice ! I’ll try.

Option b is the same code as option a ?

Amaroks · 2021-02-16T12:43:53.369Z

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

Hydro · 2021-02-16T12:46:06.842Z

Do you have a specifique options for anki plugin ?

Amaroks · 2021-02-16T12:52:29.377Z

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

Hydro · 2021-02-16T13:07:52.714Z

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
````

Hydro · 2021-02-16T13:23:16.022Z

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 :

Hydro · 2021-02-27T19:36:45.067Z

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

Amaroks · 2021-03-01T12:37:27.322Z

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;
}

Hydro · 2021-03-27T13:21:52.670Z

Amaroks:

can you explain this a little more?

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: ...
```

Hydro · 2021-04-06T06:39:56.237Z

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

SquishSquosh · 2021-04-08T09:16:58.450Z

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;
}

Hydro · 2021-04-16T06:19:14.219Z

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.

Nils.Srvd · 2022-02-04T19:40:37.550Z

Amaroks:

/** 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; */

Why did you remove the side blocks? Here I made them work again with this CSS I wrote. Let me know if it works or if it has any bugs, I’m just a beginner at this. Also, it’s necessary to activate ‘Readable line length’ in Settings > Editor > Display so that the side blocks are visible, otherwise they do not appear.

.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: #BCD4E6; 

  padding-top: 0.01em;
  width: 92px;
  height: 47px;
  position: relative;
    right: 35px;
    max-width: calc(0.66 * var(--line-width));
    min-width: 3em;
  z-index: 2;
  position: relative;
  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: #BCD4E6; /* Pale aqua */
  padding-top: 0.2em;
  height: 7em;
  padding-top: 0.2em;
}

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

My CSS looks like this in action:

11920×1044 471 KB

1 (hover)1920×1042 462 KB

21920×1040 307 KB

2 (hover)1920×1040 302 KB