HUGO
Menu
GitHub 87548 stars Mastodon

transform.Highlight

Renders code with a syntax highlighter.

Syntax

transform.Highlight CODE LANG [OPTIONS]

Returns

template.HTML

Alias

highlight

The highlight function uses the Chroma syntax highlighter, supporting over 200 languages with more than 40 highlighting styles.

Arguments

The transform.Highlight shortcode takes three arguments.

CODE
(string) The code to highlight.
LANG
(string) The language of the code to highlight. Choose from one of the supported languages. This value is case-insensitive.
OPTIONS
(map or string) A map or comma-separated key-value pairs wrapped in quotation marks. Set default values for each option in your site configuration. The key names are case-insensitive.

Examples

{{ $input := `fmt.Println("Hello World!")` }}
{{ transform.Highlight $input "go" }}

{{ $input := `console.log('Hello World!');` }}
{{ $lang := "js" }}
{{ transform.Highlight $input $lang "lineNos=table, style=api" }}

{{ $input := `echo "Hello World!"` }}
{{ $lang := "bash" }}
{{ $opts := dict "lineNos" "table" "style" "dracula" }}
{{ transform.Highlight $input $lang $opts }}

Options

anchorLineNos
(bool) 是否將每個行號渲染為 HTML 錨元素,將周圍 span 元素的 id 屬性設置為行號。如果 lineNosfalse,則此選項無關。默認為 false
codeFences
(bool) 是否高亮代碼圍欄。默認為 true
guessSyntax
(bool) 如果 LANG 參數為空或設置為沒有相應 詞法分析器 的語言,是否自動檢測語言。如果無法自動檢測語言,則回退到純文本詞法分析器。默認為 false

Chroma 語法高亮器包含約 250 種語言的詞法分析器,但其中只有 5 種實現了自動語言檢測。

hl_Lines
(string) 要在高亮代碼中強調的行的空格分隔列表。要強調第 2、3、4 和 7 行,將此值設置為 2-4 7。此選項獨立於 lineNoStart 選項。
hl_inline
(bool) 是否在沒有包裝容器的情況下渲染高亮代碼。默認為 false
lineAnchors
(string) 在將行號渲染為 HTML 錨元素時,將此值前置到周圍 span 元素的 id 屬性。當頁面包含兩個或更多代碼塊時,這提供了唯一的 id 屬性。如果 lineNosanchorLineNosfalse,則此選項無關。
lineNoStart
(int) 在第一行顯示的數字。如果 lineNosfalse,則此選項無關。默認為 1
lineNos
(any) 控制行號顯示。默認為 false
  • true:啟用行號,由 lineNumbersInTable 控制。
  • false:禁用行號。
  • inline:啟用內聯行號(將 lineNumbersInTable 設置為 false)。
  • table:啟用基於表格的行號(將 lineNumbersInTable 設置為 true)。
lineNumbersInTable
(bool) 是否在 HTML 表格中渲染高亮代碼,包含兩個單元格。左表格單元格包含行號,右表格單元格包含代碼。如果 lineNosfalse,則此選項無關。默認為 true
noClasses
(bool) 是否使用內聯 CSS 樣式而不是外部 CSS 文件。默認為 true。要使用外部 CSS 文件,將此值設置為 false 並從命令行生成 CSS 文件:
hugo gen chromastyles --style=monokai > syntax.css
style
(string) 應用於高亮代碼的 CSS 樣式。區分大小寫。默認為 monokai。請參閱 語法高亮樣式
tabWidth
(int) 用此數量的空格替換高亮代碼中的每個制表符。如果 noClassesfalse,則此選項無關。默認為 4
wrapperClass
New in v0.140.2
(string) 用於高亮代碼最外層元素的類。默認為 highlight

Last updated: January 1, 0001
Improve this page