Javascript 示例

基础外部 Javascript 库封装

为了加速快速开发，FastHTML 自带了几个内置的 Javascript 和格式化组件。这些主要是为了演示 FastHTML 的 JS 模式。FastHTML 无法封装所有的 JS 库，因为数量太多了，而且如此处所示，添加 FastHTML 支持的代码本身就非常简单。

---

源代码

light_media

 light_media (css:str)

为日间模式视图渲染浅色媒体

	类型	详情
css	str	包含在浅色媒体查询中的 CSS

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

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

---

源代码

dark_media

 dark_media (css:str)

为夜间模式视图渲染深色媒体

	类型	详情
css	str	包含在深色媒体查询中的 CSS

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

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

---

源代码

MarkdownJS

 MarkdownJS (sel='.marked')

实现在浏览器端渲染 markdown。

	类型	默认值	详情
sel	str	.marked	用于 markdown 元素的 CSS 选择器

用法示例请参见此处。

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

---

源代码

KatexMarkdownJS

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

	类型	默认值	详情
sel	str	.marked	用于 markdown 元素的 CSS 选择器
inline_delim	str	$	行内数学公式的分隔符
display_delim	str	$$	长数学公式的分隔符
math_envs	NoneType	None	要渲染为显示数学公式的环境列表

KatexMarkdown 用法示例

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)
    )

---

源代码

HighlightJS

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

实现在浏览器端进行语法高亮。用法示例请参见此处。

	类型	默认值	详情
sel	str	pre code:not([data-highlighted=“yes”])	用于代码元素的 CSS 选择器。默认为行业标准，调整前请谨慎
langs	str | list | tuple	python	要高亮的语言
light	str	atom-one-light	浅色主题
dark	str	atom-one-dark	深色主题

---

源代码

SortableJS

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

	类型	默认值	详情
sel	str	.sortable	用于可排序元素的 CSS 选择器
ghost_class	str	blue-background-class	当元素被拖动时，用于将其与其余元素区分开的类

---

源代码

MermaidJS

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

实现在浏览器端渲染 Mermaid 图表。

	类型	默认值	详情
sel	str	.language-mermaid	用于 mermaid 元素的 CSS 选择器
theme	str	base	要使用的 Mermaid 主题

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)"]
           ''')))

在 markdown 文件中，就像代码单元格一样，您可以定义

```mermaid

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

```