{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# `ui.markdown`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown 元素\n",
    "\n",
    "将 Markdown 渲染到页面上。\n",
    "\n",
    "- `content`：要显示的 Markdown 内容\n",
    "- `extras`：[markdown2 扩展列表](https://github.com/trentm/python-markdown2/wiki/Extras#implemented-extras)（默认：`['fenced-code-blocks', 'tables']`）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.markdown.Markdown at 0x1c4a9b576d0>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.markdown('This is **Markdown**.')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有缩进的 Markdown\n",
    "\n",
    "每行开头的常见缩进会自动被去除。因此，您可以对 Markdown 元素进行缩进，它们仍然会被正确渲染。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.markdown.Markdown at 0x1c4bc2fc990>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.markdown('''\n",
    "    ## Example\n",
    "\n",
    "    This line is not indented.\n",
    "\n",
    "        This block is indented.\n",
    "        Thus it is rendered as source code.\n",
    "    \n",
    "    This is normal text again.\n",
    "''')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带有代码块的 Markdown\n",
    "\n",
    "您可以使用代码块来显示代码示例。如果您在开头的三个反引号后面指定语言，代码将会被语法高亮显示。请参阅 [Pygments](https://pygments.org/languages/) 网站以获取支持的语言列表。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.markdown.Markdown at 0x1c4bcd473d0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.markdown('''\n",
    "    ```python\n",
    "    from nicegui import ui\n",
    "\n",
    "    ui.label('Hello World!')\n",
    "\n",
    "    ui.run(dark=True)\n",
    "    ```\n",
    "''')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown 表格\n",
    "\n",
    "通过激活 `\"tables\"` 额外功能，您可以使用 Markdown 表格。请参阅 [markdown2 文档](https://github.com/trentm/python-markdown2/wiki/Extras#implemented-extras)以获取可用额外功能的列表。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.markdown.Markdown at 0x1c4bcd4d850>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.markdown('''\n",
    "    | First name | Last name |\n",
    "    | ---------- | --------- |\n",
    "    | Max        | Planck    |\n",
    "    | Marie      | Curie     |\n",
    "''', extras=['tables'])\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 更改 Markdown 内容\n",
    "\n",
    "您可以通过设置其 `content` 属性或调用 `set_content` 来更改 Markdown 元素的内容。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1c4bcd4da50>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "markdown = ui.markdown('Sample content')\n",
    "ui.button('Change Content', on_click=lambda: markdown.set_content('This is new content'))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}