讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode如何在Notebook中显示富文本_VSCode Notebook中富文本显示实践

老浩吖_5568

老浩吖_5568

发布时间:2026-04-02 14:48:15

|

585人浏览过

|

来源于php中文网

原创

VSCode Notebook 单元格输出不渲染 HTML 或 Markdown 的根本原因是内核未启用富文本支持或调用方式错误;Python 单元格必须显式导入并调用 IPython.display.display(),仅 print 或裸对象无效,且需确保 IPython 已安装、内核正确配置。

vscode如何在notebook中显示富文本_vscode notebook中富文本显示实践

为什么 VSCode Notebook 单元格输出不渲染 HTML 或 Markdown?

默认情况下,VSCode 的 .ipynb 文件中,即使你用 display(HTML(...)) 或 display(Markdown(...)),也可能只显示原始字符串或报错——根本原因是内核未启用富文本支持,或调用方式不匹配当前内核(如 Python 内核需 IPython.display,而纯 print() 或直接写字符串无效)。

  • Python 单元格必须显式导入并调用 IPython.display 下的函数,不能依赖 repr 自动转换
  • JavaScript/Julia 等内核有各自机制,Python 是最常踩坑的场景
  • VSCode 1.85+ 对富文本支持更稳定,旧版本可能跳过渲染直接输出字符串

Python Notebook 中正确显示 HTML 和 Markdown 的写法

关键不是“怎么写 HTML”,而是“怎么让内核识别并交由前端渲染”。以下写法在 VSCode 当前主流版本(1.84+)中可靠:

from IPython.display import HTML, Markdown, display
<h1>✅ 正确:display() 触发富文本协议</h1><p>display(HTML("<h2 style='color: blue'>标题</h2><p>段落</p>"))</p><h1>✅ 正确:Markdown 渲染(支持 LaTeX)</h1><p>display(Markdown("<strong>加粗</strong> 和 $\int_0^1 x^2 dx$"))</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill1675" title="VSCode"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/178842972858328.jpg" alt="VSCode"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill1675" title="VSCode">VSCode</a>
                                                                        <p>避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。</p>
                                                                </div>
                                                                <a href="/xiazai/skill1675" title="VSCode" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><h1>❌ 错误:仅 print 不触发渲染</h1><p>print(HTML("<b>不会加粗</b>"))  # 输出 <IPython.core.display.HTML object></p><h1>❌ 错误:没调用 display()</h1><p>HTML("<div>被忽略</div>")  # 单独一行,无输出或仅 repr

VSCode Notebook 富文本常见失效原因与修复

不是代码写错了,而是环境链路断了。重点排查这几点:

  • IPython 未安装或版本过低(pip install -U ipython,建议 ≥8.12)
  • 内核切换错误:右上角选的是 Python 3.9,但实际启动的是 conda 环境里没装 IPython 的 kernel
  • 单元格执行后没看到输出?检查是否误点了「Clear All Outputs」或输出被折叠(点击右上角小三角展开)
  • HTML 中含 JS 或 iframe?VSCode Notebook 默认禁用执行脚本,<script> 标签会被剥离,仅静态 HTML 生效
  • 路径引用本地资源(如 <img src="./plot.png">)失败?VSCode Notebook 不提供 HTTP 服务,相对路径不工作,需用 base64 编码或转为绝对路径 + file://(不推荐,跨平台易挂)

替代方案:不用 display() 也能渲染 Markdown?

是的——但仅限纯 Markdown 文本,且必须用特定单元格类型:

  • 将单元格类型从 Code 切换为 Markdown(按 Esc → M),直接写 ## 标题、- 列表,保存即渲染
  • 这种模式下不执行代码,也不支持变量插值(比如不能写 f"结果:{x}")
  • 想动态生成 Markdown?仍需回到 Code 单元格 + display(Markdown(...)),这是唯一可靠路径
  • 注意:Markdown 单元格里写 ```python ... ``` 会高亮但不执行;要执行就得切回 Code 单元格

富文本真正卡点不在语法,而在「display 调用时机」和「内核上下文完整性」。哪怕一行 display(HTML("x")) 失效,也大概率是内核没加载 IPython.display 模块,而不是 HTML 写错了。

热门AI工具

更多
咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
pip安装使用方法
pip安装使用方法

安装步骤:1、确保Python已经正确安装在您的计算机上;2、下载“get-pip.py”脚本;3、按下Win + R键,然后输入cmd并按下Enter键来打开命令行窗口;4、在命令行窗口中,使用cd命令切换到“get-pip.py”所在的目录;5、执行安装命令;6、验证安装结果即可。大家可以访问本专题下的文章,了解pip安装使用方法的更多内容。

2510

2023.10.09

更新pip版本
更新pip版本

更新pip版本方法有使用pip自身更新、使用操作系统自带的包管理工具、使用python包管理工具、手动安装最新版本。想了解更多相关的内容,请阅读专题下面的文章。

5783

2024.12.20

pip设置清华源
pip设置清华源

设置方法:1、打开终端或命令提示符窗口;2、运行“touch ~/.pip/pip.conf”命令创建一个名为pip的配置文件;3、打开pip.conf文件,然后添加“[global];index-url = https://pypi.tuna.tsinghua.edu.cn/simple”内容,这将把pip的镜像源设置为清华大学的镜像源;4、保存并关闭文件即可。

7322

2024.12.23

python升级pip
python升级pip

本专题整合了python升级pip相关教程,阅读下面的文章了解更多详细内容。

3547

2025.07.23

python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

2380

2023.09.27

python print用法与作用
python print用法与作用

本专题整合了python print的用法、作用、函数功能相关内容,阅读专题下面的文章了解更多详细教程。

229

2026.02.03

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1578

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2284

2023.09.04

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

160

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn