Change shorthand syntax language to allow for correct Markdown syntax highlight

Author: OlegWock

README.md

@@ -77,10 +77,10 @@ Then go to Emera's settings and refresh components. Now you can use your `HelloW
 
 To render component inline, add ```emera:<HelloWorldInline name="Obsidian" />```. Everything after `emera:` will be parsed as JSX, so you can set props, add children elements, etc.
 
-To render component as block, there are two syntaxes. Shorthand syntax is convenient if your component acts as a simple wrapper (e.g. `<Callout />` kind of component). You add it by creating code block with language ```emera:<Name of your component>```
+To render component as block, there are two syntaxes. Shorthand syntax is convenient if your component acts as a simple wrapper (e.g. `<Callout />` kind of component). You add it by creating code block with language ```emmd:<Name of your component>```
 
 ````markdown
-```emera:RedCallout
+```emmd:RedCallout
 You can use **Markdown** inside `<RedCallout />`.
 ```
 ````

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "emera",
 	"name": "Emera",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"minAppVersion": "1.6.5",
 	"description": "Enables you to use custom React components and inline JavaScript, kinda like MDX.",
 	"author": "OlegWock",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-emera",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "MDX for Obsidian. Kinda.",
 	"main": "main.js",
 	"scripts": {

src/consts.ts

@@ -3,7 +3,7 @@ export const EMERA_ROOT_SCOPE = '_emeraRootScope';
 export const EMERA_GET_SCOPE = '_emeraGetScope';
 
 export const EMERA_JSX_LANG_NAME = 'emera';
-export const EMERA_COMPONENT_PREFIX = 'Em';
 export const EMERA_JS_LANG_NAME = 'emjs';
 export const EMERA_INLINE_JS_PREFIX = `${EMERA_JS_LANG_NAME}:`;
 export const EMERA_INLINE_JSX_PREFIX = `${EMERA_JSX_LANG_NAME}:`;
+export const EMERA_JSX_SHORTHAND_LANG_NAME = 'emmd';

src/processors/code-processor.ts

@@ -16,7 +16,7 @@ import { MarkdownPostProcessorContext, TFile, MarkdownView } from 'obsidian';
 import { EmeraPlugin } from '../plugin';
 import { iife } from '../utils';
 import { emeraCurrentEditorStateField, findCurrentView, isCursorBetweenNodes, isCursorOnSameLineWithNode } from './utils';
-import { EMERA_INLINE_JS_PREFIX, EMERA_INLINE_JSX_PREFIX, EMERA_JS_LANG_NAME, EMERA_JSX_LANG_NAME } from '../consts';
+import { EMERA_INLINE_JS_PREFIX, EMERA_INLINE_JSX_PREFIX, EMERA_JS_LANG_NAME, EMERA_JSX_LANG_NAME, EMERA_JSX_SHORTHAND_LANG_NAME } from '../consts';
 import { getAnonymousDocScope, getPageScope, getScope, ScopeNode } from '../scope';
 import { compileJsxIntoFactory, importFromString, transpileCode } from '../bundler';
 import { renderComponent } from '../renderer';
@@ -346,18 +346,20 @@ export class EmeraCodeProcessor {
                 return;
             }
 
-            console.log('MD post', el, ctx);
+            // console.log('MD post', el, ctx);
 
             const file = ctx.sourcePath ? this.plugin.app.vault.getFileByPath(ctx.sourcePath) : null;
             const code = Array.from(el.querySelectorAll('code'));
             const toProcess = code.flatMap((el): ToProcessPreviewRecord[] => {
                 const content = el.textContent ?? '';
                 if (el.parentElement?.tagName.toLowerCase() === 'pre') {
                     // Multi-line code block
-                    if (el.className.includes(`language-${EMERA_JSX_LANG_NAME}`)) {
-                        const regex = new RegExp(`language-${EMERA_JSX_LANG_NAME}:([\\S]+)`);
+                    console.log('Process el', el.className);
+                    if (el.className.includes(`language-${EMERA_JSX_LANG_NAME}`) || el.className.includes(`language-${EMERA_JSX_SHORTHAND_LANG_NAME}`)) {
+                        const regex = new RegExp(`language-(?:${EMERA_JSX_LANG_NAME}|${EMERA_JSX_SHORTHAND_LANG_NAME}):([\\S]+)`);
                         const match = regex.exec(el.className);
                         const componentSpecifier = match?.[1];
+                        console.log('Process el', el.className, 'match', match);
                         return [{
                             type: 'block-jsx',
                             el,
@@ -504,15 +506,15 @@ export class EmeraCodeProcessor {
 
                     const isFenceStart = node.type.name.includes('HyperMD-codeblock-begin');
                     const isFenceEnd = node.type.name.includes('HyperMD-codeblock-end');
-                    const containstEmeraSpecifier = nodeContent.trim().endsWith(EMERA_JSX_LANG_NAME) || nodeContent.trim().includes(`${EMERA_JSX_LANG_NAME}:`) || nodeContent.trim().endsWith(EMERA_JS_LANG_NAME);
+                    const containstEmeraSpecifier = nodeContent.trim().endsWith(EMERA_JSX_LANG_NAME) || nodeContent.trim().includes(`${EMERA_JSX_SHORTHAND_LANG_NAME}:`) || nodeContent.trim().endsWith(EMERA_JS_LANG_NAME);
 
                     if (isFenceStart && containstEmeraSpecifier && !currentBlockStartNode) {
                         currentBlockStartNode = node.node;
                         currentBlockStartType = nodeContent.trim().endsWith(EMERA_JS_LANG_NAME) ? 'block-js' : 'block-jsx';
                     } else if (isFenceEnd && currentBlockStartNode) {
                         const text = state.doc.sliceString(currentBlockStartNode.from, node.to).trim();
 
-                        const regex = new RegExp(`([\`~]{3,})(?:${EMERA_JS_LANG_NAME}|${EMERA_JSX_LANG_NAME}:?(\\S+)?)\\n([\\s\\S]+)\\n\\1`);
+                        const regex = new RegExp(`([\`~]{3,})(?:${EMERA_JS_LANG_NAME}|(?:${EMERA_JSX_LANG_NAME}|${EMERA_JSX_SHORTHAND_LANG_NAME}):?(\\S+)?)\\n([\\s\\S]+)\\n\\1`);
                         const match = regex.exec(text);
 
                         if (match) {

src/side-effects.ts

@@ -1,11 +1,12 @@
-import { EMERA_GET_SCOPE, EMERA_JS_LANG_NAME, EMERA_JSX_LANG_NAME, EMERA_MODULES, EMERA_ROOT_SCOPE } from "./consts";
+import { EMERA_GET_SCOPE, EMERA_JS_LANG_NAME, EMERA_JSX_LANG_NAME, EMERA_JSX_SHORTHAND_LANG_NAME, EMERA_MODULES, EMERA_ROOT_SCOPE } from "./consts";
 import { registerCodemirrorMode } from './utils';
 import { exposedModules } from "./exposed-modules";
 import { getScope, ScopeNode } from './scope';
 
 // Add syntax highlight for emera
 registerCodemirrorMode(EMERA_JSX_LANG_NAME, 'jsx');
 registerCodemirrorMode(EMERA_JS_LANG_NAME, 'javascript');
+registerCodemirrorMode(EMERA_JSX_SHORTHAND_LANG_NAME, 'markdown');
 
 // Expose modules
 (window as any)[EMERA_MODULES] = new Proxy({