讓你的代碼亮起來 highlight.js


highlight.js是一讓你的代碼在html頁面中高亮起的的一個插件,官方提供了十幾款高亮的樣式,說明文檔也易懂,很是不錯。

引用 highlight.js 並初始化

highlight.js支持34種常用語言,國內cdn建議地址如下:

<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/default.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

可以選擇一個喜歡的樣式

給 highlight.js 增加行號

增加行號需要引用一個插件:highlightjs-line-numbers.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.5.0/highlightjs-line-numbers.min.js"></script>
//初始化插件
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>

看看最終效果吧


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM