> For AI agents: the complete documentation index is available at https://shijin.space/llms.txt, the full documentation bundle is available at https://shijin.space/llms-full.txt.

# Cinderfolio-Shiki

[Shiki](https://github.com/shikijs/shiki) 是基于 TextMate 语法的代码高亮器，在渲染时生成带有语法颜色与字形的 HTML。


**深色**`g0``#121212`

默认

**浅色**`g16`bg`#fafaf8`

默认

**品牌色**`brand``#f97316`

默认

亮色 · 全网页生效

[下载 cf-shiki-light.json](https://shijin.space/cinderfolio/cf-shiki-light.json)[下载 cf-shiki-dark.json](https://shijin.space/cinderfolio/cf-shiki-dark.json)


**通用编程**


**C**

```c title="tasks.c · C11" lineNumbers
#include <stdbool.h>
#include <stdio.h>
#define MAX_SHOWN 2

typedef struct { const char *title; bool done; } Task;
typedef bool (*Predicate)(const Task *);

static bool is_pending(const Task *task) {
    return !task->done;
}

// 回调决定筛选条件，指针访问原数据，达到上限后提前结束。
static size_t visit(const Task tasks[], size_t count, Predicate accept) {
    size_t shown = 0;
    for (size_t i = 0; i < count; ++i) {
        const Task *task = &tasks[i];
        if (!accept(task)) continue; // [!code highlight]
        printf("%zu. %s\n", shown + 1, task->title);
        if (++shown == MAX_SHOWN) break;
    }
    return shown;
}

int main(void) {
    const Task tasks[] = {
        {.title = "调整配色", .done = true},
        {.title = "导出主题", .done = false},
        {.title = "检查示例", .done = false},
    };
#if defined(DEBUG)
    fprintf(stderr, "开始筛选待办任务\n");
#endif
    size_t count = sizeof tasks / sizeof tasks[0];
    size_t shown = visit(tasks, count, is_pending);
    return shown > 0 ? 0 : 1;
}
```


**C++**

```cpp title="vector.cpp · C++20" lineNumbers
#include <concepts>
#include <iostream>
#include <span>
#include <stdexcept>

using Scalar = double;

// 视图不复制数据；长度不匹配时停止计算。
template <std::floating_point T>
class Vec {
public:
    explicit Vec(std::span<const T> data) : data_(data) {}
    [[nodiscard]] T dot(const Vec& rhs) const {
        if (data_.size() != rhs.data_.size())
            throw std::invalid_argument("向量长度不一致");
        T total{};
        for (std::size_t i = 0; i < data_.size(); ++i)
            total += data_[i] * rhs.data_[i];
        return total;
    }
private:
    std::span<const T> data_;
};

int main() {
    constexpr Scalar x[]{1.0, 2.0, 3.0}, y[]{4.0, 5.0, 6.0};
    const Vec<Scalar> a{x}, b{y};
    const auto score = [&a, scale = 0.5](const auto& v) {
        return scale * a.dot(v);
    };
    try {
        std::cout << "加权点积 = " << score(b) << '\n';
    } catch (const std::invalid_argument& error) {
        std::cerr << error.what() << '\n';
        return 1;
    }
}
```


**Python**

```python title="tasks.py · Python 3.10+" lineNumbers
import json
from dataclasses import dataclass
from pathlib import Path

@dataclass(frozen=True)
class Task:
    id: int
    title: str
    done: bool = False
    owner: str | None = None

def load_tasks(path: Path) -> list[Task]:
    """读取任务；文件关闭由上下文管理器负责。"""
    with path.open(encoding="utf-8") as stream:
        data = json.load(stream)
    return [Task(**item) for item in data["tasks"]]

def summarize(tasks: list[Task]) -> dict[str, int]:
    counts: dict[str, int] = {}
    for task in tasks:
        if task.done:
            continue
        owner = task.owner or "未分配"
        counts[owner] = counts.get(owner, 0) + 1
    return counts

if __name__ == "__main__":
    try:
        tasks = load_tasks(Path("tasks.json"))
        for owner, count in summarize(tasks).items():
            print(f"{owner}: {count:02d} 项待办")
    except (OSError, ValueError) as error:
        print(f"读取失败：{error}")
```


**JavaScript**

```javascript title="tasks.js · JavaScript" lineNumbers
async function loadTasks(url, { limit = 3 } = {}) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }
    const { tasks = [] } = await response.json();
    // 先筛选，再排序；返回适合展示的数据。
    return tasks
        .filter(task => !task.done)
        .sort((a, b) => a.title.localeCompare(b.title))
        .slice(0, limit)
        .map(({ id, title, owner }) => ({
            id, title: title.trim(), owner: owner ?? "未分配",
        }));
}

async function main() {
    try {
        const pending = await loadTasks("/tasks.json", {
            limit: 5,
        });
        if (pending.length === 0) {
            console.log("全部完成");
            return;
        }
        for (const { title, owner } of pending) {
            console.log(`${owner}: ${title}`);
        }
    } catch (error) {
        console.error("读取失败：", error.message);
    }
}
main();
```


**TypeScript**

```typescript title="tasks.ts · TypeScript 4.9+" lineNumbers
interface Task {
    readonly id: number;
    title: string;
    done: boolean;
    owner?: string | null;
}
type State<T> =
    | { status: "ready"; data: T }
    | { status: "error"; message: string };

function pending<T extends Task>(items: readonly T[]): T[] {
    return items.filter(({ done }) => !done);
}

function summarize(state: State<readonly Task[]>): string {
    // 判别字段决定后续流程，也缩小可访问的类型。
    switch (state.status) {
        case "error":
            return `读取失败：${state.message}`;
        case "ready": {
            const names = pending(state.data).map(task => {
                const owner = task.owner?.trim() || "未分配";
                return `${owner}: ${task.title}`;
            });
            return names.join("\n") || "全部完成";
        }
    }
}

const state = {
    status: "ready",
    data: [{
        id: 1, title: "导出主题", done: false, owner: null,
    }],
} satisfies State<Task[]>;
console.log(summarize(state));
```


**C#**

```csharp title="Program.cs · C# 10 / .NET 6+" lineNumbers
using System;
using System.Linq;
using System.Threading.Tasks;

record TaskItem(int Id, string Title, bool Done);

class Program {
    static async Task<TaskItem[]> LoadAsync() {
        await Task.Yield();
        return new[] {
            new TaskItem(1, "调整配色", true),
            new TaskItem(2, "导出主题", false),
        };
    }

    static string Describe(TaskItem task) => task switch {
        { Done: true } => "已完成",
        { Title.Length: 0 } => throw new ArgumentException("标题为空"),
        _ => $"{task.Id}: {task.Title}",
    };

    static async Task Main() {
        try {
            var tasks = await LoadAsync();
            // LINQ 按顺序筛选和排序，模式匹配决定输出内容。
            var pending = tasks.Where(task => !task.Done)
                .OrderBy(task => task.Id).ToArray();
            if (pending.Length == 0) {
                Console.WriteLine("全部完成");
                return;
            }
            foreach (var task in pending)
                Console.WriteLine(Describe(task));
        } catch (ArgumentException error) {
            Console.Error.WriteLine(error.Message);
        }
    }
}
```


**Rust**

```rust title="tasks.rs · Rust 2021" lineNumbers
#[derive(Debug)]
struct Task<'a> {
    title: &'a str,
    done: bool,
}

fn parse_task(line: &str) -> Result<Task<'_>, String> {
    let (title, state) = line
        .split_once(',')
        .ok_or("缺少状态")?;
    let done = match state.trim() {
        "done" => true,
        "todo" => false,
        other => return Err(format!("未知状态：{other}")),
    };
    Ok(Task { title: title.trim(), done })
}

fn main() -> Result<(), String> {
    // 任意一行失败就返回错误；成功时保留借用的标题。
    let tasks = ["调整配色,done", "导出主题,todo"]
        .into_iter()
        .map(parse_task)
        .collect::<Result<Vec<_>, _>>()?;
    let pending: Vec<_> = tasks.iter()
        .filter(|task| !task.done)
        .map(|task| task.title)
        .collect();

    if let Some(first) = pending.first() {
        println!("下一项：{first}");
    } else {
        println!("全部完成");
    }
    println!("{} 项：{}", pending.len(), pending.join(", "));
    Ok(())
}
```


**Go**

```go title="tasks.go · Go" lineNumbers
package main

import (
    "encoding/json"
    "fmt"
    "os"
)

type Task struct {
    Title string `json:"title"`
    Done  bool   `json:"done"`
}

func loadTasks(path string) ([]Task, error) {
    file, err := os.Open(path)
    if err != nil {
        return nil, err
    }
    defer file.Close()
    var data struct { Tasks []Task `json:"tasks"` }
    if err := json.NewDecoder(file).Decode(&data); err != nil {
        return nil, fmt.Errorf("解析任务：%w", err)
    }
    return data.Tasks, nil
}

func main() {
    tasks, err := loadTasks("tasks.json")
    if err != nil {
        fmt.Fprintln(os.Stderr, err)
        return
    }
    // 已完成的任务直接跳过；只输出待办。
    for index, task := range tasks {
        if task.Done { continue }
        fmt.Printf("%d. %s\n", index + 1, task.Title)
    }
}
```


**Java**

```java title="Tasks.java · Java 17+" lineNumbers
import java.util.List;

public class Tasks {
    enum State { TODO, DONE }
    record Task(String title, State state) {
        Task {
            if (title.isBlank()) {
                throw new IllegalArgumentException("标题为空");
            }
        }
    }

    static String label(Task task) {
        return switch (task.state()) {
            case TODO -> "待办：" + task.title();
            case DONE -> "完成：" + task.title();
        };
    }

    public static void main(String[] args) {
        try {
            var tasks = List.of(
                new Task("调整配色", State.DONE),
                new Task("导出主题", State.TODO)
            );
            // 流操作按顺序表达筛选和转换。
            var pending = tasks.stream()
                .filter(task -> task.state() == State.TODO)
                .map(Tasks::label)
                .toList();
            for (var line : pending) {
                System.out.println(line);
            }
        } catch (IllegalArgumentException error) {
            System.err.println(error.getMessage());
        }
    }
}
```



**网页与组件**


**HTML**

```html title="tasks.html · HTML" lineNumbers
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <title>待办任务</title>
  </head>
  <body>
    <main class="tasks" aria-labelledby="title">
      <h1 id="title">Cinderfolio &amp; Shiki</h1>
      <!-- 标签呈现结构；属性表达交互与关联。 -->
      <form action="/tasks" method="get">
        <label for="query">筛选任务</label>
        <input id="query" name="q" type="search"
               placeholder="输入标题" />
        <button type="submit">搜索</button>
      </form>
      <ul>
        <li data-id="1"><a href="/tasks/1">导出主题</a></li>
        <li>
          <button type="button" disabled>全部完成</button>
        </li>
      </ul>
      <details>
        <summary>下载说明</summary>
        <p>主题以 <code>JSON</code> 格式保存。</p>
      </details>
    </main>
  </body>
</html>
```


**CSS**

```css title="tasks.css · CSS" lineNumbers
/* 同一布局通过变量、状态和断点调整。 */
.tasks {
    --gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    padding: calc(var(--gap) * 1.5);
    color: var(--cf-foreground);
    background: var(--cf-background);
    border: 1px solid var(--cf-border);
}
.tasks > :first-child { grid-column: 1 / -1; }
.tasks [data-done="true"] { opacity: 0.6; }
.tasks button:is(:hover, :focus-visible) {
    border-color: var(--cf-accent-brand);
    transform: translateY(-1px);
}
.tasks button:disabled { cursor: default; }

@media (max-width: 640px) {
    .tasks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
    .tasks button { transition: transform 150ms ease; }
}
```


**SCSS**

```scss title="tasks.scss · SCSS" lineNumbers
$gap: 1rem;
$densities: (compact: 0.5rem, relaxed: 1.5rem);

@mixin panel($padding: $gap, $bordered: true) {
  display: grid;
  gap: $gap;
  padding: $padding;
  @if $bordered {
    border: 1px solid var(--cf-border);
  }
}

.tasks {
  @include panel($gap * 1.5);
  color: var(--cf-foreground);
  &__title { margin-block: 0 $gap; }
  &:hover { border-color: var(--cf-accent-brand); }

  // 数据生成变体，插值连接选择器名称。
  @each $name, $spacing in $densities {
    &--#{$name} { gap: $spacing; }
  }
}
```


**JavaScript JSX**

```jsx title="TaskList.jsx · React JSX" lineNumbers
import { useState } from "react";

export default function TaskList({ initialTasks = [] }) {
  const [tasks, setTasks] = useState(initialTasks);
  const pending = tasks.filter(task => !task.done);

  function toggle(id) {
    // 返回新对象，让状态更新与事件的关系更清楚。
    setTasks(current => current.map(task =>
      task.id === id ? { ...task, done: !task.done } : task
    ));
  }

  return (
    <section aria-label="待办任务">
      <h2>待办 {pending.length} 项</h2>
      {tasks.length === 0 ? <p>暂无任务</p> : (
        <ul>
          {tasks.map(({ id, title, done }) => (
            <li key={id}>
              <button
                aria-pressed={done}
                onClick={() => toggle(id)}
              >
                {done ? "✓ " : "○ "}{title}
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}
```


**TypeScript JSX**

```tsx title="TaskList.tsx · React TSX" lineNumbers
interface Task {
  readonly id: number;
  title: string;
  done: boolean;
}
type Props = {
  tasks: readonly Task[];
  loading?: boolean;
  onToggle: (id: Task["id"]) => void;
};

export function TaskList({
  tasks, loading = false, onToggle,
}: Props) {
  if (loading) return <p role="status">正在读取…</p>;
  const pending = tasks.filter(task => !task.done);

  // 类型约束输入，事件和条件渲染描述交互流程。
  return (
    <section aria-label="待办任务">
      <h2>待办 {pending.length} 项</h2>
      {pending.length > 0 ? pending.map(task => (
        <button key={task.id} onClick={() => onToggle(task.id)}>
          {task.title}
        </button>
      )) : <p>全部完成</p>}
    </section>
  );
}
```


**Vue**

```vue title="TaskList.vue · Vue 3.3+" lineNumbers
<script setup lang="ts">
import { computed, ref } from "vue";

type Task = { id: number; title: string; done: boolean };
const props = defineProps<{ title: string }>();
const emit = defineEmits<{ complete: [id: number] }>();
const tasks = ref<Task[]>([
  { id: 1, title: "调整配色", done: true },
  { id: 2, title: "导出主题", done: false },
]);
const pending = computed(() =>
  tasks.value.filter(task => !task.done)
);
function complete(task: Task) {
  task.done = true;
  emit("complete", task.id);
}
</script>

<template>
  <section class="tasks">
    <h2>{{ props.title }} · {{ pending.length }}</h2>
    <ul v-if="pending.length">
      <li v-for="task in pending" :key="task.id">
        <button @click="complete(task)">
          {{ task.title }}
        </button>
      </li>
    </ul>
    <p v-else>全部完成</p>
  </section>
</template>

<style scoped>
.tasks { display: grid; gap: 0.75rem; }
</style>
```


**Svelte**

```svelte title="TaskList.svelte · Svelte 5" lineNumbers
<script>
  let { title = "待办任务" } = $props();
  let tasks = $state([
    { id: 1, title: "调整配色", done: true },
    { id: 2, title: "导出主题", done: false },
  ]);
  let pending = $derived(tasks.filter(task => !task.done));
  function toggle(task) {
    task.done = !task.done;
  }
</script>

<section>
  <h2>{title} · {pending.length}</h2>
  {#each tasks as task (task.id)}
    <button class:done={task.done} onclick={() => toggle(task)}>
      {task.title}
    </button>
  {:else}
    <p>暂无任务</p>
  {/each}
  {#if pending.length === 0 && tasks.length > 0}
    <p>全部完成</p>
  {/if}
</section>

<style>
  .done { text-decoration: line-through; }
</style>
```



**数据与配置**


**JSON**

```json title="tasks.json · JSON" lineNumbers
{
    "name": "Cinderfolio",
    "version": 1,
    "enabled": true,
    "retryDelay": 1.5e2,
    "colors": {
        "g0": "#121212", "g16": "#fafaf8", "brand": "#f97316"
    },
    "targets": ["Rspress", "Pele", "Shiki"],
    "tasks": [
        {
            "id": 1, "title": "调整配色",
            "done": true, "owner": "Lin"
        },
        {
            "id": 2, "title": "导出主题",
            "done": false, "owner": null
        }
    ],
    "message": "保存为 \"JSON\"\n支持亮暗主题"
}
```


**YAML**

```yaml title="theme.yaml · YAML" lineNumbers
# 锚点共享默认值，局部配置覆盖其中的字段。
defaults: &defaults
  enabled: true
  retries: 3
  timeout: 10

preview:
  <<: *defaults
  retries: 1
  brand: "#f97316"
  outputs: [cf-rspress.css, cf-pele.css]
  tasks:
    - title: 调整配色
      done: true
    - title: 导出主题
      done: false
      owner: null
  description: |
    一套颜色适配网页、图表与代码。
    换行保留在字符串中。
  summary: >-
    多行文字合并为一段，
    不保留结尾换行。
```


**TOML**

```toml title="theme.toml · TOML" lineNumbers
name = "Cinderfolio"
enabled = true
updated = 2026-10-24T09:00:00+08:00
limits = { retries = 3, timeout = 10.0 }

[colors]
ink = "#121212"
paper = "#fafaf8"
brand = "#f97316"

# 数组表描述多个导出目标。
[[exports]]
target = "Rspress"
files = ["cf-rspress.css"]

[[exports]]
target = "Shiki"
files = [
  "cf-shiki-light.json",
  "cf-shiki-dark.json",
]
description = """
一份配置，
同时生成亮暗主题。
"""
```


**SQL**

```sql title="tasks.sql · SQL" lineNumbers
WITH projects(id, name) AS (
    VALUES (1, 'Cinderfolio'), (2, 'Pele')
), tasks(project_id, title, done, priority) AS (
    VALUES
        (1, '调整配色', TRUE, 2),
        (1, '导出主题', FALSE, 3),
        (2, '检查图表', FALSE, 1)
)
-- 先关联并筛选，再按项目汇总未完成的任务。
SELECT
    p.name,
    COUNT(*) AS pending,
    SUM(CASE WHEN t.priority >= 3 THEN 1 ELSE 0 END) AS urgent,
    CASE WHEN COUNT(*) > 1 THEN '多项待办'
         ELSE '即将完成' END AS status
FROM projects AS p
JOIN tasks AS t ON t.project_id = p.id
WHERE t.done = FALSE
GROUP BY p.id, p.name
HAVING COUNT(*) > 0
ORDER BY urgent DESC, pending DESC;
```



**脚本与构建**


**Bash**

```bash title="themes.sh · Bash" lineNumbers
#!/usr/bin/env bash
set -euo pipefail

root="${1:-cinderfolio/dist}"
files=("cf-rspress.css" "cf-pele.css" "cf-shiki-light.json")

report() {
    local path="$1"
    if [[ ! -f "$path" ]]; then
        printf '缺少文件：%s\n' "$path" >&2
        return 1
    fi
    case "$path" in
        *.json) printf '主题：%s\n' "${path##*/}" ;;
        *.css)  printf '样式：%s\n' "${path##*/}" ;;
    esac
}

# 函数的退出状态决定分支；缺少文件时继续检查下一项。
count=0
for file in "${files[@]}"; do
    if report "$root/$file"; then
        count=$((count + 1))
    else
        continue
    fi
done
printf '找到 %d / %d 个文件\n' "$count" "${#files[@]}"
printf '%s\n' "${files[@]}" | sort
```


**PowerShell**

```powershell title="themes.ps1 · PowerShell" lineNumbers
param(
    [string]$ThemePath = "./cinderfolio/dist",
    [switch]$DarkOnly
)

$files = Get-ChildItem $ThemePath -Filter "cf-shiki-*.json" |
    Sort-Object Name
foreach ($file in $files) {
    try {
        $raw = Get-Content $file.FullName -Raw -ErrorAction Stop
        $theme = $raw | ConvertFrom-Json -ErrorAction Stop
        if ($DarkOnly -and $theme.type -ne "dark") {
            continue
        }
        # 管道输出对象，后续仍可按属性筛选和格式化。
        [PSCustomObject]@{
            Name = $theme.name
            Type = $theme.type
            Background = $theme.colors.'editor.background'
        }
    } catch {
        Write-Warning "$($file.Name): $($_.Exception.Message)"
    }
}
```


**Lua**

```lua title="tasks.lua · Lua 5.4" lineNumbers
local tasks = {
    { id = 1, title = "调整配色", done = true },
    { id = 2, title = "导出主题", done = false },
}

local function pending(items)
    local result = {}
    for _, task in ipairs(items) do
        if not task.done then
            table.insert(result, task)
        end
    end
    table.sort(result, function(a, b) return a.id < b.id end)
    return result
end

local function describe(task)
    assert(task.title ~= "", "标题为空")
    return string.format("%d: %s", task.id, task.title)
end

-- pcall 将错误转换为状态值，单项失败不阻止后续处理。
for _, task in ipairs(pending(tasks)) do
    local ok, label = pcall(describe, task)
    if ok then
        print(label)
    else
        io.stderr:write(label, "\n")
    end
end

return { pending = pending, describe = describe }
```


**Dockerfile**

```dockerfile title="Dockerfile · Docker" lineNumbers
ARG NODE_VERSION=22
FROM node:${NODE_VERSION}-alpine AS build
WORKDIR /app
COPY cinderfolio/ ./cinderfolio/

# 同一层生成并检查产物；反斜杠延续命令。
RUN node cinderfolio/build.mjs --out-dir /export \
    && test -s /export/cf-shiki-dark.json

FROM nginx:alpine
COPY --from=build /export/ /usr/share/nginx/html/
EXPOSE 80
HEALTHCHECK --interval=30s \
    CMD wget -q --spider http://127.0.0.1/ || exit 1
```


**Makefile**

```make title="Makefile · Make" lineNumbers
CXX ?= c++
CXXFLAGS := -std=c++20 -O2 -Wall
TARGET := vector
SOURCES := vector.cpp
OBJECTS := $(SOURCES:.cpp=.o)

ifeq ($(DEBUG),1)
CXXFLAGS += -g -DDEBUG
endif

.PHONY: all clean
all: $(TARGET)

# 模式规则编译每个源文件，自动变量连接目标与依赖。
%.o: %.cpp
	$(CXX) $(CXXFLAGS) -c $< -o $@

$(TARGET): $(OBJECTS)
	$(CXX) $(OBJECTS) -o $@

clean:
	$(RM) $(TARGET) $(OBJECTS)
```


**CMake**

```cmake title="CMakeLists.txt · CMake" lineNumbers
cmake_minimum_required(VERSION 3.20)
project(VectorDemo VERSION 1.0 LANGUAGES CXX)
option(VECTOR_WARNINGS "Enable compiler warnings" ON)

add_executable(vector vector.cpp)
target_compile_features(vector PRIVATE cxx_std_20)
# 生成器表达式在对应构建配置下生效。
target_compile_definitions(vector PRIVATE
  $<$<CONFIG:Debug>:DEBUG>
)

if(VECTOR_WARNINGS)
  if(MSVC)
    target_compile_options(vector PRIVATE /W4)
  else()
    target_compile_options(vector PRIVATE
      -Wall -Wextra -Wpedantic
    )
  endif()
endif()

message(STATUS "Building ${PROJECT_NAME} ${PROJECT_VERSION}")
```



**文档与文本**


**纯文本伪代码**

```text title="任务处理流程 · 纯文本伪代码" lineNumbers
输入：任务集合 tasks，最多展示 limit = 5 项
输出：按负责人分组的待办列表

try:
    records ← 读取并解析 tasks
catch 读取错误:
    输出错误并结束

groups ← 空映射
for each task in records:
    if task.done:
        continue
    owner ← task.owner ?? "未分配"
    groups[owner] ← groups[owner] ∪ {task.title}

for each (owner, titles) in groups:
    输出 owner, titles[0:limit]

return groups
```


**Markdown**

```markdown title="README.md · Markdown" lineNumbers
# Cinderfolio

先看 **流程与调用**，再读 *注释与说明*。

## 使用方法

1. 选择亮暗主题。
2. 调整颜色并下载 JSON。
   - [x] 网页预览
   - [ ] 检查其他语言

> 配色与字形共同决定信息层级。
> 字面量中的 `<>` 不表示比较运算。

~~~python
for task in tasks:
    if not task.done:
        print(task.title)
~~~

| 内容 | 字形 |
| :--- | ---: |
| 流程 | 粗体 |
| 注释 | 斜体 |

[Shiki 主题][theme] · ![预览图](./preview.png "主题预览")

[theme]: https://shiki.style/guide/load-theme "自定义主题"
```


**TeX / LaTeX**

```latex title="vector.tex · TeX / LaTeX" lineNumbers
\documentclass{article}
\usepackage{amsmath,amssymb}
\newcommand{\vect}[1]{\mathbf{#1}}
\begin{document}

\section{Vector score}
% A weighted score with a threshold.
For $\vect{x}, \vect{y} \in \mathbb{R}^n$, define
\begin{align}
  s &= \alpha \sum_{i=1}^{n} x_i y_i, & \alpha &= 0.5,
  \label{eq:score} \\
  f(s) &= \begin{cases}
    s, & s > 0, \\
    0, & s \leq 0.
  \end{cases}
\end{align}

See Equation~\eqref{eq:score} for the score.
\begin{itemize}
  \item \textbf{Read the flow}:
    compute $s$, then choose a branch.
  \item \emph{Check the details}:
    indices, constants and references.
\end{itemize}
\end{document}
```


**Mermaid 源码**

```mmd title="pipeline.mmd · Mermaid 源码" lineNumbers
flowchart TD
    %% 实线描述主流程，虚线补充失败路径。
    A([开始]) --> B[读取任务]
    B --> C{读取成功?}
    C -->|否| X[输出错误]
    C -->|是| D
    subgraph processing [处理任务]
        D{还有任务?} -->|是| E[取下一项]
        E --> F{已完成?}
        F -->|是| D
        F -->|否| G[按负责人分组]
        G --> D
    end
    D -->|否| H[(待办结果)]
    H --> Z([结束])
    X -.-> Z
```


**正则表达式**

```regexp title="settings.regex · 正则表达式（Python）" lineNumbers
(?mx)
^
(?P<key>[A-Za-z_]\w*)       (?# 配置项名称)
[ \t]* = [ \t]*
(?P<value>
    "(?: \\. | [^"\\] )*"   (?# 带转义的引号字符串)
    | [^\#\r\n]+?           (?# 或不带引号的值)
)
[ \t]* (?: \# [^\r\n]* )?   (?# 可选的行尾注释)
$
```


**Diff**

```diff title="tasks.py · Diff" lineNumbers
diff --git a/tasks.py b/tasks.py
--- a/tasks.py
+++ b/tasks.py
@@ -1,3 +1,6 @@
 def pending(tasks, limit=5):
-    names = [task.title for task in tasks]
+    names = [task.title for task in tasks if not task.done]
+    if not names:
+        return "全部完成"
     return ", ".join(names[:limit])
@@ -5 +8,2 @@
-print(pending(tasks))
+for owner, tasks in groups.items():
+    print(f"{owner}: {pending(tasks)}")
```




显示职责

- 流程导航`#d65b06``darker` · 粗体

分支、循环、声明、指令与提前返回


- 阅读主体`#121212``g0` · 粗体

函数、变量、属性、名称标签与表达式


- 注释说明`#121212``g0` · 斜体

注释、文档说明与斜体文本


- 数据正文`#121212``g0` · 常规

默认代码、字面量、标签与普通正文


- 辅助信息`#3e3e3d``g3` · 常规

类型及其边界、修饰符、声明附注与参数标签


- 结构细节`#696968``g6` · 常规

分隔符、字符串引号、排版边界与引用



底色 `g16`bg`#fafaf8`Diff上下文+ 新增− 删除! 修改