This package implements Mermaid language support for the CodeMirror code editor. Get syntax highlighting for Mermaid diagrams!
Install the package:
npm install codemirror-lang-mermaid
Example usage:
import { basicSetup, EditorView } from 'codemirror';
import { mindmap, mindmapTags } from 'codemirror-lang-mermaid';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
const myHighlightStyle = HighlightStyle.define([
{ tag: mindmapTags.diagramName, color: '#9650c8' },
{ tag: mindmapTags.lineText1, color: '#ce9178' },
{ tag: mindmapTags.lineText2, color: 'green' },
{ tag: mindmapTags.lineText3, color: 'red' },
{ tag: mindmapTags.lineText4, color: 'magenta' },
{ tag: mindmapTags.lineText5, color: '#569cd6' },
]);
new EditorView({
doc: `mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
`,
extensions: [basicSetup, mindmap(), syntaxHighlighting(myHighlightStyle)],
parent: document.body,
});
If you run this code in the browser, you should get syntax highlighting!
Mermaid contains many different types of diagrams. Each diagram need its own Lezer grammar file. I'm currently working on building a grammar for each diagram. The following diagrams supported so far.
CodeMirror supports the ability to create custom tags. These tags are useful for styling tokens from a grammar. I have created the following tags for each type of Mermaid diagram.
- diagramName
- lineText1
- lineText2
- lineText3
- lineText4
- lineText5