总结摘要
描述下 Chroma 所支持的各种语法及高亮效果展示
Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。
以下通过 Hugo 内置短代码 highlight 和 Markdown 代码块方式分别验证不同语言的代码块渲染效果并能正确高亮显示，有关优化语法突出显示的更多信息，请参阅
Hugo 文档
。
编程语言
GO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
func GetTitleFunc(style string) func(s string) string {
switch strings.ToLower(style) {
case "go":
return strings.Title
case "chicago":
return transform.NewTitleConverter(transform.ChicagoStyle)
default:
return transform.NewTitleConverter(transform.APStyle)
}
}
{{< / highlight >}}
|
199
200
201
202
203
204
205
206
207
208
| func GetTitleFunc(style string) func(s string) string {
switch strings.ToLower(style) {
case "go":
return strings.Title
case "chicago":
return transform.NewTitleConverter(transform.ChicagoStyle)
default:
return transform.NewTitleConverter(transform.APStyle)
}
}
|
Java
1
2
3
4
5
6
7
8
9
10
11
12
| import javax.swing.JFrame; //Importing class JFrame
import javax.swing.JLabel; //Importing class JLabel
public class HelloWorld {
public static void main(String[] args) {
JFrame frame = new JFrame(); //Creating frame
frame.setTitle("Hi!"); //Setting title frame
frame.add(new JLabel("Hello, world!"));//Adding text to frame
frame.pack(); //Setting size to smallest
frame.setLocationRelativeTo(null); //Centering frame
frame.setVisible(true); //Showing frame
}
}
|
Python
Git 对比
1
2
3
4
5
6
7
8
9
10
| *** /path/to/original ''timestamp''
--- /path/to/new ''timestamp''
***************
*** 1 ****
! This is a line.
--- 1 ---
! This is a replacement line.
It is important to spell
-removed line
+new line
|
*** /path/to/original ''timestamp''
--- /path/to/new ''timestamp''
***************
*** 1 ****
! This is a line.
--- 1 ---
! This is a replacement line.
It is important to spell
-removed line
+new line
文件
Make 文件
CC=gcc
CFLAGS=-I.
hellomake: hellomake.o hellofunc.o
$(CC) -o hellomake hellomake.o hellofunc.o -I.
Markdown 文档
1
2
3
| **bold**
*italics*
[link](www.example.com)
|
数据内容
JSON 数据
1
2
3
| {"employees":[
{"firstName":"John", "lastName":"Doe"},
]}
|
XML 内容
1
2
3
4
5
| <employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
</employees>
|
SQL 查询
1
2
3
4
| SELECT column_name,column_name
FROM
Table
WHERE column_name = "condition"
|
自动猜测代码高亮显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .highlight {
//Other codes
......
> .chroma {
position: relative;
//Fix code block overflow issue
pre {
overflow-wrap: break-word;
white-space: pre-wrap;
line-break: anywhere;
word-break: break-all;
overflow-x: auto;
}
}
}
|
除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。
