feat: support for mermaid diagrams

simonhaenisch · Dec 13, 2022 · 7ee5030 · 7ee5030
1 parent 9f464aa
commit 7ee5030
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "iconv-lite": "^0.6.3",
     "listr": "^0.14.3",
     "marked": "4.2.2",
+    "mermaid": "^9.2.2",
     "puppeteer": ">=8.0.0",
     "semver": "^7.3.7",
     "serve-handler": "^6.1.3"

diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -1,8 +1,10 @@
 import { WatchOptions } from 'chokidar';
 import { GrayMatterOption } from 'gray-matter';
-import { marked } from 'marked';
+import { marked, Renderer } from 'marked';
+import { MermaidConfig } from 'mermaid';
 import { resolve } from 'path';
 import { FrameAddScriptTagOptions, launch, PDFOptions } from 'puppeteer';
+import { renderer } from './renderer';
 
 export const defaultConfig: Config = {
 	basedir: process.cwd(),
@@ -13,7 +15,15 @@ export const defaultConfig: Config = {
 	body_class: [],
 	page_media_type: 'screen',
 	highlight_style: 'github',
-	marked_options: {},
+	marked_options: {
+		/**
+		 * Ingore Typscript here since boolean and string are incompatible
+		 * see: https://marked.js.org/using_pro#renderer
+		 * Returning false continues the original renderer behaviour
+		 */
+		// @ts-ignore
+		renderer: renderer
+	},
 	pdf_options: {
 		printBackground: true,
 		format: 'a4',
@@ -37,7 +47,8 @@ export const defaultConfig: Config = {
 	stylesheet_encoding: 'utf-8',
 	as_html: false,
 	devtools: false,
-	marked_extensions: [],
+	marked_extensions: {},
+	mermaid_config: {}
 };
 
 /**
@@ -172,7 +183,12 @@ interface BasicConfig {
 	 *
 	 * @see https://marked.js.org/using_pro#extensions
 	 */
-	marked_extensions: marked.MarkedExtension[];
+	 marked_extensions: marked.MarkedExtension
+
+	/**
+	 * Mermaid Configuration 
+	 */
+	mermaid_config: MermaidConfig
 }
 
 export type PuppeteerLaunchOptions = Parameters<typeof launch>[0];
diff --git a/src/lib/get-html.ts b/src/lib/get-html.ts
@@ -10,5 +10,7 @@ export const getHtml = (md: string, config: Config) => `<!DOCTYPE html>
 	<body class="${config.body_class.join(' ')}">
 		${getMarked(config.marked_options, config.marked_extensions)(md)}
 	</body>
+	<script src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script>
+	<script>mermaid.initialize(${config.mermaid_config});
 </html>
 `;
diff --git a/src/lib/get-marked-with-highlighter.ts b/src/lib/get-marked-with-highlighter.ts
@@ -1,7 +1,7 @@
 import hljs from 'highlight.js';
 import { marked } from 'marked';
 
-export const getMarked = (options: marked.MarkedOptions, extensions: marked.MarkedExtension[]) => {
+export const getMarked = (options: marked.MarkedOptions, markedExtension: marked.MarkedExtension) => {
 	marked.setOptions({
 		highlight: (code, languageName) => {
 			const language = hljs.getLanguage(languageName) ? languageName : 'plaintext';
@@ -11,6 +11,6 @@ export const getMarked = (options: marked.MarkedOptions, extensions: marked.Mark
 		langPrefix: 'hljs ',
 		...options,
 	});
-	marked.use(...extensions);
+	marked.use(markedExtension);
 	return marked;
 };
diff --git a/src/lib/renderer.ts b/src/lib/renderer.ts
@@ -0,0 +1,70 @@
+import { Renderer } from "marked";
+
+export const renderer:Renderer<string|boolean> = {
+    options: {},  
+    code(code:string):string|boolean{
+      const rule = /^`{3}mermaid((?:.|\n)*?)`{3}/;    // Regex for the complete token, anchor to string start
+      const match = rule.exec(code);
+      if(match){
+        return `<pre class="mermaid">${match[1]}</pre>`
+      } 
+      return false
+    },
+    blockquote(){
+        return false
+    },
+    html(){
+        return false
+    },
+    heading(){
+        return false
+    },
+    hr(){
+        return false
+    },
+    list(){
+        return false
+    },
+    listitem(){
+        return false
+    },
+    checkbox(){
+        return false
+    },
+    paragraph(){
+        return false
+    },
+    table(){
+        return false
+    },
+    tablerow(){
+        return false
+    },
+    tablecell(){
+        return false
+    },
+    strong(){
+        return false
+    },
+    em(){
+        return false
+    },
+    codespan(){
+        return false
+    },
+    br(){
+        return false
+    },
+    del(){
+        return false
+    },
+    link(){
+        return false
+    },
+    image(){
+        return false
+    },
+    text(){
+        return false
+    },
+}