所有主流HTML编辑器均不支持自动将代码块转为语义化列表；必须手动提取行前缀、添加<li>标签并包裹<ul>或<ol>，注意HTML实体转义且不可嵌套在<pre>中。
HTML编辑器里没有“自动转列表”功能
直接告诉你结论：所有主流HTML编辑器（包括 VS Code、Sublime Text、Typora、Obsidian 的 HTML 模式）都不会把一段代码块自动识别成列表并转换。你看到的 <pre><code> 块是纯文本容器，它不解析内容结构，更不会猜你要不要拆成 <ul> 或 <ol>。
手动转换时必须先区分有序还是无序列表
真实场景中，“代码块转列表”通常指把类似下面这种缩进/编号/符号分隔的文本整理成语义化 HTML 列表：
1. 初始化配置<br>2. 加载依赖<br>3. 启动服务
或者：
- 支持 Markdown<br>- 内置语法高亮<br>- 可导出为 HTML
这时候你需要：
- 用正则或查找替换提取每行前缀（如
^\d+\.或^-） - 把匹配行替换成
<li>内容</li> - 在外层手动包裹
<ol>或<ul> - 注意空行——它不能留在列表内部，否则会破坏 HTML 结构
VS Code 里最快的手动转换方法
以 VS Code 为例（其他编辑器逻辑类似），打开命令面板（Ctrl+Shift+P），输入 “Toggle List Item” 并不行——它只对 Markdown 有效，对纯 HTML 文件无效。真正可用的是：
立即学习“前端免费学习笔记（深入）”；
- 选中要转的多行文本 → 按
Ctrl+Shift+L进入列编辑模式（多光标） - 在每行开头插入
<li>，结尾补上</li> - 再手动加一行
<ul>在顶部、</ul>在底部 - 如果原内容含
<>等字符，务必先做 HTML 实体转义（例如把<div>换成<div>），否则会破坏 DOM<h3>别误用 <code><pre><code>套列表有人试图写成这样：
<pre><code><ul><li>A</li><li>B</li></ul></code></pre>
这是错的。
<pre>和<code>是用于展示源码的，浏览器会把它当纯文本渲染，不会执行其中的 HTML 标签。最终你看到的是一整段带尖括号的字符串，而不是一个真实列表。真正要让列表可交互、可样式化、被屏幕阅读器识别，就必须让
<ul>或<ol>处于文档流顶层，不能嵌在<pre>里。复杂点在于：有些编辑器（比如 CKEditor）提供可视化列表按钮，但它只作用于富文本区域，不是 HTML 源码编辑模式；而你在写 .html 文件时，几乎全靠手写和替换——没有捷径，也别信“一键转换”的插件，它们多数只是改了外观，没处理语义或转义问题。
