如何在 Dash Tabs 中优雅展示 Python 脚本文件

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

本文提供在 Dash 应用中通过 Tabs 组件分页展示多个 Python 源码文件的完整解决方案，有效解决代码换行丢失、语法高亮缺失、可读性差等常见问题，推荐使用 html.Code + html.Pre 原生组合或 dash_mantine_components.Code 组件实现专业级代码渲染效果。

在开发数据仪表盘或创建教学演示应用时，我们经常遇到一个核心需求：如何清晰、专业地向团队成员、学员或最终用户展示底层的 Python 脚本逻辑？无论是机器学习模型训练流程、数据清洗 ETL 脚本，还是核心业务回调函数，直接将代码文本堆砌在页面上既不美观也不实用，而截图展示又会丧失代码的可复制性与交互性。那么，一个理想的 Python 代码展示方案应具备哪些特性？它应当能够通过标签页清晰分类并加载不同的 `.py` 文件，同时完美保留原始代码的缩进、换行和语法结构，最好还能支持流畅滚动和便捷的一键复制功能。

✅ 推荐方案一：原生 Dash + html.Pre + html.Code（零依赖）

实际上，实现这一目标并不一定需要引入额外的第三方库。Dash 框架内置的 `html.Pre`（预格式化文本容器）与 `html.Code`（语义化代码标签）这对黄金组合，就足以完美还原源代码的格式与结构，并且无需任何外部依赖，部署极其轻便。

import dash
from dash import html, dcc, callback, Input, Output
import pathlib

app = dash.Dash(__name__)

# 假设脚本存放在当前目录下的 scripts/ 文件夹中
SCRIPTS_DIR = pathlib.Path("scripts")
script_files = list(SCRIPTS_DIR.glob("*.py"))

# 构建 Tabs 的 items 列表
tabs_items = [
    dcc.Tab(
        label=file.stem,
        value=file.name,
        children=[
            html.Div(
                style={"padding": "16px", "overflowX": "auto", "maxHeight": "60vh"},
                children=[
                    html.Pre(
                        children=[
                            html.Code(
                                children=file.read_text(encoding="utf-8"),
                                style={
                                    "fontSize": "14px",
                                    "lineHeight": "1.5",
                                    "whiteSpace": "pre",
                                    "tabSize": 4,
                                },
                            )
                        ],
                        style={
                            "margin": 0,
                            "backgroundColor": "#f8f9fa",
                            "borderRadius": "4px",
                            "padding": "12px",
                            "border": "1px solid #e9ecef",
                        },
                    )
                ],
            )
        ],
    )
    for file in script_files
]

app.layout = html.Div([
    html.H2("Python 脚本源码库", style={"marginBottom": "20px"}),
    dcc.Tabs(
        id="script-tabs",
        value=script_files[0].name if script_files else None,
        children=tabs_items,
    ),
    html.Div(id="tab-content", style={"marginTop": "20px"}),
])

# 动态加载内容（可选：延迟加载提升首屏性能）
@callback(
    Output("tab-content", "children"),
    Input("script-tabs", "value"),
)
def render_tab_content(tab_value):
    if not tab_value or not SCRIPTS_DIR.joinpath(tab_value).exists():
        return html.P("未找到对应脚本文件", style={"color": "#6c757d"})
    content = SCRIPTS_DIR.joinpath(tab_value).read_text(encoding="utf-8")
    return html.Pre(
        children=html.Code(children=content, style={"whiteSpace": "pre", "tabSize": 4}),
        style={
            "backgroundColor": "#2d2d2d",
            "color": "#f8f8f2",
            "padding": "16px",
            "borderRadius": "4px",
            "overflowX": "auto",
            "fontFamily": "'Fira Code', 'Consolas', monospace",
            "fontSize": "13px",
        },
    )

if __name__ == "__main__":
    app.run_server(debug=True)

✅ 核心优势：此方案的最大亮点在于其纯粹性与轻量级。它完全基于 Dash 原生组件构建，拥有极佳的兼容性。HTML 原生的 `

` 标签组合天生就是为了精确保留空格、缩进和换行符而设计的。此外，开发者可以通过 CSS 样式自由定制代码区域的字体、主题配色和滚动行为，灵活性非常高。

pip install dash-mantine-components

import dash_mantine_components as dmc

# 在 Tab 中直接使用（支持 Python 语法高亮）
dmc.Code(
    children=script_content,
    language="python",
    withLineNumbers=True,
    copyLabel="复制代码",
    copiedLabel="已复制！",
    block=True,
    style={"marginTop": "16px"},
)