bpruitt-goddard / vscode-mermaid-syntax-highlight

Markdown syntax support for the Mermaid charting language
MIT License
98 stars 37 forks source link

Support pandoc-ext/diagram syntax #116

Closed jorlando-tuik closed 1 year ago

jorlando-tuik commented 1 year ago

Goal

Support syntax highlighting for the semi-official diagram-lua filter to generate diagrams for pandoc. Related to https://github.com/bpruitt-goddard/vscode-mermaid-syntax-highlight/issues/117.

I am using the diagram-lua pandoc filter to generate images from mermaid for rendering into pdfs. The basic syntax is fine, but I need to use the pandoc syntax for mermaid code blocks so the filter can properly id images for pandoc-crossref. This breaks the currently mermaid detection and highlighting for the code block.

The following code snippet highlights as expected.

```mermaid
%%| caption: "Caption"
%%| alt: "Alt"
%%| name: "mermaid-pandoc-diagram-example"

flowchart TD
    A --> B

But the following does not.

```{.mermaid #fig:mermaid-pandoc-diagram-example height=60%}
%%| caption: "Caption"
%%| alt: "Alt"
%%| name: "mermaid-pandoc-diagram-example"

flowchart TD
    A --> B

This pull request attempts to update the mermaid code block detection regex to recognize .{mermaid as a valid mermaid code block for highlighting.