Lowlight Mermaid

TypeScript grammar definitions for Mermaid syntax highlighting Compatible with highlight.js and lowlight, designed for editors, markdown renderers, and converters.

✨ Features

• 📦 No runtime bloat — ships only grammar definitions
• ⚡ Plug-and-play with highlight.js / lowlight
• 🔧 Full TypeScript types included
• 🛠 Reusable across editors, docs, converters (e.g. @tiptap/extension-code-block-lowlight or mdast2docx)

🚀 Install

pnpm add lowlight-mermaid

or

npm install lowlight-mermaid

or

yarn add lowlight-mermaid

📖 Usage

import { mermaidGrammar } from "lowlight-mermaid";
import hljs from "highlight.js/lib/core";

hljs.registerLanguage("mermaid", mermaidGrammar);

const code = `flowchart TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]`;

const result = hljs.highlight(code, { language: "mermaid" });

console.log(result.value);

🙏 Acknowledgments

• highlight.js — core highlighting engine
• lowlight — AST-friendly wrapper

📜 License

Licensed under MPL-2.0 open-source license.

Support my work via GitHub Sponsors or explore courses.

with 💖 by Mayank Kumar Chaudhari