Adding a css class for latex-like theorems

[fivoskal]

Hello,
I would like to incorporate the following classes in my slides:

.theorem {
display: block;
font-style: italic;
}
.theorem:before {
content: "Theorem. ";
font-weight: bold;
font-style: normal;
}
.theorem[text]:before {
content: "Theorem (" attr(text) ") ";
}

I prepare my slides with the vscode extension but I do not know how to go about it.

Thanks in advance :)

[yhatt]

Just wrap CSS in <style> tag.

[yhatt]

---
marp: true
---

<style>
  .theorem {
    display: block;
    font-style: italic;
  }
  .theorem:before {
    content: "Theorem. ";
    font-weight: bold;
    font-style: normal;
  }
  .theorem[data-text]:before {
    content: "Theorem (" attr(data-text) ") ";
  }
</style>

# A theorem 

<div class="theorem" data-text="Foo">
Bar
</div>

[fivoskal]

thank you very much!. is there a way I can set the class with a global scope? because it seems it only works only when <style> and <div class="theorem"> are inside the same slide, i.e. --- ... ---.

Thank you again for your time! this is a very nice project! I found about it today and I already like it a lot.

[yhatt]

No worries. <style> is always global in the whole of Markdown document. It is natural behavior as same as HTML. (If needed to scope the style, Marp requires adding scoped attribute to <style>)

[fivoskal]

One last thing. Math is not parsed when I use $...$ inside the <div class="theorem">. What should I add to the definition of the class for this to happen?

EDIT:
turns out you have to skip a line between <div> and $...$ in order for the last one to be rendered.

[yhatt]

👍 ➡️ #152