跳到主要内容

Markdown

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__                           |
|`这是一个 ~~删除线~~`          |这是一个 ~~删除线~~          |
|`***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***~~|

## 样式

将文本样式设置为 _斜体_, __粗体__, ~~删除线~~, 或 `行内代码`.

- 用符号列表
- 更好地澄清
- 您的观点

## 代码块

格式化的 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 事件，将在此之后触发。

Web 模式下在哪里打开 URL：

  • _blank（默认值）- 新标签页/窗口。
  • _self - 当前标签页/窗口。

code_style​

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

以下是配置 Markdown 代码块为等宽字体（monospace）的示例:

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

code_theme​

代码块的语法高亮主题。

支持的主题:

  • a11y-dark
  • a11y-light
  • agate
  • an-old-hope
  • androidstudio
  • arduino-light
  • arta
  • ascetic
  • atelier-cave-dark
  • atelier-cave-light
  • atelier-dune-dark
  • atelier-dune-light
  • atelier-estuary-dark
  • atelier-estuary-light
  • atelier-forest-dark
  • atelier-forest-light
  • atelier-heath-dark
  • atelier-heath-light
  • atelier-lakeside-dark
  • atelier-lakeside-light
  • atelier-plateau-dark
  • atelier-plateau-light
  • atelier-savanna-dark
  • atelier-savanna-light
  • atelier-seaside-dark
  • atelier-seaside-light
  • atelier-sulphurpool-dark
  • atelier-sulphurpool-light
  • atom-one-dark-reasonable
  • atom-one-dark
  • atom-one-light
  • brown-paper
  • codepen-embed
  • color-brewer
  • darcula
  • dark
  • default
  • docco
  • dracula
  • far
  • foundation
  • github-gist
  • github（默认值）
  • gml
  • googlecode
  • gradient-dark
  • grayscale
  • gruvbox-dark
  • gruvbox-light
  • hopscotch
  • hybrid
  • idea
  • ir-black
  • isbl-editor-dark
  • isbl-editor-light
  • kimbie.dark
  • kimbie.light
  • lightfair
  • magula
  • mono-blue
  • monokai-sublime
  • monokai
  • night-owl
  • nord
  • obsidian
  • ocean
  • paraiso-dark
  • paraiso-light
  • pojoaque
  • purebasic
  • qtcreator_dark
  • qtcreator_light
  • railscasts
  • rainbow
  • routeros
  • school-book
  • shades-of-purple
  • solarized-dark
  • solarized-light
  • sunburst
  • tomorrow-night-blue
  • tomorrow-night-bright
  • tomorrow-night-eighties
  • tomorrow-night
  • tomorrow
  • vs
  • vs2015
  • xcode
  • xt256
  • zenburn

extension_set​

属性值为 MarkdownExtensionSet 枚举类型，可选值为 NONE（默认值）、COMMON_MARK、GITHUB_WEB、GITHUB_FLAVORED。

selectable​

渲染的文本是否可选择。

value​

要渲染的 Markdown 内容。

事件​

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

下面的示例在新窗口中打开 Markdown 链接:

import flet as ft

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

    page.add(
        ft.Markdown(
            "[内嵌样式](https://www.google.com)",
            extension_set="gitHubWeb",
            on_tap_link=open_url,
            expand=True,
        ),
    )

ft.app(target=main)