代码框与语法高亮

MetaBlog 示例

本文阅读量次

Abstract

MetaBlog 会把 lstlisting 和 minted 环境渲染为带行号、交互按钮和 Chroma 语法高亮的代码框。

1lstlisting

lstlisting 环境会从 language 可选参数读取代码语言。其他可选参数目前会被忽略。

package main

import "fmt"

func main() {
	fmt.Println("你好，MetaBlog")
}Go
package main
 
import "fmt"
 
func main() {
	fmt.Println("你好，MetaBlog")
}

2minted

minted 环境会从必选参数读取代码语言。可选参数会被忽略。

from dataclasses import dataclass

@dataclass
class Article:
    title: str
    slug: str

def render(article: Article) -> str:
    return f"<h1>{article.title}</h1>"python
from dataclasses import dataclass
 
@dataclass
class Article:
    title: str
    slug: str
 
def render(article: Article) -> str:
    return f"<h1>{article.title}</h1>"

3长行

代码框标题栏中的 wrap 按钮可以切换视觉自动换行。行号仍然对应原始源码行。

const message = "这是一行刻意写得很长的代码，用来展示 MetaBlog 文章页面中代码框的自动换行切换效果。";
console.log(message);JavaScript
const message = "这是一行刻意写得很长的代码，用来展示 MetaBlog 文章页面中代码框的自动换行切换效果。";
console.log(message);

4普通 verbatim

如果只需要保留原始文本而不做语法高亮，可以使用 verbatim：

verbatim 会把 \section、%、{braces} 这类内容保留为原始文本。

text

1	verbatim 会把 \section、%、{braces} 这类内容保留为原始文本。

1	package main
2
3	import "fmt"
4
5	func main() {
6	fmt.Println("你好，MetaBlog")
7	}

1	from dataclasses import dataclass
2
3	@dataclass
4	class Article:
5	title: str
6	slug: str
7
8	def render(article: Article) -> str:
9	return f"<h1>{article.title}</h1>"

1	const message = "这是一行刻意写得很长的代码，用来展示 MetaBlog 文章页面中代码框的自动换行切换效果。";
2	console.log(message);