// Help users write markdown files with VuePress Plume theme extensions, including containers, charts, embeds, code features, and all markdown enhancements. Invoke when user writes markdown content or asks about Plume's markdown syntax.
| name | vuepress-plume-markdown |
| description | Help users write markdown files with VuePress Plume theme extensions, including containers, charts, embeds, code features, and all markdown enhancements. Invoke when user writes markdown content or asks about Plume's markdown syntax. |
This skill provides assistance with VuePress Plume markdown extensions, charts, embeds, and code features. It helps users write rich content using the features provided by the theme.
Most markdown extensions need to be enabled in .vuepress/config.ts:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
// Containers
hint: true, // Info, tip, warning, caution containers (default: true)
alert: true, // GitHub-style alerts (default: true)
// Code
codeTabs: true, // Code block tabs (default: true)
tabs: true, // General tabs (default: true)
// Content
annotation: false, // Inline annotations
abbr: false, // Abbreviations
mark: 'eager', // Mark/highlight text (default: 'eager')
// Layout
fileTree: true, // File tree container (default: true)
flex: false, // Flex layout
collapse: false, // Collapsible sections
chat: false, // Chat dialog
timeline: false, // Timeline
field: false, // Field container
table: false, // Enhanced table container
demo: false, // Demo container
// Embeds
pdf: false, // PDF embed
bilibili: false, // Bilibili video
youtube: false, // YouTube video
artPlayer: false, // ArtPlayer video
audioReader: false, // Audio
// Code demos
codepen: false, // CodePen
codeSandbox: false, // CodeSandbox
jsfiddle: false, // JSFiddle
repl: false, // REPL
// Charts
chartjs: false, // Chart.js
echarts: false, // ECharts
mermaid: false, // Mermaid
markmap: false, // Markmap
plantuml: false, // PlantUML
flowchart: false, // Flowchart
// Other
npmTo: false, // npm/yarn/pnpm switcher
caniuse: false, // Can I Use embed
icon: { provider: 'iconify' }, // Icons (default: iconify)
plot: true, // Hidden text (spoiler) (default: true)
imageSize: false, // Auto image dimensions
include: true, // Include markdown files (default: true)
math: { type: 'katex' }, // Math formulas (default: katex)
},
}),
})
See resources/code-features.md for detailed code block features:
title="filename.ext" after language:line-numbers, :no-line-numbers, :line-numbers=2{1,3,5-7} or // [!code highlight]// [!code focus] or // [!code focus:3]// [!code ++] and // [!code --]// [!code warning] and // [!code error]// [!code word:keyword] or // [!code word:keyword:2]:whitespace to show tabs/spaces:collapsed-lines or :collapsed-lines=10VuePress Plume supports these standard markdown extensions:
- [ ] and - [x][^1] and [^1]: note19^th^H~2~O## Title {#custom-anchor}::: left/center/right[[TOC]]```language
code content
```
```ts title="example.ts":line-numbers {2,4-6}
// [!code highlight]
const example = 'highlighted'
// [!code ++]
const added = 'new code'
// [!code --]
const removed = 'old code'
// [!code warning]
const warning = 'be careful'
// [!code error]
const error = 'something wrong'
// [!code focus]
const focused = 'focused line'
// [!code word:example]
console.log(example)
```
Different languages use different comment syntax:
| Language | Highlight | Focus | Diff Add | Diff Remove |
|---|---|---|---|---|
| JS/TS/JSX/TSX | // [!code highlight] | // [!code focus] | // [!code ++] | // [!code --] |
| Python/Ruby/YAML | # [!code highlight] | # [!code focus] | # [!code ++] | # [!code --] |
| CSS/SCSS | /* [!code highlight] */ | /* [!code focus] */ | /* [!code ++] */ | /* [!code --] */ |
| HTML/XML | <!-- [!code highlight] --> | <!-- [!code focus] --> | <!-- [!code ++] --> | <!-- [!code --] --> |
| Bash/Shell | # [!code highlight] | # [!code focus] | # [!code ++] | # [!code --] |
| SQL | -- [!code highlight] | -- [!code focus] | -- [!code ++] | -- [!code --] |
Enable features globally in .vuepress/config.ts:
export default defineUserConfig({
theme: plumeTheme({
codeHighlighter: {
lineNumbers: true, // Enable line numbers globally
whitespace: false, // Show whitespace globally
collapsedLines: false, // Collapse lines globally
theme: { light: 'github-light', dark: 'github-dark' },
twoslash: false, // TypeScript twoslash
},
}),
})
When enabled globally, use :no-line-numbers, :no-whitespace, :no-collapsed-lines to disable per block.
Common frontmatter for markdown files:
---
title: Article Title
createTime: 2024/01/01 12:00:00
permalink: /article/unique-id/
tags:
- tag1
- tag2
description: Article description for SEO
---
---
sticky: true # or number for ordering
article: true # false to hide from list
draft: true # dev only
cover: /image.jpg # Cover image
coverStyle:
layout: right # left, right, odd-left, odd-right, top
ratio: '16:9'
width: 240
compact: false
---
---
pageLayout: home
config:
- type: hero
full: true
effect: hyper-speed
forceDark: true
hero:
name: Site Name
tagline: Tagline
text: Description
actions:
- text: Get Started
link: /guide/
theme: brand
- type: features
features:
- title: Feature 1
icon: icon-name
details: Description
- type: image-text
title: Section Title
image: /images/feature.svg
list:
- title: Item 1
description: Description
- type: text-image
title: Section Title
image: /images/feature.svg
list:
- title: Item 1
description: Description
- type: custom
---
When llmstxt is enabled, you can use special markup:
<llm-only> - Content visible only to LLMs<llm-only>
## Section for LLMs
This content only appears in LLM-generated files.
</llm-only>
<llm-exclude> - Content hidden from LLMs<llm-exclude>
## Section for humans
This content will not appear in LLM files.
</llm-exclude>
Requires installing swiper:
npm install swiper
<script setup>
import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
</script>
<Swiper :items="['img1.jpg', 'img2.jpg']" />
Props: items, width, height, mode ('banner'|'carousel'|'broadcast'), navigation, effect, delay, speed, loop, pauseOnMouseEnter, swipe