docs/api/js.html.md

# Javascript examples


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

To expedite fast development, FastHTML comes with several built-in
Javascript and formatting components. These are largely provided to
demonstrate FastHTML JS patterns. There’s far too many JS libs for
FastHTML to wrap them all, and as shown here the code to add FastHTML
support is very simple anyway.

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L16"
target="_blank" style="float:right; font-size:smaller">source</a>

### light_media

>  light_media (css:str)

*Render light media for day mode views*

<table>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>css</td>
<td>str</td>
<td>CSS to be included in the light media query</td>
</tr>
</tbody>
</table>

``` python
light_media('.body {color: green;}')
```

``` html
<style>@media (prefers-color-scheme: light) {.body {color: green;}}</style>
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L23"
target="_blank" style="float:right; font-size:smaller">source</a>

### dark_media

>  dark_media (css:str)

*Render dark media for night mode views*

<table>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>css</td>
<td>str</td>
<td>CSS to be included in the dark media query</td>
</tr>
</tbody>
</table>

``` python
dark_media('.body {color: white;}')
```

``` html
<style>@media (prefers-color-scheme:  dark) {.body {color: white;}}</style>
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L35"
target="_blank" style="float:right; font-size:smaller">source</a>

### MarkdownJS

>  MarkdownJS (sel='.marked')

*Implements browser-based markdown rendering.*

<table>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>sel</td>
<td>str</td>
<td>.marked</td>
<td>CSS selector for markdown elements</td>
</tr>
</tbody>
</table>

Usage example
[here](../tutorials/quickstart_for_web_devs.html#rendering-markdown).

``` python
__file__ = '../../fasthtml/katex.js'
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L43"
target="_blank" style="float:right; font-size:smaller">source</a>

### KatexMarkdownJS

>  KatexMarkdownJS (sel='.marked', inline_delim='$', display_delim='$$',
>                       math_envs=None)

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>sel</td>
<td>str</td>
<td>.marked</td>
<td>CSS selector for markdown elements</td>
</tr>
<tr>
<td>inline_delim</td>
<td>str</td>
<td>$</td>
<td>Delimiter for inline math</td>
</tr>
<tr>
<td>display_delim</td>
<td>str</td>
<td>$$</td>
<td>Delimiter for long math</td>
</tr>
<tr>
<td>math_envs</td>
<td>NoneType</td>
<td>None</td>
<td>List of environments to render as display math</td>
</tr>
</tbody>
</table>

KatexMarkdown usage example:

``` python
longexample = r"""
Long example:

$$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$
"""

app, rt = fast_app(hdrs=[KatexMarkdownJS()])

@rt('/')
def get():
    return Titled("Katex Examples", 
        # Assigning 'marked' class to components renders content as markdown
        P(cls='marked')("Inline example: $\sqrt{3x-1}+(1+x)^2$"),
        Div(cls='marked')(longexample)
    )
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L58"
target="_blank" style="float:right; font-size:smaller">source</a>

### HighlightJS

>  HighlightJS (sel='pre code:not([data-highlighted="yes"])',
>                   langs:str|list|tuple='python', light='atom-one-light',
>                   dark='atom-one-dark')

*Implements browser-based syntax highlighting. Usage example
[here](../tutorials/quickstart_for_web_devs.html#code-highlighting).*

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>sel</td>
<td>str</td>
<td>pre code:not([data-highlighted=“yes”])</td>
<td>CSS selector for code elements. Default is industry standard, be
careful before adjusting it</td>
</tr>
<tr>
<td>langs</td>
<td>str | list | tuple</td>
<td>python</td>
<td>Language(s) to highlight</td>
</tr>
<tr>
<td>light</td>
<td>str</td>
<td>atom-one-light</td>
<td>Light theme</td>
</tr>
<tr>
<td>dark</td>
<td>str</td>
<td>atom-one-dark</td>
<td>Dark theme</td>
</tr>
</tbody>
</table>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L81"
target="_blank" style="float:right; font-size:smaller">source</a>

### SortableJS

>  SortableJS (sel='.sortable', ghost_class='blue-background-class')

<table>
<colgroup>
<col style="width: 6%" />
<col style="width: 25%" />
<col style="width: 34%" />
<col style="width: 34%" />
</colgroup>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>sel</td>
<td>str</td>
<td>.sortable</td>
<td>CSS selector for sortable elements</td>
</tr>
<tr>
<td>ghost_class</td>
<td>str</td>
<td>blue-background-class</td>
<td>When an element is being dragged, this is the class used to
distinguish it from the rest</td>
</tr>
</tbody>
</table>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/js.py#L92"
target="_blank" style="float:right; font-size:smaller">source</a>

### MermaidJS

>  MermaidJS (sel='.language-mermaid', theme='base')

*Implements browser-based Mermaid diagram rendering.*

<table>
<thead>
<tr>
<th></th>
<th><strong>Type</strong></th>
<th><strong>Default</strong></th>
<th><strong>Details</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>sel</td>
<td>str</td>
<td>.language-mermaid</td>
<td>CSS selector for mermaid elements</td>
</tr>
<tr>
<td>theme</td>
<td>str</td>
<td>base</td>
<td>Mermaid theme to use</td>
</tr>
</tbody>
</table>

``` python
app, rt = fast_app(hdrs=[MermaidJS()])
@rt('/')
def get():
    return Titled("Mermaid Examples", 
        # Assigning 'marked' class to components renders content as markdown
        Pre(Code(cls ="language-mermaid")('''flowchart TD
            A[main] --> B["fact(5)"] --> C["fact(4)"] --> D["fact(3)"] --> E["fact(2)"] --> F["fact(1)"] --> G["fact(0)"]
           ''')))
```

In a markdown file, just like a code cell you can define

\`\`\`mermaid

        graph TD
        A --> B 
        B --> C 
        C --> E

\`\`\`