Fix: template handler

resource/css/_wiki.scss

@@ -100,7 +100,7 @@ div.body {
   pre {
     line-height: 1.4em;
     font-size: .9em;
-    border: solid 1px #333;
+    border: none;
     background: #444;
     color: #f0f0f0;
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -140,6 +140,21 @@ div.body {
     }
   }
 
+  .wiki-code {
+    position: relative;
+
+    cite {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0 4px;
+      background: #ccc;
+      color: #333;
+      font-size: .8em;
+
+    }
+  };
+
   .page-template-builder {
     position: relative;
 

resource/js/util/CrowiRenderer.js

@@ -44,15 +44,16 @@ export default class CrowiRenderer {
   codeRenderer(code, lang, escaped) {
     let result = '', hl;
 
-
     if (lang) {
-      const langPattern = lang.split(':')[0];
+      const langAndFn = lang.split(':');
+      const langPattern = langAndFn[0];
+      const langFn = langAndFn[1] || null;
       if (this.langProcessors[langPattern]) {
         return this.langProcessors[langPattern].process(code, lang);
       }
 
       try {
-        hl = hljs.highlight(lang, code);
+        hl = hljs.highlight(langPattern, code);
         result = hl.value;
         escaped = true;
       } catch (e) {
@@ -60,11 +61,16 @@ export default class CrowiRenderer {
       }
 
       result = (escape ? result : Crowi.escape(result, true));
-      return `<pre><code class="lang-${lang}">${result}\n</code></pre>\n`;
+
+      let citeTag = '';
+      if (langFn) {
+        citeTag = `<cite>${langFn}</cite>`;
+      }
+      return `<pre class="wiki-code wiki-lang">${citeTag}<code class="lang-${lang}">${result}\n</code></pre>\n`;
     }
 
     // no lang specified
-    return `<pre><code>${Crowi.escape(code, true)}\n</code></pre>`;
+    return `<pre class="wiki-code"><code>${Crowi.escape(code, true)}\n</code></pre>`;
 
   }
 
@@ -87,6 +93,18 @@ export default class CrowiRenderer {
         renderer: markedRenderer,
       });
 
+      // override
+      marked.Lexer.lex = function(src, options) {
+        var lexer = new marked.Lexer(options);
+
+        // this is maybe not an official way
+        if (lexer.rules) {
+          lexer.rules.fences = /^ *(`{3,}|~{3,})[ \.]*([^\r\n]+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/;
+        }
+
+        return lexer.lex(src);
+      };
+
       parsed = marked(markdown);
     } catch (e) { console.log(e, e.stack); }