跳到主要内容

Markdown

用于渲染 Markdown 格式文本的控件。

示例

实时示例

带 GitHubWeb 扩展和可点击链接的 Markdown

import flet as ft

md1 = """
# Markdown 示例
Markdown 允许您轻松地在应用程序中包含格式化文本、图像和格式化 Dart 代码。

## 标题

Setext 风格

这是 H1
=============

这是 H2
-------------

Atx 风格

# 这是 H1

## 这是 H2

###### 这是 H6

选择有效的标题:

- [x] `# hello`
- [ ] `#hello`

## 链接

[内联风格](https://www.google.com)

## 图像

![来自 Flet 资产的图像](/icons/icon-192.png)

![测试图像](https://picsum.photos/200/300)

## 表格

|语法 |结果 |
|---------------------------------------|-------------------------------------|
|`*italic 1*` |*italic 1* |
|`_italic 2_` | _italic 2_ |
|`**bold 1**` |**bold 1** |
|`__bold 2__` |__bold 2__ |
|`This is a ~~strikethrough~~` |This is a ~~strikethrough~~ |
|`***italic bold 1***` |***italic bold 1*** |
|`___italic bold 2___` |___italic bold 2___ |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|

## 样式

将文本样式设置为 _italic_、__bold__、~~strikethrough~~ 或 `内联代码`。

- 使用 bulleted 列表
- better clarify
- 您的要点

## 代码块

格式化的 Dart 代码看起来也非常漂亮:

```
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ft.Markdown(data: markdownData),
),
));
}
```
"""

def main(page: ft.Page):
page.scroll = "auto"
page.add(
ft.Markdown(
md1,
selectable=True,
extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
on_tap_link=lambda e: page.launch_url(e.data),
)
)

ft.app(target=main)

带代码语法高亮的 Markdown

源代码

属性

自动打开文档中的 URL。默认值为 False。如果注册了,on_tap_link 事件将在打开 URL 之后触发。

在网络模式中何处打开 URL

值的类型为 UrlTarget 且默认为 UrlTarget.SELF

code_style

代码块文本样式。该值是 TextStyle 类的实例。

例如,配置 monospace 字体以在 Markdown 代码块中使用:

    page.fonts = {
"Roboto Mono": "RobotoMono-VariableFont_wght.ttf",
}

page.add(
Markdown(
table,
selectable=True,
extension_set="gitHubWeb",
code_theme="atom-one-dark",
code_style=TextStyle(font_family="Roboto Mono"),
on_tap_link=lambda e: page.launch_url(e.data),
)
)

在 v0.24.0 中已弃用,并将在 v0.27.0 中移除。请改用code_style_sheet.code_text_style

code_style_sheet

用于显示代码块时使用的样式。

值的类型为MarkdownStyleSheet

code_theme

代码块的语法高亮主题。

值的类型为MarkdownCodeTheme,默认为MarkdownCodeTheme.GITHUB

extension_set

渲染 Markdown 内容时使用的扩展。

值的类型为MarkdownExtensionSet,默认为MarkdownExtensionSet.NONE

fit_content

是否允许小部件适应子内容。

值的类型为bool,默认为True

img_error_content

图像加载失败时显示的Control

md_style_sheet

用于显示 Markdown 时使用的样式。

值的类型为MarkdownStyleSheet

selectable

渲染的文本是否可选。

shrink_wrap

滚动视图在滚动方向上的范围是否应由正在查看的内容确定。

值的类型为bool,默认为True

soft_line_break

软换行用于识别文本行末尾的空格以及紧接在后的文本行开头的前导空格。

值的类型为bool,默认为False

value

要渲染的 Markdown 内容。

事件

当点击/轻触 Markdown 文档中的链接时触发。事件的data属性包含 URL。

以下示例在新窗口中打开 Markdown URL:

import flet as ft

def main(page: ft.Page):
def open_url(e):
page.launch_url(e.data)

page.add(
ft.Markdown(
"[inline-style](https://www.google.com)",
extension_set="gitHubWeb",
on_tap_link=open_url,
expand=True,
),
)

ft.app(main)

on_selection_change

当文本选择发生变化时触发。

事件处理程序参数的类型为MarkdownSelectionChangeEvent

on_tap_text

当点击/轻触某些文本时触发。