效果圖
1、下載JS庫
這裏用到了兩個js庫，一個是highlight.js，用於代碼的高亮顯示。
一個是highlightjs-line-numbers.js，用戶顯示行號的插件
highlight.js
進入下載地址：https://highlightjs.org/download/
選擇你要打包的語言，然後進行下載就可以啦
下載後解壓的目錄爲下圖所示，其中styles文件夾裏面的css都是代碼塊的主題顏色，可以選擇不同的css實現不同的主題。
highlightjs-line-numbers.js
gitHub地址：https://github.com/wcoder/highlightjs-line-numbers.js
可以直接使用cdn的形式引入，不需要下載。
2、使用
使用方法非常簡單，這裏就不做解釋了
需要注意的是，它默認會自動識別語言，如果識別後的代碼高亮部分和我們預期的不一樣可以在code標籤上加一個css樣式來指定語言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 導入需要的包 -->
<link rel="stylesheet" href="./highlight/styles/dracula.css">
<script src="./highlight/highlight.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
</head>
<body>
<h2>java代碼</h2>
<pre>
<!-- class="java" 也可以不加，會自動識別，但會有點差別 -->
<code class="java">
@Test
void testGetAll(){
List<Stu> stus = stuService.queryAllStu();
stus.forEach(e -> {
System.out.println(e);
});
}
</code>
</pre>
<h2>C#代碼</h2>
<pre>
<code>
//在panel中打開指定窗體，調用該方法時，只需傳入一個窗體對象即可
private void OpenFrm(Form frm)
{
frm.TopLevel = false;//取消非頂級窗體
frm.WindowState = FormWindowState.Maximized;//將窗體最大化
frm.FormBorderStyle = FormBorderStyle.None;//設爲無邊框
frm.Parent = this.palParent;//指定該窗體的父窗體
frm.Show();//展示窗體
}
</code>
</pre>
<script>
// 開啓代碼高亮
hljs.initHighlightingOnLoad();
// 行號顯示
hljs.initLineNumbersOnLoad ({ singleLine:true });
</script>
</body>
</html>