Built-in Plugins

Comprehensive documentation of all built-in plugins included with @vuepress/markdown, their functionality, and configuration options.

Required Plugins

These plugins are essential for VuePress functionality and cannot be removed.

Component Plugin

Enables Vue components within markdown content, supporting both PascalCase components and custom elements with hyphens.

// Plugin name constant
PLUGINS.COMPONENT: 'component'

Functionality:

• Recognizes PascalCase Vue components (<MyComponent />)
• Supports custom elements with hyphens (<custom-element />)
• Enables component embedding in markdown documents
• Essential for VuePress Vue component integration

Usage Examples:

<!-- Vue components in markdown -->
<MyButton type="primary">Click me</MyButton>

<CustomCard title="Hello">
  This content will be rendered inside the card component.
</CustomCard>

<!-- Custom elements -->
<my-widget data="example"></my-widget>

Anchor Plugin

Generates heading anchors with permalinks for navigation and deep linking.

// Plugin name constant  
PLUGINS.ANCHOR: 'anchor'

Default Configuration:

{
  slugify: slugifyFunction,
  permalink: true,
  permalinkBefore: true, 
  permalinkSymbol: '#'
}

Functionality:

• Automatically generates anchor links for all headings
• Creates permalink buttons for easy sharing
• Uses configurable slugify function for anchor generation
• Essential for VuePress navigation and table of contents

Enhancement Plugins

These plugins provide additional functionality and can be removed if not needed.

Highlight Lines Plugin

Highlights specific lines within code blocks using line number ranges.

PLUGINS.HIGHLIGHT_LINES: 'highlight-lines'

Usage Examples:

<!-- Highlight lines 1 and 3-5 -->
\`\`\`js{1,3-5}
console.log('line 1'); // highlighted
console.log('line 2');
console.log('line 3'); // highlighted
console.log('line 4'); // highlighted
console.log('line 5'); // highlighted
\`\`\`

<!-- Highlight single line -->
\`\`\`python{2}
def hello():
    print("This line is highlighted")
    return True
\`\`\`

Pre Wrapper Plugin

Wraps code blocks with additional container elements for enhanced styling and functionality.

PLUGINS.PRE_WRAPPER: 'pre-wrapper'

Functionality:

• Adds wrapper divs around code blocks
• Provides additional CSS hooks for styling
• Enables enhanced code block interactions
• Supports syntax highlighting integration

Line Numbers Plugin

Adds line numbers to code blocks for better readability and reference.

PLUGINS.LINE_NUMBERS: 'line-numbers'

Configuration:

const md = createMarkdown({
  lineNumbers: true  // Enable line numbers globally
});

Usage Examples:

<!-- Code block with line numbers -->
\`\`\`javascript
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 3);
console.log(result);
\`\`\`

Snippet Plugin

Includes code snippets from external files with optional line highlighting and language specification.

PLUGINS.SNIPPET: 'snippet'

Usage Examples:

<!-- Include entire file -->
<<< @/path/to/file.js

<!-- Include with language specification -->
<<< @/path/to/file.py{python}

<!-- Include with line highlighting -->
<<< @/path/to/file.js{1,3-5}

<!-- Include with both language and highlighting -->
<<< @/path/to/component.vue{vue}{1-10,15}

Convert Router Link Plugin

Converts markdown links to Vue Router links for internal navigation and handles external links.

PLUGINS.CONVERT_ROUTER_LINK: 'convert-router-link'

Default Configuration:

{
  target: '_blank',
  rel: 'noopener noreferrer'
}

Functionality:

• Automatically detects internal vs external links
• Converts internal links to Vue Router links
• Adds security attributes to external links
• Respects page suffix configuration

Hoist Script Style Plugin

Hoists <script> and <style> tags from markdown content to the document head for proper execution.

PLUGINS.HOIST_SCRIPT_STYLE: 'hoist-script-style'

Usage Examples:

<!-- These will be hoisted to document head -->
<script>
export default {
  mounted() {
    console.log('Component mounted');
  }
}
</script>

<style scoped>
.my-component {
  color: blue;
}
</style>

# My Component

Regular markdown content here.

Third-Party Plugins

These plugins are included via external packages.

Emoji Plugin

Converts emoji shortcodes to Unicode emoji characters.

PLUGINS.EMOJI: 'emoji'

Usage Examples:

I love VuePress :heart:!
This plugin is :fire: :rocket:!
Good job :+1: :thumbsup:

Renders as:

I love VuePress ❤️!
This plugin is 🔥 🚀!
Good job 👍 👍

Table of Contents Plugin

Generates table of contents from markdown headings.

PLUGINS.TOC: 'toc'

Default Configuration:

{
  slugify: slugifyFunction,
  includeLevel: [2, 3],
  format: parseHeaders
}

Usage Examples:

<!-- Generate TOC for headings level 2-3 -->
[[toc]]

## Section 1
### Subsection 1.1
### Subsection 1.2

## Section 2  
### Subsection 2.1

Syntax Highlighting

All code blocks benefit from built-in syntax highlighting powered by Prism.js.

Supported Languages:

• JavaScript, TypeScript, Python, Java, C/C++
• HTML, CSS, SCSS, Vue, React JSX
• Bash, PowerShell, SQL, JSON, YAML
• And many more via Prism.js language components

Language Detection:

• Automatic detection from file extensions
• Manual specification in code block language tags
• Fallback to plain text for unknown languages

Features:

• Automatic language component loading
• Proper escaping for safe rendering
• Integration with highlight lines and line numbers
• Theme support via CSS classes