prism-syntax

mcclowes's avatarfrom mcclowes

Use when adding syntax highlighting for custom languages to Prism.js, used by Docusaurus and many documentation sites

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 23, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill streamlines the process of implementing custom syntax highlighting for Prism.js, the engine powering code blocks in Docusaurus and numerous technical documentation sites. It provides expert guidance on defining language grammars, crafting complex regex patterns for tokenization, and integrating these custom definitions into modern documentation frameworks to enhance code readability and developer experience.

Use Cases

  • Creating custom syntax highlighting for proprietary or niche programming languages not supported by default in Prism.js.
  • Configuring Docusaurus themes to support additional languages by modifying docusaurus.config.js and integration files.
  • Developing advanced regex patterns using lookbehinds and nested grammars to accurately highlight complex code structures like string interpolation.
  • Standardizing token types and CSS classes across technical documentation to ensure consistent visual styling for code snippets.
  • Troubleshooting and refining existing Prism.js language definitions to fix greedy matching issues or incorrect tokenization.
nameprism-syntax
descriptionUse when adding syntax highlighting for custom languages to Prism.js, used by Docusaurus and many documentation sites

Prism.js Syntax Highlighting

Quick Start

Prism.languages.mylang = {
  'comment': /\/\/.*/,
  'string': /"(?:\\.|[^"\\])*"/,
  'keyword': /\b(?:if|else|while|for|return)\b/,
  'number': /\b\d+(?:\.\d+)?\b/,
  'operator': /[+\-*/%=<>!&|]+/,
  'punctuation': /[{}[\];(),.:]/
};

Token Types (CSS Classes)

  • comment - Comments
  • string - String literals
  • keyword - Language keywords
  • number - Numeric literals
  • operator - Operators
  • punctuation - Punctuation marks
  • function - Function names
  • class-name - Type/class names
  • property - Object properties
  • boolean - true/false
  • builtin - Built-in functions

Pattern Techniques

{
  // Lookbehind for context
  'function': {
    pattern: /(\bfunction\s+)\w+/,
    lookbehind: true
  },
  // Nested grammar
  'interpolation': {
    pattern: /\$\{[^}]+\}/,
    inside: {
      'variable': /\$\{|\}/,
      'expression': { pattern: /[\s\S]+/, inside: Prism.languages.javascript }
    }
  },
  // Greedy matching
  'string': { pattern: /"(?:\\.|[^"\\])*"/, greedy: true }
}

Docusaurus Integration

// docusaurus.config.js
module.exports = {
  themeConfig: {
    prism: {
      additionalLanguages: ['mylang'],
      theme: require('prism-react-renderer').themes.github,
    }
  }
};

// Create src/prism/prism-mylang.js and import in src/theme/prism-include-languages.js

Reference Files