Ctrl+K

ui.markdown Markdown 元素

ui.markdown Markdown 元素#

将 Markdown 渲染到页面上。

  • content：要显示的 Markdown 内容

  • extras：markdown2 扩展列表（默认：['fenced-code-blocks', 'tables']）

from nicegui import ui

ui.markdown('This is **Markdown**.')

# ui.run()

带有缩进的 ui.markdown#

每行开头的常见缩进会自动被去除。因此，您可以对 Markdown 元素进行缩进，它们仍然会被正确渲染。

from nicegui import ui

ui.markdown('''
    ## Example

    This line is not indented.

        This block is indented.
        Thus it is rendered as source code.
    
    This is normal text again.
''')

# ui.run()

带有代码块的 ui.markdown#

您可以使用代码块来显示代码示例。如果您在开头的三个反引号后面指定语言，代码将会被语法高亮显示。请参阅 Pygments 网站以获取支持的语言列表。

from nicegui import ui

ui.markdown('''
    ```python
    from nicegui import ui

    ui.label('Hello World!')

    ui.run(dark=True)
    ```
''')

# ui.run()

ui.markdown 表格#

通过激活 "tables" 额外功能，您可以使用 Markdown 表格。请参阅 markdown2 文档以获取可用额外功能的列表。

from nicegui import ui

ui.markdown('''
    | First name | Last name |
    | ---------- | --------- |
    | Max        | Planck    |
    | Marie      | Curie     |
''', extras=['tables'])

# ui.run()

更改 ui.markdown 内容#

您可以通过设置其 content 属性或调用 set_content 来更改 Markdown 元素的内容。

from nicegui import ui

markdown = ui.markdown('Sample content')
ui.button('Change Content', on_click=lambda: markdown.set_content('This is new content'))

# ui.run()
目录