××××

💻 代码块语法示例

📂纸鸢博客配置/文档类说明
💬

纸鸢博客支持的代码块语法完整示例指南

📅发布于2026-04-03
⏱️阅读时间30 分钟
📝8837 字
📁分类Markdown
🏷️标签
Markdown代码块语法示例指南

💻 代码块语法示例

本文档详细介绍纸鸢博客中支持的所有代码块语法特性，包含完整的语法示例和效果展示。

💡 提示：本文档中的所有语法示例均已在纸鸢博客中测试通过，可直接复制使用。

🎯 基本代码块

1️⃣ 无语法高亮的代码块

语法：

```
/* 💕 代码语言图标 - SVG 数据 URI */
$language-icons: (
  // 前端语言
  html: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect fill='%23e34f26' width='256' height='256' rx='30'/%3E%3Ctext fill='%23ffffff' font-family='Arial' font-size='100' font-weight='bold' x='50%25' y='55%25' text-anchor='middle' dominant-baseline='middle'%3EHTML%3C/text%3E%3C/svg%3E"),
  
  // 默认图标
  default: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiIgdmlld0JveD0iMCAwIDI2IDI2Ij48ZyBpZD0iX3gzMV81Ij48cGF0aCBkPSJtNi41NDAxNjExIDI1aDEyLjkxOTkyMTljMS45Nzk5ODA1IDAgMy41ODk4NDM4LTEuNjE5OTk1MSAzLjU4OTg0MzgtMy41OTk5NzU2di0xNi43OTk5ODc4YzAtMS45ODk5OTAyLTEuNjA5ODYzMy0zLjYwMDAzNjYtMy41ODk4NDM4LTMuNjAwMDM2NmgtOC4yOTAwMzkxYy0uOTE1MjQ5OCAwLTEuNzU3ODUwNi4zMTQ0MjE3LTIuNSAxLjAxMDAwOThsLTQuNjU5OTEyMSA0LjYxOTk5NTFjLS42NzUxMTEuNjc1MTExMy0xLjA2MDA1ODYgMS41NjU3NjU0LTEuMDYwMDU4NiAyLjU1MDA0ODh2MTIuMjE5OTcwN2MwIDEuOTc5OTgwNSAxLjYxMDEwNzUgMy41OTk5NzU2IDMuNTkwMDg3OSAzLjU5OTk3NTZ6bTEwLjQ5ODA0NjktMTMuMTMyMjAyMWMtLjM5MDYyNS0uMzkwMTM2Ny0uMzkwNjI1LTEuMDIzNDM3NSAwLTEuNDE0MDYyNXMxLjAyMzQzNzUtLjM5MDYyNSAxLjQxNDA2MjUgMGwxLjUwNjgzNTkgMS41MDYzNDc3Yy4xODc1LjE4NzUuMjkyOTY4OC40NDE4OTQ1LjI5Mjk2ODguNzA3MDMxM3MtLjEwNTQ2ODguNTE5NTMxMy0uMjkyOTY4OC43MDcwMzEzbC0xLjUwNjgzNTkgMS41MDYzNDc3Yy0uMzkwNjEzNi4zOTA2MTQ1LTEuMDIzNDI2MS4zOTA2MzY0LTEuNDE0MDYyNSAwLS4zOTA2MjUtLjM5MDYyNS0uMzkwNjI1LTEuMDIzOTI1OCAwLTEuNDE0MDYyNWwuNzk5ODA0Ny0uNzk5MzE2NHptLTUuODA3NjE3MiA0LjIzMzM5ODQgMS44ODc2OTUzLTYuNzVjLjE0ODQzNzUtLjUzMTczODMuNzA4OTg0NC0uODQxNzk2OSAxLjIzMjQyMTktLjY5MzM1OTQuNTMxMjUuMTQ4NDM3NS44NDE3OTY5LjcwMDE5NTMuNjkzMzU5NCAxLjIzMjQyMTlsLTEuODg3Njk1MyA2Ljc1Yy0uMTQ4MjU1My41MzE4MzU2LS43MDIwNDQ1Ljg0MzI0ODQtMS4yMzI0MjE5LjY5MzM1OTQtLjUzMTI1LS4xNDg0Mzc1LS44NDE3OTY5LS43MDAxOTUzLS42OTMzNTk0LTEuMjMyNDIxOXptLTUuMTg5NDUzMS0zLjQ4NDM3NSAxLjUwNjgzNTktMS41MDYzNDc3Yy4zOTA2MjUtLjM5MDYyNSAxLjAyMzQzNzUtLjM5MDYyNSAxLjQxNDA2MjUgMHMuMzkwNjI1IDEuMDIzOTI1OCAwIDEuNDE0MDYyNWwtLjc5OTgwNDcuNzk5MzE2NC43OTk4MDQ3Ljc5OTMxNjRjLjM5MDYyNS4zOTAxMzY3LjM5MDYyNSAxLjAyMzQzNzUgMCAxLjQxNDA2MjUtLjM5MDYxNDUuMzkwNjE0NS0xLjAyMzQyNjUuMzkwNjM2NC0xLjQxNDA2MjUgMGwtMS41MDY4MzU5LTEuNTA2MzQ3N2MtLjE4NzUtLjE4NzUtLjI5Mjk2ODgtLjQ0MTg5NDUtLjI5Mjk2ODgtLjcwNzAzMTNzLjEwNTQ2ODgtLjUxOTUzMTEuMjkyOTY4OC0uNzA3MDMxMXoiPjwvcGF0aD48L2c+PC9zdmc+")
);

@function get-language-icon($language) {
  @if map-has-key($language-icons, $language) {
    @return map-get($language-icons, $language);
  } @else {
    @return map-get($language-icons, default);
  }
}
```

效果：

const hello = "world";
console.log(hello);

🎨 带语法高亮的代码块

2️⃣ JavaScript 示例

语法：

```javascript
const hello = "world";
console.log(hello);

function greet(name) {
  return `Hello, ${name}!`;
}
```

效果：

const hello = "world";
console.log(hello);

function greet(name) {
  return `Hello, ${name}!`;
}

📝 行内代码

3️⃣ 行内代码使用

语法：

使用 `npm install` 安装依赖

在 JavaScript 中，`const` 用于声明常量

函数 `console.log()` 用于输出日志

效果：

使用 npm install 安装依赖

在 JavaScript 中，const 用于声明常量

函数 console.log() 用于输出日志

📝 代码带标题

语法：

```javascript 一个标题
const hello = "world";
console.log(hello);

function greet(name) {
  return `Hello, ${name}!`;
}
```

效果：

const hello = "world";
console.log(hello);

function greet(name) {
  return `Hello, ${name}!`;
}

📝 超宽代码文本示例

语法：

{
      avatar: '/assets/zhiyuan/gura.avif',
      name: '九原',
      description: '斯特利速递精英快递员兼代理店长，代号「夜莺」。使用双枪进行战斗的远程魔法输出角色，擅长通过「致命玫约」机制对敌人造成持续伤害和清算爆发，是功能性控场与输出兼备的S级角色。',
      catchphrase: '致命玫约，一枪清场！',
      organization: {
        name: '斯特利速递',
        color: 'accent',
        description: '海特洛最可靠的快递服务组织'
},
}

📊 支持的代码语言列表

纸鸢博客使用 Shiki 提供代码语法高亮，支持以下常见语言：

语言 代码标识 示例
JavaScript javascript, js javascript
TypeScript typescript, ts typescript
HTML html html
CSS css, less css
SCSS scss, sass scss
JSON json json
Bash/Shell bash, sh, zsh, shell bash
Python python, py python
Java java java
React/JSX jsx, tsx, react jsx
Vue vue vue
C++ cpp, c, c++ cpp
C# csharp, cs, c# csharp
Go go, golang go
Rust rust, rs rust
PHP php php
Ruby ruby, rb ruby
Swift swift swift
Kotlin kotlin kotlin
Node.js nodejs, node javascript data-lang="nodejs"
Markdown markdown, md markdown
SQL sql sql
YAML yaml, yml yaml
XML xml xml

🎨 语言图标展示

纸鸢博客为支持的编程语言提供了精美的 SVG 图标，显示在代码块左上角。

默认语言图标

没有填写代码语言的代码块

前端语言图标

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

JavaScript

const greeting = "Hello World";
console.log(greeting);

function calculateSum(a, b) {
    return a + b;
}

TypeScript

interface User {
    id: number;
    name: string;
    email?: string;
}

const user: User = {
    id: 1,
    name: "张三"
};

Vue

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script setup>
defineProps({
    msg: String
})
</script>

<style scoped>
.hello {
    color: #42b983;
}
</style>

React

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

Sass/SCSS

$primary-color: #3498db;
$secondary-color: #2ecc71;

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include flex-center;
    background: $primary-color;
    
    &:hover {
        background: $secondary-color;
    }
}

后端语言图标

Python

def fibonacci(n):
    """生成斐波那契数列"""
    if n <= 0:
        return []
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

print(fibonacci(10))

Java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
        
        Calculator calc = new Calculator();
        System.out.println(calc.add(5, 3));
    }
}

class Calculator {
    public int add(int a, int b) {
        return a + b;
    }
}

PHP

<?php
function greet($name) {
    return "Hello, " . $name . "!";
}

$users = ["张三", "李四", "王五"];
foreach ($users as $user) {
    echo greet($user) . "\n";
}
?>

C++

#include <iostream>
#include <vector>

int main() {
    std::vector<int> numbers = {1, 2, 3, 4, 5};
    
    for(int num : numbers) {
        std::cout << num << " ";
    }
    
    return 0;
}

C#

using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello, C#!");
        
        var calculator = new Calculator();
        Console.WriteLine(calculator.Add(5, 3));
    }
}

class Calculator {
    public int Add(int a, int b) {
        return a + b;
    }
}

Go

package main

import "fmt"

func main() {
    fmt.Println("Hello, Go!")
    
    result := add(5, 3)
    fmt.Printf("5 + 3 = %d\n", result)
}

func add(a, b int) int {
    return a + b
}

Rust

fn main() {
    println!("Hello, Rust!");
    
    let numbers = vec![1, 2, 3, 4, 5];
    for num in &numbers {
        print!("{} ", num);
    }
}

Swift

import Foundation

func greet(name: String) -> String {
    return "Hello, \(name)!"
}

let names = ["张三", "李四", "王五"]
for name in names {
    print(greet(name: name))
}

Kotlin

fun main() {
    println("Hello, Kotlin!")
    
    val numbers = listOf(1, 2, 3, 4, 5)
    numbers.forEach { num ->
        print("$num ")
    }
}

fun add(a: Int, b: Int): Int {
    return a + b
}

数据与配置语言图标

JSON

{
    "name": "纸鸢博客",
    "version": "1.0.0",
    "description": "一个精美的博客系统",
    "author": "白木",
    "features": ["Markdown", "代码高亮", "响应式设计"],
    "config": {
        "theme": "dark",
        "language": "zh-CN"
    }
}

YAML

name: 纸鸢博客
version: 1.0.0
description: 一个精美的博客系统
author: 白木
features:
  - Markdown
  - 代码高亮
  - 响应式设计
config:
  theme: dark
  language: zh-CN

XML

<?xml version="1.0" encoding="UTF-8"?>
<blog>
    <name>纸鸢博客</name>
    <version>1.0.0</version>
    <author>白木</author>
    <features>
        <feature>Markdown</feature>
        <feature>代码高亮</feature>
    </features>
</blog>

Markdown

# 标题

## 二级标题

这是一段**粗体**和*斜体*文本。

- 列表项 1
- 列表项 2
- 列表项 3

[链接](https://gl.baimu.live)

Bash/Shell

#!/bin/bash

echo "欢迎使用纸鸢博客"

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build

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
);

-- 查询数据
SELECT * FROM users WHERE created_at > '2024-01-01';

💡 最佳实践

1️⃣ 始终指定语言

  • 始终为代码块指定语言，以获得正确的语法高亮
  • 如果不确定语言，可以使用 text 或不指定

2️⃣ 保持代码缩进一致

// 好的示例 - 缩进一致
function example() {
  if (condition) {
    doSomething();
  }
}

// 不好的示例 - 缩进混乱
function example() {
if (condition) {
   doSomething();
    }
}

3️⃣ 添加注释说明

对于长代码，考虑添加注释说明：

# 计算斐波那契数列的前n项
def fibonacci(n):
    """
    生成斐波那契数列
    
    参数:
        n: 需要生成的项数
    
    返回:
        包含斐波那契数列的列表
    """
    if n <= 0:
        return []
    
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    
    return fib

4️⃣ 代码块中的特殊字符

如果需要在代码块中显示 ```，可以使用更多个反引号包裹：

````markdown
```javascript
const code = "示例";
```
````

📝 示例文档模板

---
title: 文档标题
description: 文档描述
date: 2026-04-03
tags: 标签1、标签2
cover: /assets/cover-image.jpg
url: /custom-path
---

# 文档标题

## 代码示例

```javascript
// 代码示例
const example = "Hello World";
console.log(example);
```

```python
# Python 示例
def hello():
    print("Hello World")
```

🕊️ 白木 原创开发 🔗 gl.baimu.live