artalk 2.2.2 → 2.2.3

package/index.html

@@ -29,6 +29,9 @@
     body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
     .to-top { right: 25px; }
   </style>
+  <!--<link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/arta.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>-->
 </head>
 <body>
   <div class="card billboard atk-fade-in">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "backendMinVersion": "2.1.1",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",

package/src/lib/utils.ts

@@ -150,25 +150,34 @@ export function initMarked(ctx: Context) {
     return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ''} `);
   }
 
+  renderer.code = (block, lang) => {
+    // Colorize the block only if the language is known to highlight.js
+    const realLang = (!lang ? 'plaintext' : lang)
+    let colorized = block
+    if ((window as any).hljs) {
+      if (realLang && (window as any).hljs.getLanguage(realLang)) {
+        colorized = (window as any).hljs.highlight(realLang, block).value
+      }
+    } else {
+      colorized = hanabi(block)
+    }
+
+    return `<pre rel="${realLang}">\n`
+      + `<code class="hljs language-${realLang}">${colorized.replace(/&amp;/g, '&')}</code>\n`
+      + `</pre>`
+  }
+
   // @see https://github.com/markedjs/marked/blob/4afb228d956a415624c4e5554bb8f25d047676fe/src/Tokenizer.js#L329
   const nMarked = libMarked
   libMarked.setOptions({
     renderer,
-    highlight: (code) => hanabi(code),
     pedantic: false,
     gfm: true,
     breaks: true,
     smartLists: true,
     smartypants: true,
     xhtml: false,
-    sanitize: true,
-    sanitizer: (html) => insane(html, {
-      ...insane.defaults,
-      allowedAttributes: {
-        ...insane.defaults.allowedAttributes,
-        img: ['src', 'atk-emoticon']
-      },
-    }),
+    sanitize: false,
     silent: true,
   })
 
@@ -177,7 +186,49 @@ export function initMarked(ctx: Context) {
 
 /** 解析 markdown */
 export function marked(ctx: Context, src: string): string {
-  return ctx.markedInstance.parse(src)
+  // @link https://gist.github.com/lionel-rowe/bb384465ba4e4c81a9c8dada84167225
+  return insane(ctx.markedInstance.parse(src), {
+    allowedClasses: {},
+    allowedSchemes: ['http', 'https', 'mailto'],
+    allowedTags: [
+      'a', 'abbr', 'article', 'b', 'blockquote', 'br', 'caption', 'code', 'del', 'details', 'div', 'em',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'ins', 'kbd', 'li', 'main', 'mark',
+      'ol', 'p', 'pre', 'section', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table',
+      'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
+    ],
+    allowedAttributes: {
+      '*': ['title', 'accesskey'],
+      a: ['href', 'name', 'target', 'aria-label'],
+      img: ['src', 'alt', 'title', 'atk-emoticon', 'aria-label'],
+      // for code highlight
+      code: ['class'],
+      span: ['class', 'style'],
+    },
+    filter: node => {
+      // allow hljs style
+      const allowed = [
+        [ 'code', /^hljs\W+language-(.*)$/ ],
+        [ 'span', /^(hljs-.*)$/ ]
+      ]
+      allowed.forEach(([ tag, reg ]) => {
+        if (
+          node.tag === tag
+          && !!node.attrs.class
+          && !(reg as RegExp).test(node.attrs.class)
+        ) {
+          delete node.attrs.class
+        }
+      })
+
+      // allow <span> set color sty
+      if (node.tag === 'span' && !!node.attrs.style
+          && !/^color:(\W+)?#[0-9a-f]{3,6};?$/i.test(node.attrs.style)) {
+        delete node.attrs.style
+      }
+
+      return true
+    }
+  })
 }
 
 /** 获取修正后的 UserAgent */

package/src/style/main.less

@@ -7,28 +7,46 @@
 }
 
 .artalk, .atk-layer-wrap {
+  line-height: @line-height;
+  color: var(--at-color-font);
+  font-family: @font-family;
+  word-wrap: break-word;
+  word-break: break-all;
+
   * {
     box-sizing: border-box;
-    line-height: @line-height;
+  }
+
+  input, textarea, button, optgroup, select {
+    font-family: inherit;
+  }
+
+  @codeFont: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
+
+  code {
+    font-family: @codeFont;
+    margin: 0 .3em;
+    padding: .1em .2em;
+    background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    font-family: @font-family;
-    word-wrap: break-word;
-    word-break: break-all;
+    border-radius: @block-radius;
   }
 
   pre {
-    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 0;
+    line-height: 0;
+  }
+
+  pre code {
+    * { font-family: @codeFont; }
     line-height: @line-height;
+    display: block;
+    padding: 10px 15px;
+    white-space: pre-wrap;
     background-color: var(--at-color-bg-grey);
     color: var(--at-color-font);
-    padding: 10px 15px;
-    border-radius: @block-radius;
     margin: 0;
-    font-family: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
-
-    code {
-      white-space: pre-wrap;
-    }
   }
 
   a {
@@ -55,6 +73,28 @@
   img {
     max-width: 100%;
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1.5em;
+    font-size: .96em
+  }
+
+  td, th {
+    text-align: left;
+    padding: 4px 8px 4px 10px;
+    border: 1px solid var(--at-color-border)
+  }
+
+  td {
+    vertical-align: top
+  }
+
+  tr:nth-child(even) {
+    background-color: var(--at-color-bg-grey);
+  }
 }
 
 .atk-hide {