Refactor LangProcessor/Template for use with markdown-it

resource/js/util/GrowiRenderer.js

@@ -88,17 +88,18 @@ export default class GrowiRenderer {
   }
 
   codeRenderer(code, langExt) {
-    let citeTag = '';
     if (langExt) {
       const langAndFn = langExt.split(':');
       const lang = langAndFn[0];
       const langFn = langAndFn[1] || null;
 
-      if (langFn) {
-        citeTag = `<cite>${langFn}</cite>`;
+      // process langProcessors
+      if (this.langProcessors[lang] != null) {
+        return this.langProcessors[lang].process(code, langExt);
       }
 
       if (hljs.getLanguage(lang)) {
+        let citeTag = (langFn) ? `<cite>${langFn}</cite>` : '';
         try {
           return `<pre class="hljs">${citeTag}<code class="language-${lang}">${hljs.highlight(lang, code, true).value}</code></pre>`;
         } catch (__) {}

resource/js/util/LangProcessor/Template.js

@@ -56,9 +56,17 @@ export default class Template {
       pageName = this.parseTemplateString(lang.split(':')[1]);
     }
     code = this.parseTemplateString(code);
-    return `
-    <div class="page-template-builder">
-    <button class="template-create-button btn btn-default" data-template="${templateId}" data-path="${pageName}"><i class="fa fa-pencil"></i> ${pageName}</button>
-      <pre><code id="${templateId}" class="lang-${lang}">${code}\n</code></pre></div>\n`;
+
+    const content = `
+      <div class="page-template-builder">
+        <button class="template-create-button btn btn-default" data-template="${templateId}" data-path="${pageName}#edit-form">
+          <i class="fa fa-pencil"></i> ${pageName}
+        </button>
+        <pre><code id="${templateId}" class="lang-${lang}">${code}\n</code></pre>
+      </div>`;
+
+    // wrap with <pre-dummy>
+    //   to avoid to be wrapped with <pre><code> by markdown-it
+    return `<pre-dummy>${content}<pre-dummy>\n`;
   }
 }