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

title	description	keywords	date	lastmod	categories	tags	url
Hugo 内置的 Chroma 语法高亮	描述下 Chroma 所支持的各种语法及高亮效果展示	Chroma,语法,高亮	2022-06-07T19:09:52+08:00	2022-06-07T19:09:52+08:00	示例文章 语法	语法 高亮 Chroma	demo/syntax-highlighting.html

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

以下通过 Hugo 内置短代码 highlight 和 Markdown 代码块方式分别验证不同语言的代码块渲染效果并能正确高亮显示，有关优化语法突出显示的更多信息，请参阅 Hugo 文档。

编程语言

GO

{{</* 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

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

print "Hello, world!"

Git 对比

*** /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 文档

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

数据内容

JSON 数据

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

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 {

  // 其他代码
  ......

  > .chroma {
    position: relative;
    
   
      // 修复代码块溢出问题
      pre {
        overflow-wrap: break-word;
        white-space: pre-wrap;
        line-break: anywhere;
        word-break: break-all; 
        overflow-x: auto;
      }
    }
  }
}

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