hugo-theme-next/exampleSite/content/post/09-syntax-highlighting/index.en-us.md
2025-01-29 21:29:33 +08:00

4.0 KiB

Title description Keywords date lastmod categories tags url
Hugo's Built in Chroma Grammar Highlighting Describe the various syntax and highlighting effects supported by Chroma Chroma, syntax, highlighting 2025-01-29T20:09:52+08:00 2025-01-29T20:09:52+08:00
Example
Grammar
Grammar
Highlight
Chroma
demo/syntax-highlighting.html

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

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

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

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

Data content

JSON data

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

XML Content

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

SQL Query

{{< highlight sql >}}

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

Auto guess code highlighted

.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.