在网页中使用JavaScript显示代码主要有以下几种方式：使用HTML元素、使用JavaScript本身的内置方法、结合CSS样式、使用第三方库等。最常见的方式包括：使用<pre>和<code>标签、动态创建DOM元素、以及使用外部库如Highlight.js。以下是详细介绍：
一、使用HTML标签
1. 使用<pre>和<code>标签
<pre> 标签用于定义预格式化的文本，<code> 标签用于定义代码片段。通过这两个标签可以很方便地在网页中显示代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<style>
pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
code {
color: #d63384;
}
</style>
</head>
<body>
<h1>Displaying Code with HTML</h1>
<pre>
<code>
function sayHello() {
console.log('Hello, World!');
}
</code>
</pre>
</body>
</html>
2. 使用<textarea>标签
<textarea> 标签也是一种显示代码的简便方法，可以让用户复制代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
</head>
<body>
<h1>Displaying Code with Textarea</h1>
<textarea rows="10" cols="50">
function sayHello() {
console.log('Hello, World!');
}
</textarea>
</body>
</html>
二、使用JavaScript动态生成代码
1. 使用innerHTML插入代码
可以通过JavaScript的innerHTML属性动态地插入代码到页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<style>
pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
code {
color: #d63384;
}
</style>
</head>
<body>
<h1>Displaying Code with JavaScript</h1>
<pre id="codeBlock"></pre>
<script>
const code = `
function sayHello() {
console.log('Hello, World!');
}
`;
document.getElementById('codeBlock').innerHTML = `<code>${code}</code>`;
</script>
</body>
</html>
2. 使用createElement方法
使用createElement方法可以更加灵活地创建和插入DOM元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<style>
pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
code {
color: #d63384;
}
</style>
</head>
<body>
<h1>Displaying Code with JavaScript</h1>
<div id="codeContainer"></div>
<script>
const codeContainer = document.getElementById('codeContainer');
const pre = document.createElement('pre');
const code = document.createElement('code');
code.textContent = `
function sayHello() {
console.log('Hello, World!');
}
`;
pre.appendChild(code);
codeContainer.appendChild(pre);
</script>
</body>
</html>
三、结合CSS样式
通过CSS可以美化显示代码的效果，使其更加易读。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<style>
pre {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 10px;
border-radius: 5px;
overflow: auto;
}
code {
color: #66d9ef;
}
</style>
</head>
<body>
<h1>Displaying Code with CSS</h1>
<pre>
<code>
function sayHello() {
console.log('Hello, World!');
}
</code>
</pre>
</body>
</html>
四、使用第三方库
1. Highlight.js
Highlight.js 是一个非常流行的用于代码高亮显示的库。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<h1>Displaying Code with Highlight.js</h1>
<pre><code class="javascript">
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
</body>
</html>
2. Prism.js
Prism.js 也是一种非常流行的轻量级代码高亮显示库。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Code</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
</head>
<body>
<h1>Displaying Code with Prism.js</h1>
<pre><code class="language-javascript">
function sayHello() {
console.log('Hello, World!');
}
</code></pre>
</body>
</html>
总结
通过以上方法，您可以轻松在网页中显示代码。使用<pre>和<code>标签 是最简单直接的方法，使用JavaScript动态生成代码 提供了更多的灵活性，结合CSS样式 可以美化代码的显示效果，而使用第三方库如Highlight.js和Prism.js 则可以实现更高级的代码高亮显示功能。根据具体需求选择合适的方法，可以让您的网页内容更加丰富和专业。
相关问答FAQs：
1. 如何在网页中使用 JavaScript 显示代码？
要在网页中显示代码，可以使用 <code> 标签将代码包裹起来，然后使用 JavaScript 将其插入到网页中指定的位置。代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title>显示代码示例</title>
<style>
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}
</style>
</head>
<body>
<h1>代码示例</h1>
<pre id="code"></pre>
<script>
// JavaScript 代码
var code = "function helloWorld() {n console.log('Hello, World!');n}";
document.getElementById("code").innerText = code;
</script>
</body>
</html>
2. 如何使用 JavaScript 动态显示代码？
要在网页中动态显示代码，可以使用 JavaScript 的 DOM 操作，通过创建元素并设置其文本内容来实现。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>动态显示代码示例</title>
<style>
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}
</style>
</head>
<body>
<h1>动态显示代码示例</h1>
<pre id="code"></pre>
<script>
// JavaScript 代码
var code = "function helloWorld() {n console.log('Hello, World!');n}";
var pre = document.createElement("pre");
pre.innerText = code;
document.body.appendChild(pre);
</script>
</body>
</html>
3. 如何使用 JavaScript 格式化并高亮显示代码？
要在网页中格式化并高亮显示代码，可以使用一些现成的 JavaScript 库，如 Prism.js 或 Highlight.js。这些库提供了丰富的语法高亮功能，可以根据不同的编程语言自动着色代码。以下是一个使用 Prism.js 的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>代码高亮显示示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<style>
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}
</style>
</head>
<body>
<h1>代码高亮显示示例</h1>
<pre><code class="language-javascript">function helloWorld() {n console.log('Hello, World!');n}</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
</body>
</html>
通过上述代码示例，您可以使用 JavaScript 在网页中显示、动态显示和高亮显示代码。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3539346
