代码块和短代码示例

2025-09-27 2026-02-10

代码块

plaintext

1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

1
2
3
4
5
6
7
8
9
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}

html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <title>测试页面</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 class="header">Hello World!</h1>
  <div id="container">
    <p>This is a paragraph</p>
  </div>
</body>
</html>

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* CSS 示例 */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f0f0f0;
}

.header {
  color: #2c3e50;
  text-align: center;
}

#container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 7);
console.log(`计算结果: ${result}`);

// 异步函数示例
async function fetchData(url) {
  try {
    const response = await fetch(url);
    return response.json();
  } catch (error) {
    console.error('请求失败:', error);
  }
}

Python

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# Python 示例
def fibonacci(n):
    """生成斐波那契数列"""
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# 使用生成器
fib_seq = list(fibonacci(10))
print(f"斐波那契数列: {fib_seq}")

# 列表推导式示例
squares = [x**2 for x in range(1, 6)]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// Go 示例
package main

import (
	"fmt"
	"time"
)

func main() {
	// 并发示例
	go printNumbers("A")
	go printNumbers("B")
	time.Sleep(1 * time.Second)
}

func printNumbers(prefix string) {
	for i := 1; i <= 3; i++ {
		fmt.Printf("%s: %d\n", prefix, i)
		time.Sleep(200 * time.Millisecond)
	}
}

yaml

1
2
3
4
5
6
7
8
theme_config:
  features:
    - responsive
    - dark_mode
    - pjax
  social:
    github: "https://github.com"
    twitter: "https://twitter.com"

bash

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# Bash 脚本示例
#!/bin/bash

# 备份目录
BACKUP_DIR="/var/backups"
LOG_FILE="$BACKUP_DIR/backup.log"

echo "开始备份: $(date)" >> $LOG_FILE
rsync -av /home/user $BACKUP_DIR
echo "备份完成" >> $LOG_FILE

java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Java 示例
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello Java!");
        
        // Lambda 表达式示例
        List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
        names.stream()
             .filter(name -> name.startsWith("C"))
             .forEach(System.out::println);
    }
}

c++

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// C++ 示例
#include <iostream>
#include <vector>

int main() {
    std::vector<int> numbers = {1, 2, 3, 4, 5};
    
    // 范围循环
    for (const auto& num : numbers) {
        std::cout << num * 2 << " ";
    }
    
    // 智能指针
    auto ptr = std::make_unique<int>(42);
    std::cout << "\n指针值: " << *ptr << std::endl;
    
    return 0;
}

php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
class User {
    private $name;
    
    public function __construct($name) {
        $this->name = $name;
    }
    
    public function greet() {
        return "Hello, " . $this->name;
    }
}

$user = new User("Alice");
echo $user->greet();

// 数组处理
$numbers = [1, 2, 3, 4];
$squared = array_map(fn($n) => $n ** 2, $numbers);

ruby

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
class Person
  attr_accessor :name
  
  def initialize(name)
    @name = name
  end
  
  def introduce
    puts "你好，我是#{@name}"
  end
end

person = Person.new("小明")
person.introduce

# 块语法示例
[1, 2, 3].each do |num|
  puts "数字: #{num}"
end

sql

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
-- SQL 示例
CREATE TABLE Users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) UNIQUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 插入数据
INSERT INTO Users (username, email)
VALUES ('john_doe', 'john@example.com');

-- 查询示例
SELECT * FROM Users 
WHERE created_at > '2023-01-01'
ORDER BY username ASC;

Swift

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import Foundation

struct Book {
    var title: String
    var author: String
}

let books = [
    Book(title: "Swift编程", author: "张三"),
    Book(title: "iOS开发", author: "李四")
]

// 使用高阶函数
let bookTitles = books.map { $0.title }
print("所有书名: \(bookTitles)")

// 可选绑定
if let firstBook = books.first {
    print("第一本书: \(firstBook.title)")
}

TypeScript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

// 泛型函数示例
function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello TS");
console.log(result);

json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": { "text": "...", "sensitive": false }
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": { "text": "...", "sensitive": false }
  }
]

短代码

仅支持一些基础的经常用的自定义短代码

时间线 timeline

参数	说明
title	标题
color	default(留空) / blue / pink / red / purple / orange / green

留空

2026

02-02

内容1

blue

2025

12-02

内容1

pink

2025

10-02

内容1

留空

1
2
3
4
5
6
7
{{< timeline "2026" >}}

<!-- time 02-02 -->
内容1
<!-- /time -->

{{< /timeline >}}

blue

1
2
3
4
5
6
7
{{< timeline "2025,blue" >}}

<!-- time 12-02 -->
内容1
<!-- /time -->

{{< /timeline >}}

pink

1
2
3
4
5
6
7
{{< timeline "2025,pink" >}}

<!-- time 10-02 -->
内容1
<!-- /time -->

{{< /timeline >}}

行内文本 span

创建带样式的 span 元素, 更灵活的书写，实现彩色文字
落霞与孤鹜齐飞，秋水共长天一色

1
{{< span "样式参数1 样式参数2" "文本内容" >}}

颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
字体: logo, code

彩色文字
一句话中可以插入各种颜色的标签，红色、黄色、绿色、青色、蓝色、灰色。
超大号文字
标题就是超大号文字
Hugo
The world’s fastest framework for building websites

1
2
{{< span "center large" "Hugo" >}}
{{< span "center small" "The world’s fastest framework for building websites" >}}

段落文本 p

创建带样式的 p 元素, 更灵活的书写，实现彩色文字

1
{{< p "样式参数1 样式参数2" "文本内容" >}}

颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
字体: logo, code

彩色文字
一段话中可以插入各种颜色的标签，

红色

、

黄色

、

绿色

、

青色

、

蓝色

、

灰色

。

超大号文字
标题就是超大号文字
Hugo
The world’s fastest framework for building websites

1
2
{{< p "center large" "Hugo" >}}
{{< p "center small" "The world’s fastest framework for building websites" >}}

链接卡片 link

1
{{< link href="链接" title="标题" desc="描述" i="" >}}

参数	说明
href	链接(必须)
title	标题(可选)
desc	描述(可选)
i	支持图片链接和 Font Awesome 图标(可选)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{< link href="https://github.com" title="GitHub" desc="代码托管平台" i="fab fa-github" >}}

{{< link href="/cc" title="GitHub" desc="代码托管平台" >}}

{{< link href="https://github.com" title="GitHub" desc="代码托管平台" >}}

{{< link "//bilibili.com" "Bilibili" "一个视频网站" "fab fa-bilibili" >}}

{{< link href="mailto:contact@example.com" title="邮件" desc="邮件链接" i="fas fa-envelope" >}}

{{< link href="tel:+1234567890" title="电话" desc="电话链接" i="fas fa-phone" >}}

提示块 note

1
2
3
{{< note "类型" >}}
文本内容
{{< /note >}}

类型：note、tip、important、warning、caution、success

基本类型（无自定义标题）

NOTE

这是备注类型

TIP

这是使用小贴士类型

IMPORTANT

重要提示信息

WARNING

警告：请注意这个操作

CAUTION

此操作不可撤销

带自定义标题

小贴士

这是使用小贴士类型

操作成功

您的操作已成功完成

重要

重要提示信息

小心

请小心操作

基本类型（无自定义标题）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{{< note "note" >}}
这是备注类型
{{< /note >}}

{{< note "tip" >}}
这是使用小贴士类型
{{< /note >}}

{{< note "important" >}}
重要提示信息
{{< /note >}}

{{< note "warning" >}}
警告：请注意这个操作
{{< /note >}}

{{< note "caution" >}}
此操作不可撤销
{{< /note >}}

带自定义标题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{< note "tip" "小贴士" >}}
这是使用小贴士类型
{{< /note >}}

{{< note "success" "操作成功" >}}
您的操作已成功完成
{{< /note >}}

{{< note "important" "重要" >}}
重要提示信息
{{< /note >}}

{{< note "caution" "小心" >}}
请小心操作
{{< /note >}}

分栏 tabs

语法

1
2
3
4
5
{{< tabs [Unique Name] [index] >}}
{{% tab [Tab Name] [icon] %}}
文本内容
{{% /tab %}}
{{< /tabs >}}

参数	说明
[Unique Name]	tabs标签的唯一名称,当前页面必须是唯一的
[index]	默认展示第几个tab，默认为1(可选)
[Tab Name]	tab标题
[icon]	Font Awesome 图标(可选)

这是第一个标签的内容。

支持 Markdown

python

1
print("Hello, World!")

这个是默认选中的标签页

美女