Advanced Elements

There are several advanced elements you can use when designing a page. Collapsible sections, math equations with Katex, and diagrams with Mermaid are briefly demonstrated below. To take full advantage of Katex or Mermaid you will need to study their respective documentation.

Collapsible Content

You can also have sections of collapsible content. This content by default starts collapsed and requires a user to click on the title bar to expand it. To open a collapsible section by default add open to the buttons class. The HTML for this element is below the following example:

<button type="button" class="collapsible">Title</button>
<div class="collapsible-content">
    <p>
        The hidden collapsible content.
    </p>
</div>

Katex (Math)

Adding a math block to your page is rather simple, all you need is a div with the katex class. If you would like to add a little snippet of inline math like 1 + 1 = 2 make sure to use a span instead. Here is the code for the inline example:

<span class="katex">1 + 1 = 2</span>

Here are two advanced examples of Katex. Each example is followed by the code it took to create them:

<div class="katex">
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
</div>

<div class="katex">
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
</div>

Katex implements Latex math with some language specific alterations. You should study Latex and Katex to learn how to properly write mathematical equations in Katex. Keep in mind that Katex is very similar to MathJax but far more performant. Currently Katex macros are not supported by JamED.

Mermaid (Diagrams)

Adding a diagram to your page is rather simple, all you need is a div with the diagram class; for backwards compatibility you can use the class of mermaid as well. You will need to learn Mermaid's syntax in order to create diagrams though. There is a live editor you can use to test your diagram code before publishing it. Here is an example of a simple flowchart and its corresponding code:

<div class="diagram">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
</div>