alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔥 📝 Fixed #148 Add English language support.

Browse Source
This commit is contained in:
elkan1788
2025-01-29 21:29:33 +08:00
parent ee7ce903ff
commit 5190eb1920
44 changed files with 1701 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
exampleSite/content/post/09-syntax-highlighting/index.en-us.md Normal file
View File

@@ -0,0 +1,188 @@
---
Title: "Hugo's Built in Chroma Grammar Highlighting"
description: Describe the various syntax and highlighting effects supported by Chroma
Keywords: "Chroma, syntax, highlighting"
date: 2025-01-29T20:09:52+08:00
lastmod: 2025-01-29T20:09:52+08:00
categories:
- Example
- Grammar
tags:
- Grammar
- Highlight
- Chroma
url: 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](https://gohugo.io/getting-started/configuration-markup#highlight).
<!--more-->
## Programming language
### 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 Comparison
```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
```
## File
### Make file
``` makefile {linenos=false}
CC=gcc
CFLAGS=-I.
hellomake: hellomake.o hellofunc.o
$(CC) -o hellomake hellomake.o hellofunc.o -I.
```
### Markdown document
``` markdown
**bold**
*italics*
[link](www.example.com)
```
## Data content
### JSON data
``` json
{"employees":[
{"firstName":"John", "lastName":"Doe"},
]}
```
### XML Content
``` xml
<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.

188
exampleSite/content/post/09-syntax-highlighting/index.md Normal file
View File

@@ -0,0 +1,188 @@
---
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脚本等各主流的代码语言高亮显示，可自行测试效果。