Improve markdown support and css tokens (#246)

source/app/metrics/utils.mjs

@@ -162,19 +162,34 @@
 
 /**Markdown-html sanitizer-interpreter */
   export async function markdown(text, {mode = "inline", codelines = Infinity} = {}) {
-    //Sanitize once user text and then apply markdown. Depending on mode, reapply stricter sanitization if required
-      let rendered = htmlsanitize(await marked(htmlsanitize(text), {
+    //Sanitize user input once to prevent injections and parse into markdown
+      let rendered = await marked(htmlsanitize(text).replace(/^>/gm, ">"), {
         highlight(code, lang) {
           return lang in prism.languages ? prism.highlight(code, prism.languages[lang]) : code
         },
         silent:true,
         xhtml:true,
-      }), {
-        inline:{allowedTags:["br", "code", "span"], allowedAttributes:{code:["class"], span:["class"]}},
-      }[mode])
+      })
+    //Markdown mode
+      switch (mode) {
+        case "inline":{
+          rendered = htmlsanitize(htmlsanitize(rendered, {
+            allowedTags:["h1", "h2", "h3", "h4", "h5", "h6", "br", "blockquote", "code", "span"],
+            allowedAttributes:{code:["class"], span:["class"]},
+          }), {
+            allowedAttributes:{code:["class"], span:["class"]},
+            transformTags:{h1:"b", h2:"b", h3:"b", h4:"b", h5:"b", h6:"b", blockquote:"i"},
+          })
+          break
+        }
+        default:
+          break
+      }
     //Trim code snippets
       rendered = rendered.replace(/(?<open><code[\s\S]*?>)(?<code>[\s\S]*?)(?<close><\/code>)/g, (m, open, code, close) => { //eslint-disable-line max-params
         const lines = code.trim().split("\n")
+        if ((lines.length > 1)&&(!/class="[\s\S]*"/.test(open)))
+          open = open.replace(">", ' class="language-multiline">')
         return `${open}${lines.slice(0, codelines).join("\n")}${lines.length > codelines ? `\n<span class="token trimmed">(${lines.length-codelines} more ${lines.length-codelines === 1 ? "line was" : "lines were"} trimmed)</span>` : ""}${close}`
       })
     return rendered

source/templates/classic/partials/stackoverflow.ejs

@@ -76,7 +76,7 @@
                         </div>
                       <% } %>
                     </div>
-                    <div class="body">
+                    <div class="body markdown">
                       <%- entry.body %>
                     </div>
                     <div class="infos">
@@ -122,7 +122,7 @@
                         </div>
                       <% } %>
                     </div>
-                    <div class="body">
+                    <div class="body markdown">
                       <%- entry.body %>
                     </div>
                     <div class="infos">

source/templates/classic/style.css

@@ -939,7 +939,11 @@
     overflow: hidden;
   }
 
-/* Syntax highlighting */
+/* Markdown and syntax highlighting */
+  .markdown b, .markdown i {
+    display: inline-block;
+    width: 97%;
+  }
   code {
     background-color: #7777771F;
     display: inline-block;
@@ -954,35 +958,23 @@
     width: 97%;
     margin-top: 4px;
   }
-  .token.comment, .token.prolog, .token.doctype, .token.cdata {
-    color: #6a737d;
+  .token.comment {
+    color: #669900;
   }
   .token.punctuation {
-    color: #24292e;
+    color: #8a93a8;
   }
-  .token.namespace, .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {
-    color: #d73a49;
+  .token.namespace, .token.constant, .token.symbol, .token.keyword {
+    color: #b44418;
   }
-  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
-    color: #032f62;
+  .token.regex, .token.string, .token.char, .token.number, .token.boolean {
+    color: #2777AA;
   }
-  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
-    color: #005cc5;
+  .token.property, .token.tag {
+    color: #48428a;
   }
-  .token.atrule, .token.attr-value, .token.keyword {
-    color: #6f42c1
-  }
-  .token.regex, .token.important {
-    color: #e90;
-  }
-  .token.important, .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-  .token.deleted {
-    color: red;
+  .token.builtin, .token.operator {
+    color: #106cbc;
   }
   .token.trimmed {
     font-style: italic;