Content features

The theme extends standard Markdown with common authoring tools. Its feature set is informed by the public Theme Plume documentation, while the implementation uses Astro and Markdown-it.

Code blocks

Code blocks support Shiki dual-theme highlighting, titles, line numbers, and highlighted lines.

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

Notation comments support focus, highlight, diff, warning, error, and word highlights without leaking control comments into the rendered code:

const plain = 'Plain line'
const focused = 'Focused line'
const removed = false
const added = true
const warning = 'Warning'
const error = 'Error'
const highlighted = 'Highlighted'
const greeting = 'Hello Hello'

Long blocks can collapse from a selected line:

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

Footnotes and tables

Footnotes are useful for sources and terminology.^[1]

The table toolbar copies HTML or Markdown.

Inline extensions and environment presets

Emoji, superscript, and subscript work inline: 🎉 💯, X², and H₂O.

References, abbreviations, and annotations can be configured once in markdown.env and reused on every page: Astro is an SSG .

Markdown file links resolve to their final permalinks automatically, for example site configuration.

Hint containers

Obsidian compatibility

Wiki links, embeds, callouts, and %% comments are enabled by default and can be toggled separately through markdown.obsidian in site.config.mjs. View site configuration.

The following paragraph embeds the “Page transitions” section from the configuration guide:

transition.page applies a Plume-compatible content transition during full-page navigation: fade-slide-y leaves first, then enters, without taking a whole-page browser snapshot that can flash the wrong theme. Documentation sidebar links preserve the shared shell and replace only the document content, while Blog, Tags, Categories, and Archives preserve the header and profile card. Page scripts are re-initialized after each partial update. prefers-reduced-motion disables the animation. Set transition: false to disable all transitions or transition.page: false to disable only full-page navigation.

This sentence contains an that is omitted from the build.

Media syntax

YouTube, Bilibili, audio, video, and PDF embeds use small block directives and only render when used.

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

audio US [ˈɔːdioʊ]

Repository cards

Repository cards support GitHub and Gitee, including language, stars, forks, license, template, and archive state, with a 24-hour browser cache.

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

Browser compatibility

The caniuse directive supports both the full compatibility table and a Baseline summary, with optional past and future release periods.

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

The legacy container syntax from Plume documents also migrates directly:

Swiper

Swiper supports Plume's navigation, pagination, autoplay, and effect options:

Chat records

Code demo

<button id="demo-button">Clicks 0</button>

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

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

Normal demo files and external resources

<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 demos

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

<template>
  <button id="inline-vue-count" type="button" @click="count += 1">Inline count {{ 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 demos

#### Rendered Markdown

Supports **bold text**, lists, and other Markdown syntax.

### Embedded Markdown

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

Math

KaTeX, Plume's default renderer, supports inline math $e^{i\pi}+1=0$ and display math:

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

TypeScript fences marked with twoslash run real type analysis:

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

Online code embeds

Multi-language code runners

Go, Kotlin, and Rust submit code to the same online playground services used by Plume. Python runs locally in the browser through Pyodide. Add editable for an in-place editor.

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

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

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

print("Hello Python")

Hidden text

Hover on desktop: this text is masked by default; explicit click and blur: click to reveal.

The component form works too: click the component text.

Charts