网页中如何正确插入代码？

在网页中插入代码是前端开发中常见的需求，无论是展示技术教程、分享项目片段，还是记录开发笔记，都需要正确呈现代码格式，本文将详细介绍多种在网页中插入代码的方法，涵盖基础到进阶的技巧,并分析不同场景下的适用性。

基础方法：使用pre与code标签

HTML提供了专门用于展示代码的语义化标签。<pre>标签保留文本中的空格和换行符，<code>标签则用于标记代码文本,两者结合使用可以基本保留代码格式，

<pre><code>
function greet() {
    console.log("Hello, World!");
}
</code></pre>

这种方法的优点是简单直接，无需额外依赖，适合展示少量代码，但缺点也很明显：无法自动高亮语法，且缺少行号、复制按钮等增强功能，对于长代码块，<pre>标签的默认滚动体验可能不够友好，需要通过CSS进一步优化，例如添加max-height: 300px; overflow-y: auto;等样式。

进阶方案：集成代码高亮库

当需要展示的代码量较大或需要语法高亮时，可以借助第三方库实现，目前主流的代码高亮库包括Prism.js、Highlight.js和CodeMirror等，以Prism.js为例,使用步骤如下：

1. 引入CSS和JS文件：通过CDN或本地文件引入Prism的核心文件及主题样式，

   <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

2. 标记代码块：使用<pre><code class="language-javascript">包裹代码，并添加语言类名：

   <pre><code class="language-javascript">const data = [1, 2, 3];</code></pre>

3. 初始化高亮：Prism会自动解析class属性并应用语法高亮，支持包括JavaScript、Python、CSS在内的数百种语言。

这类库的优势在于支持丰富的语言、主题和插件（如行号、复制按钮、代码折叠等），Prism.js的轻量级设计使其加载速度快，而Highlight.js则支持按需加载语言模块,适合对性能要求极高的场景。

交互式代码编辑器：集成Monaco Editor

对于需要在线编辑或实时运行的代码场景（如在线IDE、编程练习平台），可以使用Monaco Editor，这是VS Code的核心编辑器，提供了代码补全、错误提示、主题切换等高级功能,基本集成方式如下：

1. 引入依赖：通过npm或CDN加载Monaco Editor：

   <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>

2. 初始化编辑器：在JavaScript中创建编辑器实例：

   require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
   require(['vs/editor/editor.main'], function () {
       monaco.editor.create(document.getElementById('container'), {
           value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
           language: 'javascript'
       });
   });

   Monaco Editor的复杂度较高，适合专业场景，但会显著增加页面体积，且需要处理跨域、Worker加载等技术细节。

表格对比不同方法

为更直观地展示不同插入代码方式的优缺点,可参考下表：

注意事项

1. XSS防护：直接插入用户提交的代码存在安全风险，需对代码进行HTML转义，例如将<替换为<，>替换为>。
2. 性能优化：对于大型代码库，避免一次性加载所有语言高亮规则，可使用Prism.js的prism.loadLanguages()按需加载。
3. 响应式设计：通过CSS确保代码块在小屏幕设备上可正常滚动，例如添加pre { white-space: pre-wrap; word-wrap: break-word; }。

相关问答FAQs

Q1: 如何在代码高亮中添加行号？
A: 使用Prism.js时，可引入line-numbers插件并添加class="line-numbers"，同时通过CSS设置pre code { counter-reset: line-numbering; }和pre .line-numbers-rows:before { content: counter(line-numbering); }实现行号显示，部分主题（如Prism的line-numbers主题）已内置行号样式,直接添加类名即可。

Q2: 如何实现代码块的“一键复制”功能？
A: 可结合Prism.js的copy-to-clipboard插件，或使用原生JavaScript实现，基本思路是：为代码块添加复制按钮，点击时通过navigator.clipboard.writeText()获取代码文本并写入剪贴板。

document.querySelectorAll('.copy-button').forEach(button => {
    button.addEventListener('click', () => {
        const code = button.previousElementSibling.textContent;
        navigator.clipboard.writeText(code);
        button.textContent = '已复制!';
        setTimeout(() => button.textContent = '复制', 2000);
    });
});