| 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. |
VuePress Plume Markdown Skill
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.
When to Invoke
- Writing content in Markdown files
- Using advanced features like containers, code groups, or diagrams
- Embedding media or external content
- Configuring code block features (highlight, focus, diff, etc.)
- Using markdown enhancement syntax
Documentation Sources
Enabling Features
Most markdown extensions need to be enabled in .vuepress/config.ts:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
hint: true,
alert: true,
codeTabs: true,
tabs: true,
annotation: false,
abbr: false,
mark: 'eager',
fileTree: true,
flex: false,
collapse: false,
chat: false,
timeline: false,
field: false,
table: false,
demo: false,
pdf: false,
bilibili: false,
youtube: false,
artPlayer: false,
audioReader: false,
codepen: false,
codeSandbox: false,
jsfiddle: false,
repl: false,
chartjs: false,
echarts: false,
mermaid: false,
markmap: false,
plantuml: false,
flowchart: false,
npmTo: false,
caniuse: false,
icon: { provider: 'iconify' },
plot: true,
imageSize: false,
include: true,
math: { type: 'katex' },
},
}),
})
Markdown Extensions
Containers
- Abbreviation - Define abbreviations with tooltips
- Annotation - Add inline annotations
- Attributes - Add custom attributes to elements
- Card - Create card-style layouts
- Chat - Simulate chat conversations
- Code Tree - Display file trees alongside code blocks
- Collapse - Create collapsible details/summary blocks
- Container - Custom containers (info, tip, warning, etc.)
- Demo Wrapper - Demo container for examples
- Field - Field/attribute display container
- File Tree - Display file directory structures
- Flex - Create flexible column layouts
- GitHub Alerts - Use GitHub-style alerts
- Icons - Embed icons from Iconify
- Include - Include content from other files
- Mark - Highlight text with ==mark== syntax
- Math - Render mathematical formulas using KaTeX
- NPM To - Switch between npm, yarn, pnpm, etc.
- QR Code - Generate QR codes
- Steps - Create step-by-step guides
- Table - Enhanced table containers
- Tabs - Create tabbed content
- Timeline - Create timelines
Charts
Embeds
Code Features
See resources/code-features.md for detailed code block features:
- Code Title -
title="filename.ext" after language
- Line Numbers -
:line-numbers, :no-line-numbers, :line-numbers=2
- Line Highlighting -
{1,3,5-7} or // [!code highlight]
- Line Focus -
// [!code focus] or // [!code focus:3]
- Diff Highlighting -
// [!code ++] and // [!code --]
- Warning/Error -
// [!code warning] and // [!code error]
- Word Highlight -
// [!code word:keyword] or // [!code word:keyword:2]
- Whitespace -
:whitespace to show tabs/spaces
- Collapsed Lines -
:collapsed-lines or :collapsed-lines=10
Standard Markdown Extensions
VuePress Plume supports these standard markdown extensions:
- Tables - GitHub-flavored tables
- Task Lists -
- [ ] and - [x]
- Footnotes -
[^1] and [^1]: note
- Superscript -
19^th^
- Subscript -
H~2~O
- Custom Anchors -
## Title {#custom-anchor}
- Alignment -
::: left/center/right
- Table of Contents -
[[TOC]]
Code Block Features
Basic Syntax
```language
code content
```
With Features
```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)
```
Language-Specific Comments
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 --] |
Global Configuration
Enable features globally in .vuepress/config.ts:
export default defineUserConfig({
theme: plumeTheme({
codeHighlighter: {
lineNumbers: true,
whitespace: false,
collapsedLines: false,
theme: { light: 'github-light', dark: 'github-dark' },
twoslash: false,
},
}),
})
When enabled globally, use :no-line-numbers, :no-whitespace, :no-collapsed-lines to disable per block.
Frontmatter
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
---
Post-specific Frontmatter
---
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
---
Home Page Frontmatter
---
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
---
LLMs txt Markup
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>
Components
Swiper (Carousel)
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
References