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