FastHTML 提供了 MarkdownJS 和 HighlightJS 组件，使你能够在 Web 应用程序中渲染 Markdown 和代码高亮。
以下是如何使用 MarkdownJS 和 HighlightJS 组件的示例：
from fasthtml.common import *
from fasthtml.js import MarkdownJS, HighlightJS
app, rt = fast_app(hdrs=(MarkdownJS(), HighlightJS(langs=['python', 'javascript'])))
@rt("/")
def get():
# 使用 MarkdownJS 渲染 Markdown
markdown_content = """
Here are some _markdown_ elements.
- This is a list item
- This is another list item
- And this is a third list item
**Fenced code blocks work here.**
"""
# 使用 HighlightJS 渲染代码
code_example = """
import datetime
import time
for i in range(10):
print(f"{datetime.datetime.now()}")
time.sleep(1)
"""
return Div(
H2("Markdown Example"),
Div(markdown_content, cls="markdown"),
H2("Code Highlighting Example"),
Pre(Code(code_example))
)
serve()
在这个例子中，我们使用 MarkdownJS 组件渲染 Markdown 文本，并使用 HighlightJS 组件渲染代码。我们还将 MarkdownJS 和 HighlightJS 添加到应用程序的头部，以便在页面中渲染它们。
以下是一些额外的说明：
- MarkdownJS:
MarkdownJS组件需要包含 Markdown 库，例如marked。FastHTML 提供了一个预定义的MarkdownJS组件，你可以使用它来渲染 Markdown 文本。 - HighlightJS:
HighlightJS组件需要包含语法高亮库，例如highlight.js。FastHTML 提供了一个预定义的HighlightJS组件，你可以使用它来渲染代码高亮。 - 语言设置: 你可以使用
HighlightJS组件的langs参数来指定要高亮的编程语言列表。 - 自定义样式: 你可以自定义
MarkdownJS和HighlightJS的样式，以匹配你的应用程序的样式。
FastHTML 的文档和教程提供了更多关于 Markdown 和代码高亮的详细信息，帮助你快速入门。