给出代码高亮的处理方法和代码
时间: 2024-06-08 12:05:19 浏览: 15
代码高亮是在显示代码时,将不同类型的代码以不同的颜色或背景色标记出来,以便让读者更容易理解和阅读代码。常见的代码高亮处理方法有两种:
1. 使用CSS样式表
在HTML文件中,可以使用CSS样式表将代码高亮。具体实现方法如下:
HTML代码:
```html
<pre class="code">
<code>
int main(){
printf("Hello, World!");
return 0;
}
</code>
</pre>
```
CSS代码:
```css
pre.code {
background-color: #f1f1f1;
font-family: consolas, monospace;
font-size: 14px;
line-height: 1.5;
padding: 10px;
}
pre.code code {
color: #333;
display: block;
white-space: pre-wrap;
}
```
2. 使用JavaScript插件
也可以使用JavaScript插件来实现代码高亮。比较常用的插件有highlight.js和prism.js,使用方法如下:
HTML代码:
```html
<pre><code class="language-c">
int main(){
printf("Hello, World!");
return 0;
}
</code></pre>
```
JavaScript代码:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
```
使用highlight.js时,需要引入对应的CSS文件,可以在官网下载或使用CDN链接。
参考文献:
- highlight.js官网:https://highlightjs.org/
- prism.js官网:https://prismjs.com/
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)