Summary
Describe the various syntax and highlighting effects supported by Chroma
Hugo provides very fast syntax highlighting through Chroma, and now uses Chroma as code block highlighting support in Hugo. It is built into the Go language, and the speed is really, really fast. Most importantly, it is also compatible with the Pygments method we used before.
The following verifies the rendering effect of code blocks in different languages and their correct highlighting through Hugo’s built-in short code ‘highlight’ and ‘Markodown’ code blocks. For more information on optimizing syntax highlighting, please refer to the
Hugo Documentation
.
Programming language
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 Comparison
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
File
Make file
CC=gcc
CFLAGS=-I.
hellomake: hellomake.o hellofunc.o
$(CC) -o hellomake hellomake.o hellofunc.o -I.
Markdown document
1
2
3
| **bold**
*italics*
[link](www.example.com)
|
Data content
JSON data
1
2
3
| {"employees":[
{"firstName":"John", "lastName":"Doe"},
]}
|
XML Content
1
2
3
4
5
| <employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
</employees>
|
SQL Query
1
2
3
4
| SELECT column_name,column_name
FROM
Table
WHERE column_name = "condition"
|
Auto guess code highlighted
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;
}
}
}
|
In addition to the code highlighting listed above, it also supports highlighting in mainstream code languages such as C, C++, HTML, CSS, Shell scripts, etc., and can be tested for effectiveness on its own.