上一篇
html展示网站源代码
使用HTML的`
标签包裹源代码，配合CSS white-space: pre; 保留格式，示例： ，` html ， ，<!DOCTYPE html> ，<html>...</html> ， ，` ，通过转义符（如<`）避免解析，即可直观
核心概念
HTML 展示网站源代码指通过网页技术将当前页面或外部页面的 HTML 代码以可视化形式呈现给用户，常用于代码教学、调试演示或技术文档场景。
静态展示方式
| 方法 | 适用场景 | 示例代码 | 特点 |
|---|---|---|---|
<pre><code> | 固定代码片段 | html<pre><code><div>Hello</div></code></pre> | 保留空格和换行，需手动维护 |
<textarea> | 可编辑代码块 | html<textarea rows="10"><div>Hello</div></textarea> | 支持用户修改，无语法高亮 |
<xmp>（已废弃） | 历史方案 | html<xmp><div>Hello</div></xmp> | 仅 IE 支持，不建议使用 |
动态获取与展示
当前页面源码
<textarea id="source" rows="20"></textarea>
<script>
document.getElementById('source').value = document.documentElement.outerHTML;
</script>外部页面源码（需后端支持）
fetch('https://example.com/page')
.then(response => response.text())
.then(data => {
document.getElementById('external-source').textContent = data;
});代码高亮方案
| 库名 | 引入方式 | 效果 |
|---|---|---|
| Prism.js | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css"> | 支持多语言高亮 |
| Highlight.js | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/default.css"> | 轻量级，自动检测语言 |
示例：
<pre><code class="language-html"><!DOCTYPE html>...</code></pre> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>
注意事项
- 跨域限制：直接通过 JavaScript 获取外部网站源码会因 CORS 策略失败，需通过服务器代理解决。
- 性能影响：渲染大体积源码可能拖慢页面加载，建议按需加载或分片显示。
- 安全风险：允许用户输入代码并执行时需防范 XSS 攻击，建议对输出内容进行转义。
问题与解答
Q1：如何实现代码编辑与实时预览联动？
A1：通过监听 <textarea> 的输入事件，动态更新预览区内容。
const editor = document.querySelector('#editor');
const preview = document.querySelector('#preview');
editor.addEventListener('input', () => {
preview.innerHTML = editor.value;
});Q2：外部网站源码无法获取怎么办？
A2：若目标网站未开启 CORS，需通过服务器端代理请求，例如使用 Node.js 搭建代理接口：
const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.get('/proxy', async (req, res) => {
const response = await fetch(req.query.url);
const text = await response.text();
res.send(text);
});
