lowlight-mermaid
v0.0.0
Published
Highlight.js / lowlight grammar for Mermaid diagrams. Enables syntax highlighting in editors like Tiptap with @tiptap/extension-code-block-lowlight.
Maintainers
Readme
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-lowlightormdast2docx)
🚀 Install
pnpm add lowlight-mermaidor
npm install lowlight-mermaidor
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.
