内容能力

主题在标准 Markdown 上增加了写作常用能力，并保持静态输出。功能设计参考 Theme Plume 的公开文档，但实现基于 Astro 和 Markdown-it。

代码块

代码块支持 Shiki 双主题高亮、标题、行号和指定行高亮。

export const siteConfig = {
  origin: 'https://example.com',
  logo: '/img/logo.svg',
}

代码注释语法支持聚焦、高亮、差异、警告、错误与词高亮，控制注释不会出现在输出中：

const plain = '普通行'
const focused = '聚焦行'
const removed = false
const added = true
const warning = '注意'
const error = '错误'
const highlighted = '高亮'
const greeting = 'Hello Hello'

长代码块可从指定行开始折叠：

.one { color: red; }
.two { color: orange; }
.three { color: yellow; }
.four { color: green; }
.five { color: blue; }
.six { color: indigo; }
.seven { color: violet; }
.eight { color: black; }

脚注和表格

脚注适合补充来源或术语说明。^[1]

表格右上角可复制为 HTML 或 Markdown。

行内扩展与环境预设

Emoji、上标和下标可直接使用：🎉 💯，X²，H₂O。

全局引用、缩写和内容注释只需在 markdown.env 中配置一次，之后可在任意页面使用：Astro 是一个 SSG 。

Markdown 文件链接会自动解析到最终永久链接，例如站点配置。

提示容器

Obsidian 兼容

Wiki 链接、内容嵌入、Callout 与 %% 注释默认开启，并可在 site.config.mjs 的 markdown.obsidian 中分别关闭。查看站点配置。

下面从配置文档嵌入“页面过渡”小节的正文：

transition.page 在完整页面导航时对内容区域执行与 Plume 一致的 fade-slide-y 先退出、再进入动画，不会创建容易造成主题闪烁的整页浏览器快照；文档左侧栏不会执行完整页面导航，而会像 Plume 一样保留公共页面外壳，只更新正文、目录和当前导航状态。博客列表、分类、标签与归档之间也会保留共用的头部和资料侧栏，只切换集合内容。系统开启“减少动态效果”时自动禁用完整页面动画。设置 transition: false 可关闭全部过渡，或仅设置 transition.page: false 关闭完整页面跳转动画。

这段文字包含 ，构建后不会输出注释内容。

媒体语法

YouTube、Bilibili、音视频和 PDF 使用简短的块级语法；只有使用时才产生对应标签。

@[youtube](video-id)
@[bilibili](BV-id)
@[video](/media/demo.mp4)
@[audio](/media/demo.mp3)
@[pdf](/files/guide.pdf)

audio 美 [ˈɔːdioʊ]

仓库卡片

仓库卡片支持 GitHub 与 Gitee，展示语言、Star、Fork、许可证、模板和归档状态，并在浏览器中缓存 24 小时。

<RepoCard repo="pengzhanbo/vuepress-theme-plume" />

浏览器兼容性

caniuse 指令支持完整兼容表和 Baseline 摘要，也可以指定过去与未来的版本周期。

@[caniuse{-2,1}](css-matches-pseudo)
@[caniuse baseline](css-matches-pseudo)
::: caniuse css-container-queries{-2,1}
:::

旧版 Plume 文档中的容器语法也可以直接迁移：

轮播图

Swiper 支持 Plume 的轮播、导航、分页、自动播放和动画参数：

对话记录

代码演示

<button id="demo-button">点击 0</button>

let count = 0
const button = document.querySelector('#demo-button')
button.addEventListener('click', () => { button.textContent = `点击 ${++count}` })

#demo-button { padding: 8px 14px; border: 0; border-radius: 6px; color: white; background: #336f87; }

普通演示文件与外部资源

<div id="embedded-normal-demo">Resource ready: <strong id="demo-resource-value">no</strong></div>

const value = document.querySelector<HTMLElement>('#demo-resource-value')
if (value) value.textContent = String(window.demoResourceReady)

#embedded-normal-demo { padding: 8px 12px; border-radius: 6px; }

Vue 演示

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button id="inline-vue-count" type="button" @click="count += 1">内联计数 {{ count }}</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CounterLabel from './CounterLabel.vue'

const count = ref(0)
</script>

<template>
  <button id="embedded-vue-count" type="button" @click="count += 1">
    <CounterLabel :count="count" />
  </button>
</template>

<style scoped>
button {
  padding: 8px 12px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
}
</style>

Markdown 演示

#### Markdown 渲染结果

支持 **加粗**、列表和其它 Markdown 语法。

### Embedded Markdown

This **Markdown demo** is rendered before its source code.

数学公式

默认使用与 Plume 相同的 KaTeX 渲染行内公式 $e^{i\pi}+1=0$，并支持独立块级公式：

$$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)$$

标记为 twoslash 的 TypeScript 代码块会执行真实类型分析：

const 
const greeting: {
    readonly text: "hello";
}greeting = { text: "hello"text: 'hello' } as 
type const = {
    readonly text: "hello";
}const

在线代码演示

多语言代码运行

Go、Kotlin 与 Rust 会把代码发送到 Plume 使用的在线运行服务；Python 通过 Pyodide 在浏览器本地执行。editable 会启用就地编辑器。

package main
import "fmt"
func main() { fmt.Println("Hello Go") }

fun main() { println("Hello Kotlin") }

fn main() { println!("Hello Rust"); }

print("Hello Python")

隐秘文本

桌面悬停显示：这段内容默认被遮住；显式点击与模糊效果：点击后显示。

组件写法同样可用：点击组件内容。

图表