style: 编辑区增加对yaml语法的高亮展示

Tencent · Oct 29, 2024 · 08c220d · 08c220d
1 parent ef7a946
commit 08c220d
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 7 deletions.
diff --git a/src/Editor.js b/src/Editor.js
@@ -17,6 +17,7 @@
 import codemirror from 'codemirror';
 // import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/gfm/gfm'; // https://codemirror.net/mode/gfm/index.html
+import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter'; // https://codemirror.net/5/mode/yaml-frontmatter/index.html
 // import 'codemirror/mode/xml/xml';
 import 'codemirror/addon/edit/continuelist';
 import 'codemirror/addon/edit/closetag';
@@ -78,7 +79,7 @@ export default class Editor {
         // matchBrackets: true, // 括号匹配
         // mode: 'gfm', // 从markdown模式改成gfm模式，以使用默认高亮规则
         mode: {
-          name: 'gfm',
+          name: 'yaml-frontmatter', // yaml-frontmatter在gfm的基础上增加了对yaml的支持
           gitHubSpice: false,
         },
         lineWrapping: true, // 自动换行

diff --git a/src/sass/themes/blue.scss b/src/sass/themes/blue.scss
@@ -133,7 +133,7 @@ $mdBlockquoteBg: $VIOLET1;
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {

diff --git a/src/sass/themes/dark.scss b/src/sass/themes/dark.scss
@@ -106,7 +106,7 @@ $mdSvgTextColor: rgb(250, 160, 0);
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {

diff --git a/src/sass/themes/green.scss b/src/sass/themes/green.scss
@@ -120,7 +120,7 @@ $mdBlockquoteBg: $GREEN1;
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {

diff --git a/src/sass/themes/light.scss b/src/sass/themes/light.scss
@@ -106,7 +106,7 @@ $mdBlockquoteBg: rgb(231, 245, 255);
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {

diff --git a/src/sass/themes/red.scss b/src/sass/themes/red.scss
@@ -120,7 +120,7 @@ $mdBlockquoteBg: $PINK1;
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {

diff --git a/src/sass/themes/violet.scss b/src/sass/themes/violet.scss
@@ -122,7 +122,7 @@ $mdBlockquoteBg: $VIOLET1;
         span, .cm-variable-2, .cm-string, .cm-strong, .cm-em, .cm-meta {
           color: $editorColor;
         }
-        .cm-image-marker, .cm-quote, .cm-header {
+        .cm-image-marker, .cm-quote, .cm-header, .cm-atom {
           color: $editorImportantColor;
         }
         .cm-url {