====== PlayGround ======

Unordered list:
  * Unordered List Item
  * Unordered List Item 2
  * Unordered List Item 3

Ordered list:
  * Ordered List Item
  * Ordered List Item 2
  * Ordered List Item 3


====== LaTeX (MathJax) ======
If you want to use inline MathJax, write the code inside ''%%<mjax></mjax>%%'' blocks.
<mjax>
a^2 + b^2 = c^2
</mjax>

Or you can use LaTeX's ''%%\begin{align*}%%'' or similar tags

\begin{align*}
e^x & = 1 + x + \frac{x^2}{2} + \frac{x^3}{6} + \cdots \\
    & = \sum_{n\geq 0} \frac{x^n}{n!}
\end{align*}

\begin{align*}
\mathcal{L}_{\text{SM}} =
-\frac{1}{4} F_{\mu\nu}^a F^{\mu\nu a}
+ \bar{\psi}_i \left( i \gamma^\mu D_\mu - m_i \right) \psi_i
+ \left( D_\mu \phi \right)^\dagger \left( D^\mu \phi \right)
- \lambda \left( \phi^\dagger \phi - \frac{v^2}{2} \right)^2
- \sum_{i,j} \left( y_{ij} \bar{\psi}_i \phi \psi_j + \text{h.c.} \right).
\end{align*}

You can write display math into bold ''%%<MJAX></MJAX>%%'' blocks.

Typeset mathematics contained inline (within) with the text of a paragraph needs to
take less space than the same math typeset outside the paragraph text as standalone,
display-style, material. To see this in practice, let’s explain that the equation 
<mjax>f(x) = \sum_{i=0}^{n} \frac{a_i}{1+x}</mjax> may diverge or converge depending on the
value of <mjax>x</mjax>. We can also typeset <mjax>f(x)</mjax> outside the paragraph in display style:

<MJAX>f(x) = \sum_{i=0}^{n} \frac{a_i}{1+x}</MJAX>


====== KaTeX ======
KaTeX is faster to render then MathJax, you can write inline code like $f(\xi) = \xi^2$ by using ''%%$f(\xi) = \xi^2$%%''.

The display math is done using ''%%$$f(\zeta)$$%%''.

$$i \hbar \frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat H \Psi(\mathbf{r},t)$$

$$ e^x = 1 + x + \frac{x^2}{2} + \frac{x^3}{6} + \cdots = \sum_{n \geq 0} \frac{x^n}{n!} $$

$$
\mathcal{L}_{\text{SM}} =
-\frac{1}{4} F_{\mu\nu}^a F^{\mu\nu a}
+ \bar{\psi}_i \left( i \gamma^\mu D_\mu - m_i \right) \psi_i
+ \left( D_\mu \phi \right)^\dagger \left( D^\mu \phi \right)
- \lambda \left( \phi^\dagger \phi - \frac{v^2}{2} \right)^2
- \sum_{i,j} \left( y_{ij} \bar{\psi}_i \phi \psi_j + \text{h.c.} \right).
$$

Typeset mathematics contained inline (within) with the text of a paragraph needs to
take less space than the same math typeset outside the paragraph text as standalone,
display-style, material. To see this in practice, let’s explain that the equation 
$f(x) = \sum_{i=0}^{n} \frac{a_i}{1+x}$ may diverge or converge depending on the
value of $x$. We can also typeset $f(x)$ outside the paragraph in display style:

$$f(x) = \sum_{i=0}^{n} \frac{a_i}{1+x}$$


====== TikZJax ======
LaTeX code with TikZ should be placed inside ''%%<tikzjax></tikzjax>%%''

<tikzjax>
\begin{document}
\begin{tikzpicture}
    \draw (0,0) circle (1in);
  \end{tikzpicture}
  \end{document}
</tikzjax>

<tikzjax>
\usetikzlibrary{cd}
\begin{document}

\begin{tikzcd}
    A \arrow[r, "\phi"] \arrow[d, red]
      & B \arrow[d, "\psi" red] \\
    C \arrow[r, red, "\eta" blue]
      & |[blue, rotate=-15]| D
  \end{tikzcd}
  
\end{document}

</tikzjax>

<tikzjax>
%from https://github.com/knedl1k/B4B01JAG
\usetikzlibrary{automata, positioning, arrows, calc}

\begin{document}


\tikzset{
->, % makes the edges directed
>=stealth', % makes the arrow heads bold
node distance=3cm, % specifies the minimum distance between two nodes. Change if necessary.
every state/.style={thick, fill=gray!10}, % sets the properties for each ’state’ node
initial text=$ $, % sets the text that appears on the start arrow
between/.style args={#1 and #2}{
         at = ($(#1)!0.5!(#2)$)
    },
}

\begin{tikzpicture}
            \node[state, initial] (0) {$q_0$};
            \node[state, right of=0] (1) {$q_1$};
            \node[state, accepting, right of=1] (f) {$q_f$};
        
            \draw
                (0) edge[loop above] node[align=center]{$a, Z_0 / A Z_0$ \\ $a, A / AA$} (0)
                (0) edge[bend left, above] node{$b, Z_0 / Z_0$} (1)
                (0) edge[bend left, below] node{$b, A / A$} (1)
                (1) edge[loop above] node[align=center]{$a, Z_0 / Z_0$\\$b, Z_0, Z_0$} (1)
                (1) edge[loop below] node[align=center]{$a, A/AA$ \\ $b, B /BB$ \\ $a,B / \varepsilon$ \\ $b,A/\varepsilon$} (1)
                (1) edge[bend left, above] node{$\varepsilon, Z_0 / \varepsilon$} (f)
      
                ;
      \end{tikzpicture}

\end{document}
</tikzjax>

====== Flashcards ======

You can add a flash card training set by doing:

<flashcards heading="My Custom Quiz" subtext="Select the correct answers." skiptext="Pass", defaultnum="5">
<questions>
Question 1
* answer 1
- answer 2
- answer 3
---
Question 2
- answer 1
* answer 2
- answer 3
- answer 4
- answer 5
---
Question 3
- answer 1
- answer 2
* answer 3
- answer 4
</questions>
</flashcards>

====== Markdown ======
<markdown>
[test](https://oiwiki.swpelc.eu/doku.php?id=playground:playground)
```python
def f(x):
  return x**2
```
</markdown>

====== Codedoc ======
<codedoc code> 
 <codedoc toggle description> 
 test1
 </codedoc>
 <codedoc toggle description> 
  test2
 </codedoc>
</codedoc>

<codedoc code:python> 
import numpy as np
a = np.array([1, 2, 3])
b = a ** 2
print(f"sum: {np.sum(b)}")
</codedoc>

====== Annotations ======
/*
=== Complex tooltipping ===

<code>
<autott>wiki:syntax</autott>

<autott>wiki:syntax|Renamed Syntax Page</autott>

<autott>
  <content>Simple tooltip</content>
  <tip>I am a tooltip!</tip>
</autott>

<autott blue>wiki:syntax</autott>

<autott plain>wiki:syntax</autott>

<autott small>wiki:syntax</autott>
</code>

<autott>wiki:syntax</autott>

<autott>wiki:syntax|Renamed Syntax Page</autott>

<autott>
  <content>Simple tooltip</content>
  <tip>I am a tooltip!</tip>
</autott>

<autott blue>wiki:syntax</autott>

<autott plain>wiki:syntax</autott>

<autott small>wiki:syntax</autott>

=== Simple tooltipping ===

<code>
<abbr>HyperText Markup Language (HTML)</abbr> is a language for describing web pages

<abbr>HTML [HyperText Markup Language]</abbr> is a language for describing web pages

<abbr title="Hyper Text Markup Language">HTML</abbr> is a language for describing web pages
</code>

<abbr>HyperText Markup Language (HTML)</abbr> is a language for describing web pages

<abbr>HTML [HyperText Markup Language]</abbr> is a language for describing web pages

<abbr title="Hyper Text Markup Language">HTML</abbr> is a language for describing web pages*/

<code>
<abbr title="Hyper Text Markup Language">HTML</abbr> is a language for describing web pages
</code>

<abbr title="Hyper Text Markup Language">HTML</abbr> is a language for describing web pages