====== Quarto Special Markup ======

===== Code Block with Filename =====

<code>
```{.c filename="main.c"}
#include <stdio.h>

int main() {
    printf("Hello, world!\n");

    return(0);
}
```
</code>

===== Callout Blocks =====

<code>
:::{.callout-note}
This is a note.
:::
</code>

<code>
:::{.callout-tip}
This is a tip.
:::
</code>

<code>
:::{.callout-warning}
This is a warning.
:::
</code>

<code>
:::{.callout-caution}
This is a caution.
:::
</code>

<code>
:::{.callout-important}
This is important!
:::
</code>

===== Spans =====

<code>
[This text is smallcaps]{.smallcaps}
</code>

<code>
[This text is underlined]{.underline}
</code>

<code>
[This text is highlighted]{.mark}
</code>

===== Diagrams =====

Quarto has native support for embedding Mermaid and Graphviz diagrams. This enables you to create flowcharts, sequence diagrams, state diagrams, Gantt charts, and more using a plain text syntax inspired by markdown.

For example, here we embed a flowchart created using Mermaid:

<code>
```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```
</code>

===== Equations =====

<code>
inline math: $E = mc^{2}$
</code>

display math:

<code>
$$E = mc^{2}$$
</code>

===== Raw Content =====

<code>
```{=html}
<iframe src="https://quarto.org/" width="500" height="400"></iframe>
```
</code>

===== Videos =====

<code>
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
</code>