【实战】Streamlit搭建Python章节代码可视化系统

【实战】Streamlit搭建Python章节代码可视化系统在日常学习和教学中我们经常会遇到多章节代码文件管理的问题手动切换文件夹、打开文件查看代码效率极低。本文将手把手教你用Streamlit快速搭建一个Python章节代码可视化系统支持左侧章节导航、文件选择、代码高亮展示还能搜索代码内容完美适配多章节代码管理场景。一、效果预览1. 界面布局左侧侧边栏章节导航文件列表支持8个章节的快速切换右侧主区域代码内容展示文件信息内容搜索宽布局适配代码阅读支持.py/.txt/.md文件Python代码自动高亮中文编码兼容2. 核心功能✅ 按章节分类管理代码文件✅ 代码高亮展示支持中文编码UTF-8/GBK✅ 代码内容关键词搜索高亮✅ 显示文件大小等基础信息✅ 适配任意多章节的文件夹结构二、完整代码importstreamlitasstimportosimportre# -------------------------- 配置项适配真实文件夹名称 --------------------------# 根目录自动获取当前脚本所在目录ROOT_DIRos.path.dirname(os.path.abspath(__file__))# 章节名称完全匹配你的实际文件夹名CHAPTERS[第1章 Python基础知识,第2章 Numpy,第3章 Pandas,第4章 Matplotlib,第5章 数据预处理与特征工程,第6章 机器学习与实现,第7章 集成学习与实现,第8章 深度学习与实现]# 支持展示的代码文件后缀SUPPORTED_EXTENSIONS(.py,.txt,.md)# -------------------------- 工具函数 --------------------------defget_chapter_files(chapter_name):获取指定章节文件夹下的所有支持的文件chapter_diros.path.join(ROOT_DIR,chapter_name)ifnotos.path.exists(chapter_dir):return[]# 遍历文件夹筛选支持的文件file_list[]forfileinos.listdir(chapter_dir):# 排除隐藏文件只保留指定后缀ifnotfile.startswith(.)andfile.endswith(SUPPORTED_EXTENSIONS):file_list.append(file)returnsorted(file_list)defread_file_content(chapter_name,file_name):读取指定文件的内容处理编码问题file_pathos.path.join(ROOT_DIR,chapter_name,file_name)try:# 优先用utf-8编码读取失败则用gbk兼容中文withopen(file_path,r,encodingutf-8)asf:contentf.read()exceptUnicodeDecodeError:withopen(file_path,r,encodinggbk)asf:contentf.read()returncontentdefhighlight_code(content,langpython):代码高亮展示Streamlit原生支持st.code(content,languagelang)# -------------------------- 页面布局 --------------------------defmain():# 页面基础配置st.set_page_config(page_titlePython代码章节可视化系统,page_icon,layoutwide# 宽布局适配代码展示)# 侧边栏 - 章节选择st.sidebar.title(章节导航)selected_chapterst.sidebar.selectbox(选择章节,CHAPTERS,index0# 默认选中第1章)# 侧边栏 - 文件选择根据选中章节加载st.sidebar.subheader(文件列表)chapter_filesget_chapter_files(selected_chapter)ifnotchapter_files:st.sidebar.warning(f「{selected_chapter}」文件夹下暂无支持的文件)selected_fileNoneelse:selected_filest.sidebar.selectbox(选择文件,chapter_files)# 主内容区 - 展示内容st.title(f{selected_chapter}代码查看)st.divider()ifselected_file:# 展示文件信息col1,col2st.columns([8,2])withcol1:st.subheader(f文件{selected_file})withcol2:file_pathos.path.join(ROOT_DIR,selected_chapter,selected_file)file_sizeos.path.getsize(file_path)/1024# 转换为KBst.caption(f文件大小{file_size:.2f}KB)# 读取并展示文件内容contentread_file_content(selected_chapter,selected_file)# 判断文件类型针对性展示ifselected_file.endswith(.py):highlight_code(content,langpython)elifselected_file.endswith(.md):st.markdown(content)else:st.text(content)# 可选添加内容搜索框st.divider()search_keyst.text_input( 搜索文件内容)ifsearch_key:# 高亮匹配的关键词patternre.compile(re.escape(search_key),re.IGNORECASE)highlighted_contentpattern.sub(f**{search_key}**,content)ifselected_file.endswith(.py):st.subheader(搜索结果)st.code(highlighted_content,languagepython)else:st.subheader(搜索结果)st.markdown(highlighted_content)else:# 无文件时的提示st.info(请在左侧侧边栏选择章节并确保对应章节文件夹内有.py/.txt/.md文件)st.image(https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png,width400)if__name____main__:main()三、代码解析1. 配置项核心适配点# 根目录自动获取脚本所在目录无需手动修改ROOT_DIRos.path.dirname(os.path.abspath(__file__))# 章节列表必须完全匹配你的实际文件夹名称CHAPTERS[第1章 Python基础知识,第2章 Numpy,...]# 支持的文件类型可根据需求扩展如.ipynbSUPPORTED_EXTENSIONS(.py,.txt,.md)关键说明CHAPTERS列表要和本地章节文件夹名称完全一致否则会出现“找不到文件夹”的问题。2. 工具函数核心功能封装1获取章节文件列表defget_chapter_files(chapter_name):获取指定章节文件夹下的所有支持的文件chapter_diros.path.join(ROOT_DIR,chapter_name)ifnotos.path.exists(chapter_dir):return[]file_list[]forfileinos.listdir(chapter_dir):# 排除隐藏文件只保留指定后缀ifnotfile.startswith(.)andfile.endswith(SUPPORTED_EXTENSIONS):file_list.append(file)returnsorted(file_list)功能遍历指定章节文件夹筛选出非隐藏的、指定后缀的文件返回排序后的文件列表。2读取文件内容兼容中文编码defread_file_content(chapter_name,file_name):读取指定文件的内容处理编码问题file_pathos.path.join(ROOT_DIR,chapter_name,file_name)try:# 优先用utf-8编码读取withopen(file_path,r,encodingutf-8)asf:contentf.read()exceptUnicodeDecodeError:# 失败则用gbk兼容中文文件withopen(file_path,r,encodinggbk)asf:contentf.read()returncontent核心亮点解决中文文件读取乱码问题优先UTF-8兼容GBK编码。3代码高亮展示defhighlight_code(content,langpython):代码高亮展示Streamlit原生支持st.code(content,languagelang)利用Streamlit原生的st.code实现代码高亮支持Python、Java等多种语言。3. 页面布局UI实现1基础配置st.set_page_config(page_titlePython代码章节可视化系统,page_icon,layoutwide# 宽布局适配代码阅读)设置页面标题、图标和宽布局提升代码展示体验。2侧边栏章节文件选择# 章节选择st.sidebar.title(章节导航)selected_chapterst.sidebar.selectbox(选择章节,CHAPTERS,index0)# 文件选择根据选中章节动态加载st.sidebar.subheader(文件列表)chapter_filesget_chapter_files(selected_chapter)ifnotchapter_files:st.sidebar.warning(f「{selected_chapter}」文件夹下暂无支持的文件)selected_fileNoneelse:selected_filest.sidebar.selectbox(选择文件,chapter_files)侧边栏分为两部分章节下拉选择、文件下拉选择根据章节动态加载无文件时给出友好提示。3主内容区文件展示搜索ifselected_file:# 展示文件名称和大小col1,col2st.columns([8,2])withcol1:st.subheader(f文件{selected_file})withcol2:file_pathos.path.join(ROOT_DIR,selected_chapter,selected_file)file_sizeos.path.getsize(file_path)/1024st.caption(f文件大小{file_size:.2f}KB)# 读取并展示文件内容按类型适配contentread_file_content(selected_chapter,selected_file)ifselected_file.endswith(.py):highlight_code(content,langpython)elifselected_file.endswith(.md):st.markdown(content)else:st.text(content)# 代码内容搜索search_keyst.text_input( 搜索文件内容)ifsearch_key:patternre.compile(re.escape(search_key),re.IGNORECASE)highlighted_contentpattern.sub(f**{search_key}**,content)ifselected_file.endswith(.py):st.subheader(搜索结果)st.code(highlighted_content,languagepython)else:st.markdown(highlighted_content)展示文件基础信息名称、大小按文件类型适配展示方式Python代码高亮、Markdown解析、文本直接展示关键词搜索忽略大小写匹配内容高亮显示。四、环境准备与运行1. 安装依赖pipinstallstreamlit2. 文件夹结构要求根目录/ ├── 第1章 Python基础知识/ │ └── demo1.py # 章节内的代码文件 ├── 第2章 Numpy/ │ └── numpy_demo.py ├── ... └── app.py # 上述代码文件关键代码文件要放在对应章节文件夹内根目录只放主脚本app.py。3. 启动系统streamlit run app.py启动后会自动打开浏览器地址默认为http://localhost:8501。五、扩展优化可选支持Jupyter笔记本.ipynb安装nbconvert库解析.ipynb文件内容代码运行功能结合exec/subprocess实现代码一键运行注意安全风险代码行号显示使用pygments库生成带行号的高亮代码暗黑模式适配Streamlit默认支持可在页面设置中切换文件上传功能支持在线上传代码文件到指定章节。六、总结本文实现的Streamlit代码可视化系统核心解决了“多章节代码文件管理可视化查看”的痛点代码结构清晰、易扩展适合Python学习者、教师、开发者使用。只需修改CHAPTERS列表适配自己的文件夹结构即可快速搭建专属的代码管理系统。Python代码章节可视化系统