code highlighting

Author: mProjectsCode

exampleVault/Input Fields/Editor.md

@@ -5,6 +5,8 @@ editor: |-
   **test**
 
   # Heading
+
+  [[Slider]]
 ---
 
 ```meta-bind

exampleVault/Input Fields/Slider.md

@@ -17,3 +17,7 @@ INPUT[slider(addLabels, showcase):slider1]
 ```meta-bind
 INPUT[slider(addLabels, minValue(-20), maxValue(20), showcase):slider2]
 ```
+
+```js
+let a = 5;
+```

exampleVault/Meta Bind JS.md

@@ -1,5 +1,5 @@
 ---
-select: a
+select: c
 ---
 
 test
@@ -17,4 +17,37 @@ const inputField = mb.createInputField(declaration, undefined, 'block');
 
 ctx.addChild(inputField);
 ```
+
+```meta-bind-js
+const declaration = mb.createDeclaration(
+	'select',
+	[
+		{type: 'option', value: 'd'},
+		{type: 'option', value: 'e'},
+	],
+	'select'
+);
+
+const inputField = mb.createInputField(declaration, undefined, 'block');
+
+ctx.addChild(inputField);
+```
+
+```js
+const declaration = mb.createDeclaration(
+	'select',
+	[
+		{type: 'option', value: 'a'},
+		{type: 'option', value: 'c'},
+	],
+	'select'
+);
+
+0000
+
+const inputField = mb.createInputField(declaration, undefined, 'block');
+
+ctx.addChild(inputField);
+```
+
 test

exampleVault/Other/templater test.md

@@ -0,0 +1,9 @@
+
+<%*
+const colors = ['orange','yellow','pink','blue','green'];
+let color = await tp.system.suggester(colors,colors,false,'Color');
+if (color !== null)
+{
+   tR = `<span class="fs12 ${color}">${tp.file.selection()}</span>`;
+}
+-%>

package-lock.json

@@ -21,6 +21,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.30.0",
 		"@typescript-eslint/parser": "^5.30.0",
 		"@codemirror/view": "^6.7.2",
+		"@codemirror/lang-javascript": "^6.1.2",
 		"builtin-modules": "^3.3.0",
 		"esbuild": "^0.14.47",
 		"esbuild-plugin-copy-watch": "^0.0.7",

package.json

@@ -0,0 +1,99 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+// Utility function that allows modes to be combined. The mode given
+// as the base argument takes care of most of the normal mode
+// functionality, but a second (typically simple) mode is used, which
+// can override the style of text. Both modes get to parse all of the
+// text, but when both assign a non-null style to a piece of code, the
+// overlay wins, unless the combine argument was true and not overridden,
+// or state.overlay.combineTokens was true, in which case the styles are
+// combined.
+
+(function (mod) {
+	mod(window.CodeMirror);
+})(function (CodeMirror) {
+	'use strict';
+
+	CodeMirror.customOverlayMode = function (base, overlay, combine) {
+		return {
+			startState: function () {
+				return {
+					base: CodeMirror.startState(base),
+					overlay: CodeMirror.startState(overlay),
+					basePos: 0,
+					baseCur: null,
+					overlayPos: 0,
+					overlayCur: null,
+					streamSeen: null,
+				};
+			},
+			copyState: function (state) {
+				return {
+					base: CodeMirror.copyState(base, state.base),
+					overlay: CodeMirror.copyState(overlay, state.overlay),
+					basePos: state.basePos,
+					baseCur: null,
+					overlayPos: state.overlayPos,
+					overlayCur: null,
+				};
+			},
+
+			token: function (stream, state) {
+				if (stream != state.streamSeen || Math.min(state.basePos, state.overlayPos) < stream.start) {
+					state.streamSeen = stream;
+					state.basePos = state.overlayPos = stream.start;
+				}
+
+				if (stream.start == state.basePos) {
+					state.baseCur = base.token(stream, state.base);
+					state.basePos = stream.pos;
+				}
+				if (stream.start == state.overlayPos) {
+					stream.pos = stream.start;
+					state.overlayCur = overlay.token(stream, state.overlay);
+					state.overlayPos = stream.pos;
+				}
+				stream.pos = Math.min(state.basePos, state.overlayPos);
+
+				// // Edge case for codeblocks in templater mode
+				// if (
+				//     state.baseCur &&
+				//     state.overlayCur &&
+				//     state.baseCur.contains("line-HyperMD-codeblock")
+				// ) {
+				//     state.overlayCur = state.overlayCur.replace(
+				//         "line-templater-inline",
+				//         ""
+				//     );
+				//     state.overlayCur += ` line-background-HyperMD-codeblock-bg`;
+				// }
+
+				// state.overlay.combineTokens always takes precedence over combine,
+				// unless set to null
+				if (state.overlayCur == null) return state.baseCur;
+				else if ((state.baseCur != null && state.overlay.combineTokens) || (combine && state.overlay.combineTokens == null)) return state.baseCur + ' ' + state.overlayCur;
+				else return state.overlayCur;
+			},
+
+			indent:
+				base.indent &&
+				function (state, textAfter, line) {
+					return base.indent(state.base, textAfter, line);
+				},
+			electricChars: base.electricChars,
+
+			innerMode: function (state) {
+				return { state: state.base, mode: base };
+			},
+
+			blankLine: function (state) {
+				var baseToken, overlayToken;
+				if (base.blankLine) baseToken = base.blankLine(state.base);
+				if (overlay.blankLine) overlayToken = overlay.blankLine(state.overlay);
+
+				return overlayToken == null ? baseToken : combine && baseToken != null ? baseToken + ' ' + overlayToken : overlayToken;
+			},
+		};
+	};
+});