or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

builtin-plugins.mdindex.mdmarkdown-processing.mdplugin-management.md
tile.json

tessl/npm-vuepress--markdown

Markdown processing library for VuePress with enhanced plugins for documentation sites

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vuepress/markdown@1.9.x

To install, run

npx @tessl/cli install tessl/npm-vuepress--markdown@1.9.0

index.mddocs/

@vuepress/markdown

@vuepress/markdown is a comprehensive markdown processing library specifically designed for VuePress, the Vue.js-based static site generator. It extends markdown-it with custom plugins and enhancements tailored for documentation sites, including syntax highlighting, component embedding, anchor generation, table of contents, line numbers, snippet inclusion, emoji support, and Vue Router link conversion.

Package Information

  • Package Name: @vuepress/markdown
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install @vuepress/markdown

Core Imports

const createMarkdown = require('@vuepress/markdown');
const { PLUGINS, isRequiredPlugin, removePlugin, removeAllBuiltInPlugins, dataReturnable } = require('@vuepress/markdown');

For ES modules:

import createMarkdown, { PLUGINS, isRequiredPlugin, removePlugin, removeAllBuiltInPlugins, dataReturnable } from '@vuepress/markdown';

Basic Usage

const createMarkdown = require('@vuepress/markdown');

// Create a markdown processor with default VuePress plugins
const md = createMarkdown({
  lineNumbers: true,
  anchor: {
    permalink: true,
    permalinkBefore: true,
    permalinkSymbol: '#'
  }
});

// Process markdown content
const result = md.render('# Hello World\n\nThis is a test.');
console.log(result.html);        // Rendered HTML
console.log(result.data);        // Plugin data
console.log(result.dataBlockString); // Serialized data for Vue

Architecture

@vuepress/markdown is built around several key components:

  • Factory Function: Main export that creates pre-configured markdown-it instances
  • Plugin System: 11 built-in plugins for VuePress-specific functionality
  • Configuration Chain: Uses markdown-it-chain for fluent configuration
  • Data Collection: Enhanced rendering that collects plugin data alongside HTML
  • Plugin Management: Utilities for removing or configuring built-in plugins

Capabilities

Markdown Processor Creation

Factory function that creates a markdown-it instance with VuePress-specific plugins and configuration.

/**
 * Create a markdown processor with VuePress plugins
 * @param {object} markdown - Configuration options
 * @returns {MarkdownIt} Enhanced markdown-it instance
 */
function createMarkdown(markdown?: MarkdownConfig): MarkdownIt;

interface MarkdownConfig {
  externalLinks?: ExternalLinksConfig;
  pageSuffix?: string;
  anchor?: AnchorConfig;
  toc?: TocConfig;
  plugins?: Plugin[];
  lineNumbers?: boolean;
  slugify?: (str: string) => string;
  beforeInstantiate?: (config: ChainConfig) => void;
  afterInstantiate?: (md: MarkdownIt) => void;
}

Markdown Processing

Plugin Management

Utilities for managing built-in VuePress markdown plugins, including removal and configuration.

/**
 * Check if a plugin is required and cannot be removed
 * @param {string} plugin - Plugin name
 * @returns {boolean} True if plugin is required
 */
function isRequiredPlugin(plugin: string): boolean;

/**
 * Remove a specific built-in plugin
 * @param {object} config - markdown-it-chain configuration
 * @param {string} plugin - Plugin name to remove
 */
function removePlugin(config: ChainConfig, plugin: string): void;

/**
 * Remove all non-required built-in plugins
 * @param {object} config - markdown-it-chain configuration
 */
function removeAllBuiltInPlugins(config: ChainConfig): void;

Plugin Management

Built-in Plugins

Access to plugin names and built-in plugin functionality for VuePress markdown processing.

const PLUGINS: {
  COMPONENT: 'component';
  HIGHLIGHT_LINES: 'highlight-lines';
  PRE_WRAPPER: 'pre-wrapper';
  SNIPPET: 'snippet';
  CONVERT_ROUTER_LINK: 'convert-router-link';
  HOIST_SCRIPT_STYLE: 'hoist-script-style';
  ANCHOR: 'anchor';
  EMOJI: 'emoji';
  TOC: 'toc';
  LINE_NUMBERS: 'line-numbers';
};

Built-in Plugins

Types

interface ExternalLinksConfig {
  target?: string;
  rel?: string;
}

interface AnchorConfig {
  slugify?: (str: string) => string;
  permalink?: boolean;
  permalinkBefore?: boolean;
  permalinkSymbol?: string;
}

interface TocConfig {
  slugify?: (str: string) => string;
  includeLevel?: number[];
  format?: (headers: any) => any;
}

interface Plugin extends Array<any> {
  0: string | Function;
  1?: any;
}

interface RenderResult {
  html: string;
  data: object;
  dataBlockString: string;
}