hugo-theme-next/exampleSite/content/post/09-syntax-highlighting/index.md

---
title: "Hugo 内置的 Chroma 语法高亮"
description: "描述下 Chroma 所支持的各种语法及高亮效果展示"
keywords: "Chroma,语法,高亮"

date: 2022-06-07T19:09:52+08:00
lastmod: 2022-06-07T19:09:52+08:00

categories:
 - 示例文章
 - 语法
tags:
  - 语法
  - 高亮
  - Chroma

url: demo/syntax-highlighting.html
---

Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。

以下通过 Hugo 内置短代码 `highlight` 和 `Markdown` 代码块方式分别验证不同语言的代码块渲染效果并能正确高亮显示，有关优化语法突出显示的更多信息，请参阅 [Hugo 文档](https://gohugo.io/getting-started/configuration-markup#highlight)。

<!--more-->

## 编程语言

### GO

```makrdown
{{</* 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 */>}}
```

{{< 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 >}}

### Java

```java
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

``` python
print "Hello, world!"
```

### Git 对比

```diff {hl_lines=[4,"6-7"], linenos=true}
*** /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
```

```diff {hl_lines=[4,"6-7"], linenos=false}
*** /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 文件

``` makefile {linenos=false}
CC=gcc
CFLAGS=-I.

hellomake: hellomake.o hellofunc.o
     $(CC) -o hellomake hellomake.o hellofunc.o -I.
```

### Markdown 文档

``` markdown
**bold**
*italics*
[link](www.example.com)
```

## 数据内容

### JSON 数据

``` json
{"employees":[
    {"firstName":"John", "lastName":"Doe"},
]}
```

### XML 内容

``` xml
<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
</employees>
```

### SQL 查询

{{< highlight sql >}}

SELECT column_name,column_name
FROM
  Table
WHERE column_name = "condition"
{{< / highlight >}}

### 自动猜测代码高亮显示

```
.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脚本等各主流的代码语言高亮显示，可自行测试效果。
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								---
 								title: "Hugo 内置的 Chroma 语法高亮"
 								description: "描述下 Chroma 所支持的各种语法及高亮效果展示"
 								keywords: "Chroma,语法,高亮"
 								date: 2022-06-07T19:09:52+08:00
 								lastmod: 2022-06-07T19:09:52+08:00
 								categories:
-												:lipstick: Add support subcategory feature.

											
										
										
											2023-06-24 11:08:17 +08:00
+								 - 示例文章
 								 - 语法
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								tags:
 								  - 语法
 								  - 高亮
 								  - Chroma
-												:pencil: Update the link prefix to demo.

											
										
										
											2024-07-21 11:51:35 +08:00
+								url: demo/syntax-highlighting.html
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								---
 								Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。
 								以下通过 Hugo 内置短代码 `highlight` 和 `Markdown` 代码块方式分别验证不同语言的代码块渲染效果并能正确高亮显示，有关优化语法突出显示的更多信息，请参阅 [Hugo 文档](https://gohugo.io/getting-started/configuration-markup#highlight)。
 								<!--more-->
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								## 编程语言
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### GO
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
+								```makrdown
 								{{</* 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 */>}}
 								```
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								{{< 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 >}}
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### Java
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								```java
 								import javax.swing.JFrame;  //Importing class JFrame
 								import javax.swing.JLabel;  //Importing class JLabel
 								public class HelloWorld {
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
+								  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
 								  }
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								}
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### Python
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								``` python
 								print "Hello, world!"
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### Git 对比
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
-												:bug: Fixed the issue of highlighting comma format error.

											
										
										
											2023-06-27 23:01:13 +08:00
+								```diff {hl_lines=[4,"6-7"], linenos=true}
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
+								*** /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
 								```
 								```diff {hl_lines=[4,"6-7"], linenos=false}
 								*** /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
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								## 文件
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### Make 文件
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								``` makefile {linenos=false}
 								CC=gcc
 								CFLAGS=-I.
 								hellomake: hellomake.o hellofunc.o
 								     $(CC) -o hellomake hellomake.o hellofunc.o -I.
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### Markdown 文档
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								``` markdown
 								**bold**
 								*italics*
 								[link](www.example.com)
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								## 数据内容
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### JSON 数据
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								``` json
 								{"employees":[
 								    {"firstName":"John", "lastName":"Doe"},
 								]}
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### XML 内容
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								``` xml
 								<employees>
 								    <employee>
 								        <firstName>John</firstName> <lastName>Doe</lastName>
 								    </employee>
 								</employees>
 								```
-												:lipstick: Add list number before table of content and article's head outline.

											
										
										
											2022-09-29 10:24:41 +08:00
+								### SQL 查询
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								{{< highlight sql >}}
 								SELECT column_name,column_name
 								FROM
 								  Table
 								WHERE column_name = "condition"
 								{{< / highlight >}}
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
+								### 自动猜测代码高亮显示
 								```
 								.highlight {
-												:fire: :pencil: Fixed #148 Add English language support.

											
										
										
											2025-01-29 21:29:33 +08:00
+								  //Other codes
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
+								  ......
 								  > .chroma {
 								    position: relative;
-												:fire: :pencil: Fixed #148 Add English language support.

											
										
										
											2025-01-29 21:29:33 +08:00
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
-												:fire: :pencil: Fixed #148 Add English language support.

											
										
										
											2025-01-29 21:29:33 +08:00
+								    //Fix code block overflow issue
 								    pre {
 								      overflow-wrap: break-word;
 								      white-space: pre-wrap;
 								      line-break: anywhere;
 								      word-break: break-all;
 								      overflow-x: auto;
-												:bug: Fixed #155,  the code block overflow in the markdown file.

											
										
										
											2025-01-21 20:44:34 +08:00
+								    }
 								  }
 								}
 								```
-												:art: Reset some article content.

											
										
										
											2022-06-09 22:05:13 +08:00
 								除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。