customize gfm-growi mode header classes

src/client/js/util/codemirror/gfm-growi.mode.js

@@ -10,7 +10,8 @@ window.CodeMirror.defineMode('gfm-growi', (cmConfig, modeCfg) => {
   const origToken = mode.token;
   mode.token = function(stream, state) {
     let classes = origToken(stream, state) || '';
-    classes = classes.replace(/(^| )(header\S*)/g, '$1line-cm-$2');
+    // https://regex101.com/r/Fep0w2/1
+    classes = classes.replace(/(^| )header(\S*)/g, '$1header$2 line-grw-cm-header-line');
     return /^\s*$/.test(classes) ? null : classes;
   };
 

src/client/styles/scss/_override-codemirror.scss

@@ -1,5 +1,5 @@
 .CodeMirror {
-  .cm-header.CodeMirror-line {
+  pre.CodeMirror-line.grw-cm-header-line {
     padding-top: 0.16em;
     padding-bottom: 0.08em;
     font-family: $font-family-monospace;
@@ -11,22 +11,22 @@
       opacity: 0.3;
     }
 
-    &.cm-header-1 {
+    .cm-header-1 {
       font-size: 1.9em;
     }
-    &.cm-header-2 {
+    .cm-header-2 {
       font-size: 1.6em;
     }
-    &.cm-header-3 {
+    .cm-header-3 {
       font-size: 1.4em;
     }
-    &.cm-header-4 {
+    .cm-header-4 {
       font-size: 1.35em;
     }
-    &.cm-header-5 {
+    .cm-header-5 {
       font-size: 1.25em;
     }
-    &.cm-header-6 {
+    .cm-header-6 {
       font-size: 1.2em;
     }
   }