JavaScript 示例

基本的外部Javascript库包装器

为了加快快速开发，FastHTML 提供了几个内置的 Javascript 和格式化组件。这些组件主要是为了展示 FastHTML JS 模式。对于 FastHTML 而言，有太多的 JS 库无法全部封装，正如这里所示，添加 FastHTML 支持的代码无论如何都非常简单。

来源

光媒体

 light_media (css:str)

为白天模式视图渲染轻媒体

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

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

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

来源

深色媒体

 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选择器

使用示例 here。

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

来源

高亮JS

 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	要高亮的语言
光	str	atom-one-light	明亮主题
深色	str	atom-one-dark	深色主题

来源

可排序的JS

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

	类型	默认值	详细信息
sel	str	.sortable	可排序元素的CSS选择器
ghost_class	str	blue-background-class	当一个元素被拖动时，这个类用于将其与其他元素区分开来

来源

美人鱼JS

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

实现基于浏览器的Mermaid图形渲染。

	类型	默认值	详细信息
sel	str	.language-mermaid	mermaid元素的CSS选择器
主题	str	基础	要使用的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

```