refactor: modify codemirror instead of replacing markdown to implemen…

…t highlight

package.json

@@ -25,6 +25,7 @@
     "@rollup/plugin-virtual": "^3.0.2",
     "@types/jquery": "3.3.1",
     "@types/node": "16.18.0",
+    "@types/typora": "npm:@typora-community-plugin/typora-types@^1.0.8",
     "@typora-community-plugin/core": "^2.0.0-beta.36",
     "archiver": "^5.3.2",
     "esbuild": "^0.18.20",

src/main.ts

@@ -1,4 +1,5 @@
-import { Plugin, PluginSettings, SettingTab } from '@typora-community-plugin/core'
+import { editor } from 'typora'
+import { Plugin, PluginSettings, SettingTab, decorate } from '@typora-community-plugin/core'
 
 
 interface LangMapperSettings {
@@ -9,9 +10,15 @@ const DEFAULT_SETTINGS: LangMapperSettings = {
   mapper: {
     'dataviewjs': 'js',
     'dataview': 'sql',
+    'markmap': 'markdown',
   }
 }
 
+const aliasMapper: Record<string, string> = {
+  'js': 'javascript',
+  'ts': 'typescript',
+}
+
 export default class LangMapperPlugin extends Plugin<LangMapperSettings> {
 
   async onload() {
@@ -22,25 +29,14 @@ export default class LangMapperPlugin extends Plugin<LangMapperSettings> {
 
     this.settings.setDefault(DEFAULT_SETTINGS)
 
-    this.registerMarkdownPreProcessor({
-      when: 'preload',
-      type: 'code',
-      process: codeblock =>
-        codeblock.replace(/^(\n?\s*\`{3,})(\w+)(?=\n)/, ($, $1, lang) => {
-          const mapper = this.settings.get('mapper')
-          return mapper[lang] ? `${$1}${mapper[lang]} ${lang}` : $
-        })
-    })
-
-    this.registerMarkdownPreProcessor({
-      when: 'presave',
-      type: 'code',
-      process: codeblock =>
-        codeblock.replace(/^(\n?\s*\`{3,})(\w+) (\w+)(?=\n)/, ($, $1, lang1, lang2) => {
-          const mapper = this.settings.get('mapper')
-          return mapper[lang2] && (lang1 === mapper[lang2]) ? `${$1}${lang2}` : $
-        })
-    })
+    this.register(
+      decorate.returnValue(editor.fences, 'addCodeBlock', (_, cm) => {
+        const mapper = this.settings.get('mapper')
+        const lang = cm.getOption('mode')
+        const lang2 = mapper[lang]
+        cm.setOption('mode', aliasMapper[lang2] ?? lang2 ?? lang)
+        return cm
+      }))
 
     this.registerSettingTab(new LangMapperSettingTab(this))
   }

src/manifest.json

@@ -5,7 +5,7 @@
   "author": "plylrnsdy",
   "authorUrl": "https://github.com/plylrnsdy",
   "repo": "typora-community-plugin/typora-plugin-codeblock-highlight-mapper",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "minAppVersion": "1.5.0",
   "minCoreVersion": "2.0.0-beta.31",
   "platforms": ["win32", "linux", "darwin"]

test/vault/.typora/core.json

@@ -11,6 +11,19 @@
     "quickOpenInCurrentWin": true,
     "ignoreFile": true,
     "ignoreFileGlob": ".git",
-    "ribbonState": {}
+    "ribbonState": {
+      "core.search": {
+        "visible": true,
+        "order": 0
+      },
+      "core.file-explorer": {
+        "visible": true,
+        "order": 1
+      },
+      "core.outline": {
+        "visible": true,
+        "order": 2
+      }
+    }
   }
 }

test/vault/.typora/data/typora-community-plugin.codeblock-highlight-mapper.json

@@ -0,0 +1,9 @@
+{
+  "version": 1,
+  "settings": {
+    "mapper": {
+      "dataviewjs": "javascript",
+      "dataview": "sql"
+    }
+  }
+}

test/vault/doc.md

@@ -8,3 +8,5 @@ SELECT TASKS
 await dv.view('view.js')
 ```
 
+
+

test/vault/doc2.md

@@ -0,0 +1 @@
+# doc2