前端如何展示代码,并保留代码格式
时间: 2024-04-19 11:24:12 浏览: 19
要在前端展示代码并保留代码格式,你可以使用一些代码高亮的库或工具。其中比较常用的是highlight.js和Prism.js。
以下是使用highlight.js展示代码的示例:
1. 首先,引入highlight.js的CSS和JavaScript文件:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
```
2. 在需要展示代码的地方,使用`<pre>`和`<code>`标签包裹代码,并添加相应的语言类名,如`language-javascript`:
```html
<pre><code class="language-javascript">
// 这里是你的代码
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>
```
3. 在页面加载完成后,调用highlight.js的初始化函数,使代码高亮生效:
```html
<script>
document.addEventListener('DOMContentLoaded', function() {
hljs.highlightAll();
});
</script>
```
以上代码将会在页面中展示带有语法高亮的JavaScript代码。
如果你想使用Prism.js,步骤类似。你需要引入Prism.js的CSS和JavaScript文件,并在需要展示代码的地方使用相应的类名,如`language-javascript`。然后,页面加载完成后,调用Prism.js的初始化函数即可。
这些工具都有丰富的语法支持,你可以根据需要选择适合的工具。希望这对你有帮助!