markdown解析器完成引用,列表,任务,分割线的解析

src/markd/index.wc

@@ -1,5 +1,5 @@
 <template>
-  <div class="markd"><slot /></div>
+  <div class="markd-box"><slot /></div>
 </template>
 
 <style lang="scss">
@@ -9,10 +9,8 @@
   color: nth($cd, 1);
   font-size: 14px;
 }
-.markd {
+.markd-box {
   padding: 10px;
-  // white-space: pre-wrap;
-  // word-wrap: break-word;
 }
 a {
   text-decoration: underline;
@@ -23,8 +21,9 @@ a:hover {
   text-decoration: none;
 }
 
-em {
+em,
-  color: nth($cgr, 3);
+del {
+  color: nth($cgr, 2);
 }
 strong {
   color: nth($cd, 3);
@@ -38,7 +37,7 @@ a {
 em,
 strong,
 del {
-  padding: 0 3px;
+  padding: 0 2px;
 }
 p {
   margin: 15px 0;
@@ -129,13 +128,19 @@ blockquote.md-quote {
   }
 }
 
-hr {
+fieldset.md-hr {
-  height: 1px;
   margin: 30px 0;
-  line-height: 1px;
   border: 0;
+  border-top: 1px dashed nth($cp, 3);
+
+  legend {
+    padding: 0 5px;
     color: nth($cgr, 1);
-  background-color: nth($cgr, 1);
+    text-align: center;
+    &::before {
+      content: '华丽丽的分割线';
+    }
+  }
 }
 ol {
   margin-left: 1em;
@@ -166,36 +171,40 @@ h3,
 h4,
 h5,
 h6 {
-  position: relative;
   margin: 15px 0;
+  line-height: 2;
   font-weight: bold;
   font-size: 16px;
 
-  span {
+  code.inline {
-    position: relative;
+    background: none;
-    display: inline-block;
-    padding: 0 5px;
   }
   a {
     text-decoration: none;
     color: #333;
-
+  }
+}
+h3,
+h4,
+h5,
+h6 {
+  a {
     &::before {
       content: '# ';
       color: nth($ct, 1);
+      font-weight: normal;
     }
   }
-  &:hover a {
-    visibility: visible;
-  }
 }
 h1 {
   margin: 0 0 30px;
   font-size: 24px;
+  text-align: center;
 }
 h2 {
   margin: 20px 0;
   font-size: 22px;
+  border-bottom: 1px solid nth($cp, 2);
 }
 h3 {
   margin: 20px 0 15px;
@@ -232,10 +241,11 @@ table {
 code.inline {
   display: inline-block;
   margin: 0 2px;
-  padding: 0 3px;
+  padding: 0 2px;
   color: nth($co, 3);
   background: nth($cp, 1);
   border-radius: 2px;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 </style>
 
@@ -243,7 +253,7 @@ code.inline {
 import $ from '../utils'
 import '../code/index'
 
-// import parser from './core'
+import core from './core'
 import parser from './parser'
 
 export default class Markd {
@@ -257,9 +267,16 @@ export default class Markd {
   }
 
   mounted() {
-    // this.__BOX__.innerHTML = parser.safe(this.textContent)
+    // this.__BOX__.innerHTML = core.safe(this.textContent)
     this.__BOX__.innerHTML = parser(this.textContent)
     this.textContent = ''
+
+    $.bind(this.__BOX__, 'click', ev => {
+      if (ev.target.className === 'md-head-link') {
+        var ot = ev.target.offsetTop
+        document.documentElement.scrollTop = ot
+      }
+    })
   }
 }
 </script>

src/markd/parser.js

@@ -6,6 +6,8 @@
 
 'use strict'
 const HR_LIST = ['=', '-', '_', '*']
+const LIST_REG = /^(([\+\-\*])|(\d+\.))\s/
+const TODO_REG = /^\[(x|\s)\]\s/
 const log = console.log
 
 const Helper = {
@@ -16,12 +18,42 @@ const Helper = {
       return str.startsWith(s.repeat(3))
     }
     return false
+  },
+  // 是否列表, -1不是, 1为有序列表, 0为无序列表
+  isList(str) {
+    var v = str.trim()
+    if (LIST_REG.test(v)) {
+      var n = +v[0]
+      if (n === n) {
+        return 1
+      } else {
+        return 0
+      }
+    }
+    return -1
+  },
+  // 是否任务列表
+  isTodo(str) {
+    var v = str.trim()
+    if (TODO_REG.test(v)) {
+      return v[1] === 'x' ? 1 : 0
+    }
+    return -1
+  },
+  ltrim(str) {
+    if (str.trimStart) {
+      return str.trimStart()
+    }
+    return str.replace(/^\s+/, '')
   }
 }
 
-const Tool = {
+class Tool {
+  constructor(list) {
+    this.list = list
+  }
   // 初始化字符串, 处理多余换行等
-  init(str) {
+  static init(str) {
     // 去掉\r, 将\t转为空格(2个)
     str = str.replace(/\r/g, '').replace(/\t/g, '  ')
     var list = []
@@ -52,10 +84,9 @@ const Tool = {
         }
       }
     }
-    log(list)
+
-    this.list = list
+    return new this(list)
-    return this
+  }
-  },
 
   parse() {
     var html = ''
@@ -65,6 +96,10 @@ const Tool = {
     var blockquoteLevel = 0
     var isParagraph = false
 
+    var isList = false
+    var orderListLevel = -1
+    var unorderListLevel = -1
+
     //
     for (let it of this.list) {
       // 空行
@@ -78,10 +113,9 @@ const Tool = {
           // 引用结束
           if (isBlockquote) {
             isBlockquote = false
-            html += ''
             if (emptyLineLength > 0) {
-              while (blockquoteLevel > 0) {
               emptyLineLength = 0
+              while (blockquoteLevel > 0) {
                 blockquoteLevel--
                 html += '</blockquote>'
               }
@@ -89,13 +123,25 @@ const Tool = {
             continue
           }
 
+          if (isList) {
+            while (orderListLevel > -1 || unorderListLevel > -1) {
+              if (orderListLevel > unorderListLevel) {
+                html += '</ol>'
+                orderListLevel--
+              } else {
+                html += '</ul>'
+                unorderListLevel--
+              }
+            }
+            isList = false
+            continue
+          }
+
           //
           if (isParagraph) {
             isParagraph = false
             html += '</p>'
-          } /* else {
+          }
-            html += '<br>'
-          } */
         }
       } else {
         // wc-code标签直接拼接
@@ -109,35 +155,45 @@ const Tool = {
             continue
           }
 
+          // 无属性标签
+          if (Helper.isHr(it)) {
+            html += '<fieldset class="md-hr"><legend></legend></fieldset>'
+            continue
+          }
+
+          // 优先处理一些常规样式
           it = it
             .replace(/`(.*?)`/g, '<code class="inline">$1</code>')
             .replace(/(\-\-|\*\*)(.*?)\1/g, '<strong>$2</strong>')
-            .replace(/(\-|\*)(.*?)\1/g, '<em>$2</em>')
+            .replace(/(\-|\_|\*)(.*?)\1/g, '<em>$2</em>')
+            .replace(/~~(.*?)~~/g, '<del>$1</del>')
             .replace(/\!\[([^]*?)\]\(([^)]*?)\)/g, '<img src="$2" alt="$1">')
             .replace(/\[([^]*?)\]\(([^)]*?)\)/g, '<a href="$2">$1</a>')
 
-          //
+          // 引用
           if (it.startsWith('>')) {
-            html += it.replace(/^(>+) /, m => {
-              let len = m.trim().length
-              let tmp = ''
-              if (isBlockquote) {
-                // 若之前已经有一个未闭合的引用, 需要减去已有缩进级别, 避免产生新的引用标签
-                len = len - blockquoteLevel
-              } else {
-                blockquoteLevel = len
-              }
-              log('bq: ', blockquoteLevel, it)
-              while (len > 0) {
-                len--
-                tmp += '<blockquote class="md-quote">'
-              }
-              return tmp
-            })
-
             if (isBlockquote) {
               html += '<br>'
             }
+            html += it.replace(/^(>+) /, (p, m) => {
+              let len = m.length
+              let tmp = ''
+              let loop = len
+              // 若之前已经有一个未闭合的引用, 需要减去已有缩进级别, 避免产生新的引用标签
+              if (isBlockquote) {
+                loop = len - blockquoteLevel
+              } else {
+              }
+
+              while (loop > 0) {
+                loop--
+                tmp += '<blockquote class="md-quote">'
+              }
+
+              blockquoteLevel = len
+              return tmp
+            })
+
             isParagraph = false
             isBlockquote = true
             continue
@@ -148,17 +204,79 @@ const Tool = {
             continue
           }
 
-          //
+          // 标题只能是单行
           if (it.startsWith('#')) {
             isParagraph = false
-            let end = ''
-            html += it.replace(/^#{1,6} /, m => {
-              let level = m.trim().length
-              end = `</a></h${level}>`
-              return `<h${level}><a href="#">`
-            })
-            html += end
 
+            html += it.replace(/^(#{1,6}) (.*)/, (p, m1, m2) => {
+              m2 = m2.trim()
+              let level = m1.trim().length
+              let hash = m2.replace(/\s/g, '').replace(/<\/?[^>]*?>/g, '')
+
+              if (level === 1) {
+                return `<h1>${m2}</h1>`
+              } else {
+                return `<h${level}><a href="#${hash}" class="md-head-link">${m2}</a></h${level}>`
+              }
+            })
+
+            continue
+          }
+
+          // 列表
+          let listChecked = Helper.isList(it)
+          if (~listChecked) {
+            // 左侧空格长度
+            let tmp = Helper.ltrim(it)
+            let ltrim = it.length - tmp.length
+            let word = tmp.replace(LIST_REG, '').trim()
+            let level = Math.floor(ltrim / 2)
+            let tag = listChecked > 0 ? 'ol' : 'ul'
+
+            if (!isList) {
+              html += `<${tag}>`
+              if (listChecked === 1) {
+                orderListLevel = level
+              } else {
+                unorderListLevel = level
+              }
+              html += `<li>${word}</li>`
+            } else {
+              if (listChecked === 1) {
+                if (level > orderListLevel) {
+                  html = html.replace(/<\/li>$/, '')
+                  html += `<${tag}><li>${word}</li>`
+                } else if (level === orderListLevel) {
+                  html += `<li>${word}</li>`
+                } else {
+                  html += `</${tag}></li><li>${word}</li>`
+                }
+                orderListLevel = level
+              } else {
+                if (level > unorderListLevel) {
+                  html = html.replace(/<\/li>$/, '')
+                  html += `<${tag}><li>${word}</li>`
+                } else if (level === unorderListLevel) {
+                  html += `<li>${word}</li>`
+                } else {
+                  html += `</${tag}></li><li>${word}</li>`
+                }
+                unorderListLevel = level
+              }
+            }
+
+            isList = true
+            continue
+          }
+
+          // 任务
+          let todoChecked = Helper.isTodo(it)
+          if (~todoChecked) {
+            let word = it.replace(TODO_REG, '').trim()
+            let stat = todoChecked === 1 ? 'checked' : ''
+            let txt = todoChecked === 1 ? `<del>${word}</del>` : word
+
+            html += `<section><wc-checkbox readonly ${stat}>${txt}</wc-checkbox></section>`
             continue
           }