直接在HTM文件中嵌入代码高亮可行，但需手动引入高亮库（如Highlight.js）并确保代码内容HTML实体编码；浏览器无法原生编辑+高亮，必须依赖富文本编辑器（如CKEditor）或本地编辑器（如EditPlus）配合预览。

直接在 HTM 文件里嵌入代码高亮逻辑是可行的，但必须绕开「编辑器实时渲染」这个陷阱——HTM 是静态文件，浏览器只解析 HTML 结构，不执行编辑逻辑。真正能“编辑 + 高亮”双功能并存的，只有两类路径：用支持插件的富文本编辑器（如 CKEditor）集成高亮，或用本地文本编辑器（如 EditPlus）手动写好带高亮标记的 HTML 再打开。

为什么不能直接在浏览器里编辑并高亮代码？

浏览器打开 xxx.htm 时只是渲染页面，不提供编辑能力；而像 CodePen 这类在线编辑器虽能实时高亮，但它们本质是 Web 应用，生成的不是你本地可保存的 HTM 文件。如果你双击打开一个 HTM 文件想边改边看高亮效果，会发现：<pre class="brush:python">&lt;/code&gt; 这类标签毫无反应——因为缺少 &lt;code&gt;shCore.js&lt;/code&gt; 和对应语言的 &lt;code&gt;shBrushPython.js&lt;/code&gt; 等依赖，更没有调用 &lt;code&gt;SyntaxHighlighter.all()&lt;/code&gt;。&lt;/p&gt; &lt;H3&gt;用 EditPlus 编辑 HTM 并预览高亮效果&lt;/H3&gt; &lt;p&gt;EditPlus 支持语法高亮、HTML 实时预览、自动转义符号（比如把 &lt;code&gt;&lt;&lt;/code&gt; 显示为字符而非标签），适合手写带高亮逻辑的 HTM 文件：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;新建文件 → 选择 “HTML Page” 模板，确保文档类型声明完整（&lt;code&gt;&lt;!DOCTYPE html&gt;&lt;/code&gt;）&lt;/li&gt; &lt;li&gt;在 &lt;code&gt;&lt;head&gt;&lt;/code&gt; 中引入 &lt;code&gt;shCore.css&lt;/code&gt; 和主题 CSS（如 &lt;code&gt;shThemeDefault.css&lt;/code&gt;）&lt;/li&gt; &lt;li&gt;在 &lt;code&gt;&lt;body&gt;&lt;/code&gt; 底部引入 &lt;code&gt;shCore.js&lt;/code&gt; 和至少一个语言刷（如 &lt;code&gt;shBrushJavaScript.js&lt;/code&gt;）&lt;/li&gt; &lt;li&gt;把要高亮的代码放进 &lt;code&gt;&lt;pre class=&quot;brush:javascript&quot;&gt;&lt;/code&gt;，注意先手动把 &lt;code&gt;&lt;&lt;/code&gt; 替换为 &lt;code&gt;<&lt;/code&gt;，&lt;code&gt;&gt;&lt;/code&gt; 替换为 &lt;code&gt;>&lt;/code&gt;&lt;/li&gt; &lt;li&gt;按 Ctrl+B 预览，EditPlus 会调用系统默认浏览器打开当前文件，此时 SyntaxHighlighter 才会生效&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;在 CKEditor 中插入带高亮的代码块&lt;/H3&gt; &lt;p&gt;如果你需要用户在网页表单里输入代码并自动高亮（比如博客后台），CKEditor + SyntaxHighlighter 插件是最成熟的选择，但要注意几个硬性条件：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;必须在 &lt;code&gt;config.js&lt;/code&gt; 中启用插件：&lt;code&gt;config.extraPlugins = 'syntaxhighlight';&lt;/code&gt;，且工具栏添加 &lt;code&gt;['Code']&lt;/code&gt;&lt;/li&gt; &lt;li&gt;插件本身不处理 HTML 转义——用户粘贴的 &lt;code&gt;&lt;div&gt;&lt;/code&gt; 会被当成标签直接执行，导致页面错乱；务必提前用 &lt;code&gt;CKEDITOR.htmlEncode()&lt;/code&gt; 处理内容&lt;/li&gt; &lt;li&gt;生成的 HTM 文件里，代码块实际是 &lt;code&gt;&lt;pre class=&quot;brush:python; gutter:false;&quot;&gt;&lt;/code&gt; 这种结构，不是 &lt;code&gt;&lt;textarea&gt;&lt;/code&gt;；所以你不能靠修改 &lt;code&gt;class&lt;/code&gt; 值来切换语言，得重新插入&lt;/li&gt; &lt;li&gt;旧版插件依赖 Flash（&lt;code&gt;clipboard.swf&lt;/code&gt;），2026 年多数浏览器已禁用；必须换用不依赖 Flash 的构建版本，或改用 Highlight.js 替代&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;最简可控方案：用 Highlight.js 替代 SyntaxHighlighter&lt;/H3&gt; &lt;p&gt;SyntaxHighlighter 已多年未更新，Flash 依赖和 IE 兼容逻辑在现代环境里全是雷。Highlight.js 更轻量、零配置即可工作，且支持自动语言检测：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;只需在 HTM 文件末尾加两行：&lt;code&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css&quot;&gt;&lt;/code&gt; 和 &lt;code&gt;&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js&quot;&gt;&lt;/script&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;代码块写成 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;python&quot;&gt;print(&quot;hello&quot;)&lt;/code&gt;</pre> 即可，无需手动转义 —— highlight.js 会自动处理 <li>如果要支持行号，需额外引入 <code>highlightjs-line-numbers.js 并调用 hljs.lineNumbersOn()，否则默认无行号

所有资源走 CDN，不用下载解压，也不用管 shBrushXXX.js 对应关系

真正容易被忽略的是：无论用哪种方案，HTM 文件里的代码内容必须是纯文本形态（即 HTML 实体编码后的内容），而不是原始标签。漏掉这一步，高亮库根本不会处理——它只扫描 <code> 或 <pre class="brush:php;toolbar:false;"></pre> 里的文本节点，遇到未闭合标签就直接截断。