前端如何展示代码,并保留代码格式,请帮我写一个完整的demo
时间: 2024-04-14 20:25:31 浏览: 13
当前端需要展示代码并保留代码格式时,可以使用 `<pre>` 和 `<code>` 标签来包裹代码,并使用 CSS 样式来进行格式化。下面是一个完整的示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Code Display Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<pre><code class="javascript">
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>
<script src="highlight.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
hljs.highlightAll();
});
</script>
</body>
</html>
```
CSS (styles.css):
```css
pre {
background-color: #f4f4f4;
padding: 10px;
}
code {
font-family: "Courier New", Courier, monospace;
}
```
在上述示例中,我们使用了 `<pre>` 和 `<code>` 标签来包裹需要展示的代码,并为 `<pre>` 添加了一些样式来设置背景色和内边距。我们还为 `<code>` 设置了字体样式,以保证代码的等宽字体显示。
我们引入了 `highlight.js` 库,并在页面加载完成后调用 `hljs.highlightAll()` 来触发代码高亮。
你可以将上述代码保存为 HTML 文件,并将 `highlight.js` 和 `styles.css` 文件放置在相同目录下。然后在浏览器中打开该 HTML 文件,你将看到带有高亮代码的页面。
这个示例使用了 `highlight.js` 库来进行代码高亮,你可以根据需要自定义语言类型和样式。希望这个完整的示例对你有帮助!