Directives highlighting

src/lib/components/editor/editor.svelte

@@ -18,8 +18,7 @@
 			enabled: false
 		},
 		theme: 'mermaidTheme',
-		overviewRulerLanes: 0,
-		autoClosingBrackets: 'always'
+		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
 	let oldText = text;
@@ -39,7 +38,7 @@
 		let i = 0;
 		while (i++ < 10) {
 			try {
-				//@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
+				// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
 				Monaco = monaco;
 				return;
 			} catch {
@@ -50,7 +49,7 @@
 	};
 	onMount(async () => {
 		try {
-			//@ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
+			// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
 			Monaco = monaco;
 		} catch {
 			await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175

src/lib/components/editor/util.ts

@@ -101,6 +101,8 @@ export const initEditor = (monacoEditor): void => {
 		),
 		tokenizer: {
 			root: [
+				[/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }],
+				[/%%$/, { token: 'string', nextEmbedded: '@pop' }],
 				[/-{1,2}\)|-{1,2}>>/, { cases: { '@noEatingSequenceArrows': 'transition' } }],
 				[/\*--\*?|--\*/, 'transition'],
 				[/(<\|?)(\.{2}|-{2})(\|?>)?|(\.{2}|-{2})(\|?>)/, 'transition'],
@@ -144,6 +146,7 @@ export const initEditor = (monacoEditor): void => {
 			{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
 			{ token: 'html.entity/hex-color-code', foreground: 'f5b436' },
 			{ token: 'annotation', foreground: '4b4b96' },
+			{ token: 'number', foreground: '4b4b96' },
 			{ token: 'comment', foreground: '888c89' }
 		]
 	});