代码增加着色;增加一个尺寸规范

src/code/colorful.js

@@ -0,0 +1,56 @@
+/**
+ * 简单的代码着色 (html, css, js)
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2021/01/30 14:00:12
+ */
+
+const DOCTYPE_EXP = /<\!DOCTYPE html>/
+const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
+const TAG_END_EXP = /<\/([\w\-]+)>/g
+const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
+const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
+// const TAGS = 'a,b,i'
+
+export function colorHtml(code) {
+  code = code
+    .replace(DOCTYPE_EXP, '[tag]&lt;!DOCTYPE [attr]html[/attr]&gt;[/tag]')
+    .replace(TAG_START_EXP, (m, tag, attr) => {
+      if (attr) {
+        attr = attr.replace(TAG_ATTR_EXP, function(t) {
+          if (~t.indexOf('=')) {
+            t = t.split('=')
+            let a = t.shift()
+            let b = t.join('=')
+            return `[attr]${a}[/attr]=[str]${b}[/str]`
+          } else {
+            return `[attr]${t}[/attr]`
+          }
+        })
+      }
+      return `[tag]&lt;${tag + attr}&gt;[/tag]`
+    })
+    .replace(TAG_END_EXP, (m, tag) => {
+      return `[tag]&lt;/${tag}&gt;[/tag]`
+    })
+    .replace(TAG_CM_EXP, '<i class="gr">&lt;!--$1--&gt;</i>')
+  return code
+    .replace(/\[(\/?)tag\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
+    .replace(/\[(\/?)attr\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
+    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
+}
+
+export function colorCss(code) {
+  code = code
+    .replace(
+      /:(hover|after|active|last\-child|first\-child)/g,
+      '<i class="o">:$1</i>'
+    )
+    .replace(/([\.#])([\w\-]+)/g, '<i class="gr">$1</i><i class="o">$2</i>')
+    .replace(
+      /([a-zA-Z\-]+):\s?([^;\n]+);?/g,
+      '<b class="gr">$1: </b><i class="b">$2</i><i class="gr">;</i>'
+    )
+    .replace(/([,\{\}])/g, '<i class="gr">$1</i>')
+    .replace(/&/g, '<i class="r">&</i>')
+  return code
+}

src/code/index.wc

@@ -8,7 +8,7 @@
         <wc-icon title="复制" class="act cp" is="doc"></wc-icon>
       </span>
     </header>
-    <wc-scroll axis="y" class="code"></wc-scroll>
+    <wc-scroll axis="y" class="scoll"></wc-scroll>
   </div>
 </template>
 
@@ -25,6 +25,7 @@
   width: 100%;
   max-height: 610px;
   margin: 10px 0;
+  padding-bottom: 8px;
   border-radius: 6px;
   background: #f7f8fb;
   color: var(--color-dark-1);
@@ -71,23 +72,23 @@
     }
   }
 
-  .code {
+  .scoll {
     flex: 1;
     padding: 5px 0;
-    line-height: 18px;
+    line-height: 20px;
     font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-    font-size: 13px;
+    font-size: 14px;
     color: var(--color-dark-1);
     cursor: text;
     counter-reset: code;
 
-    p {
+    code {
-      display: flex;
+      display: block;
       position: relative;
-      min-height: 18px;
+      min-height: 20px;
       padding: 0 8px 0 45px;
       white-space: pre-wrap;
-      word-wrap: break-word;
+      word-break: break-word;
 
       &::before {
         position: absolute;
@@ -100,6 +101,26 @@
         content: counter(code);
         counter-increment: code;
       }
+
+      i {
+        font-style: normal;
+      }
+
+      .r {
+        color: var(--color-red-1);
+      }
+      .b {
+        color: var(--color-blue-1);
+      }
+      .g {
+        color: var(--color-green-1);
+      }
+      .gr {
+        color: var(--color-grey-2);
+      }
+      .o {
+        color: var(--color-orange-2);
+      }
     }
   }
 }
@@ -133,6 +154,7 @@
 import '../scroll/index'
 import '../layer/index'
 import $ from '../utils'
+import { colorHtml, colorCss } from './colorful'
 
 export default class Code {
   props = {
@@ -159,16 +181,33 @@ export default class Code {
   }
 
   set value(txt) {
-    this.props.content = txt
+    txt = txt
       .replace(/&amp;/g, '&')
       .replace(/&lt;/g, '<')
       .replace(/&gt;/g, '>')
 
+    this.props.content = txt
+
+    switch (this.props.lang) {
+      case 'html':
+        txt = colorHtml(txt)
+        break
+
+      case 'css':
+      case 'scss':
+      case 'less':
+        txt = colorCss(txt)
+        break
+
+      default:
+        txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        break
+    }
+
     txt = txt
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
       .split('\n')
-    txt = txt.map(s => `<p>${s}</p>`).join('')
+      .map(s => `<code>${s}</code>`)
+      .join('')
     this.__CODE__.innerHTML = txt
   }
 

src/form/button.wc

@@ -9,8 +9,8 @@
 :host {
   overflow: hidden;
   display: inline-flex;
-  min-width: 64px;
+  min-width: 76px;
-  height: 32px;
+  height: 36px;
   border-radius: 6px;
   user-select: none;
   -moz-user-select: none;
@@ -29,10 +29,10 @@
     padding: var(--padding, 0 14px);
     margin: auto;
     line-height: 1;
-    border: 0;
+    border: 2px solid var(--color-plain-2);
     border-radius: inherit;
     white-space: nowrap;
-    background: var(--color-plain-2);
+    background: #fff;
     font-size: inherit;
     font-family: inherit;
     outline: none;
@@ -74,17 +74,23 @@
 }
 :host([size='medium']) {
   min-width: 128px;
-  height: 36px;
+  height: 44px;
 
   button {
     padding: 0 18px;
   }
 }
 :host([size='medium'][circle]) {
-  min-width: 36px;
+  min-width: 44px;
+}
+:host([size='small']) {
+  height: 32px;
+}
+:host([size='small'][circle]) {
+  min-width: 32px;
 }
 :host([size='mini']) {
-  min-width: 26px;
+  min-width: 32px;
   height: 26px;
   font-size: 12px;
 
@@ -104,7 +110,7 @@
   border-radius: 26px;
 }
 :host([circle]) {
-  min-width: 32px;
+  min-width: 36px;
   border-radius: 50%;
   button {
     padding: 0;
@@ -120,43 +126,28 @@
 
 :host([type]) {
   color: #fff;
-}
-:host([link]) {
-  min-width: auto;
-  height: auto;
-  font-size: 14px;
-  color: var(--color-plain-3);
-
   button {
-    padding: 0;
+    border: 0;
-    background: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
 }
 
-:host(:not([disabled]):not([loading]):not([link])) button {
+:host(:not([disabled]):not([loading])) button {
   &:hover {
-    background: var(--color-plain-1);
+    border-color: var(--color-plain-1);
   }
   &:active {
-    background: var(--color-plain-3);
+    border-color: var(--color-plain-3);
   }
 }
-:host(:focus-within:not([link])) {
+:host(:focus-within) {
   box-shadow: 0 0 0 2px var(--color-plain-a);
 }
 
 // -------------
-:host([type='danger']:not([link])) button {
+:host([type='danger']) button {
   background: var(--color-red-2);
 }
-:host([type='danger'][link]) button {
+:host([type='danger']:not([disabled]):not([loading])) button {
-  color: var(--color-red-1);
-}
-:host([type='danger']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-red-1);
   }
@@ -164,18 +155,15 @@
     background: var(--color-red-3);
   }
 }
-:host([type='danger']:focus-within:not([link])) {
+:host([type='danger']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-red-a);
 }
 
 // -------------
-:host([type='info']:not([link])) button {
+:host([type='info']) button {
   background: var(--color-blue-2);
 }
-:host([type='info'][link]) button {
+:host([type='info']:not([disabled]):not([loading])) button {
-  color: var(--color-blue-2);
-}
-:host([type='info']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-blue-1);
   }
@@ -183,18 +171,15 @@
     background: var(--color-blue-3);
   }
 }
-:host([type='info']:focus-within:not([link])) {
+:host([type='info']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-blue-a);
 }
 
 // --------
-:host([type='success']:not([link])) button {
+:host([type='success']) button {
   background: var(--color-green-2);
 }
-:host([type='success'][link]) button {
+:host([type='success']:not([disabled]):not([loading])) button {
-  color: var(--color-green-2);
-}
-:host([type='success']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-green-1);
   }
@@ -202,18 +187,15 @@
     background: var(--color-green-3);
   }
 }
-:host([type='success']:focus-within:not([link])) {
+:host([type='success']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-green-a);
 }
 
 // ---------
-:host([type='primary']:not([link])) button {
+:host([type='primary']) button {
   background: var(--color-teal-2);
 }
-:host([type='primary'][link]) button {
+:host([type='primary']:not([disabled]):not([loading])) button {
-  color: var(--color-teal-2);
-}
-:host([type='primary']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-teal-1);
   }
@@ -221,18 +203,15 @@
     background: var(--color-teal-3);
   }
 }
-:host([type='primary']:focus-within:not([link])) {
+:host([type='primary']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-teal-a);
 }
 
 // ----------
-:host([type='warning']:not([link])) button {
+:host([type='warning']) button {
   background: var(--color-orange-2);
 }
-:host([type='warning'][link]) button {
+:host([type='warning']:not([disabled]):not([loading])) button {
-  color: var(--color-orange-2);
-}
-:host([type='warning']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-orange-1);
   }
@@ -240,18 +219,15 @@
     background: var(--color-orange-3);
   }
 }
-:host([type='warning']:focus-within:not([link])) {
+:host([type='warning']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-orange-a);
 }
 
 // -------
-:host([type='inverse']:not([link])) button {
+:host([type='inverse']) button {
   background: var(--color-dark-2);
 }
-:host([type='inverse'][link]) button {
+:host([type='inverse']:not([disabled]):not([loading])) button {
-  color: var(--color-dark-2);
-}
-:host([type='inverse']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-dark-1);
   }
@@ -259,18 +235,15 @@
     background: var(--color-dark-3);
   }
 }
-:host([type='inverse']:focus-within:not([link])) {
+:host([type='inverse']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-dark-a);
 }
 
 // -------
-:host([type='default']:not([link])) button {
+:host([type='default']) button {
   background: var(--color-grey-2);
 }
-:host([type='default'][link]) button {
+:host([type='default']:not([disabled]):not([loading])) button {
-  color: var(--color-grey-2);
-}
-:host([type='default']:not([disabled]):not([loading]):not([link])) button {
   &:hover {
     background: var(--color-grey-1);
   }
@@ -278,7 +251,7 @@
     background: var(--color-grey-3);
   }
 }
-:host([type='default']:focus-within:not([link])) {
+:host([type='default']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-grey-a);
 }
 
@@ -287,16 +260,6 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
-
-:host([link][loading]),
-:host([link][disabled]) {
-  button {
-    &:hover,
-    &:active {
-      text-decoration: none;
-    }
-  }
-}
 </style>
 
 <script>

src/markd/core.js

@@ -148,6 +148,22 @@ const Decoder = {
   }
 }
 
+function fixed(str) {
+  // 去掉\r, 将\t转为空格(2个)
+  return str
+    .replace(/\r\n|\r/g, '\n')
+    .replace(/\t/g, '  ')
+    .replace(/\u00a0/g, ' ')
+    .replace(/\u2424/g, '\n')
+    .replace(TAG_REG, (m, name, attr) => {
+      let tmp = attr.replace(/\n/g, '⨨☇') // 标签内的换行, 转为一组特殊字符, 方便后面还原
+      if (tmp !== attr) {
+        tmp = ' ' + tmp
+      }
+      return `<${name + tmp}>`
+    })
+}
+
 class Tool {
   constructor(list, links) {
     this.list = list
@@ -156,20 +172,6 @@ class Tool {
 
   // 初始化字符串, 处理多余换行等
   static init(str) {
-    // 去掉\r, 将\t转为空格(2个)
-    str = str
-      .replace(/\r\n|\r/g, '\n')
-      .replace(/\t/g, '  ')
-      .replace(/\u00a0/g, ' ')
-      .replace(/\u2424/g, '\n')
-      .replace(TAG_REG, (m, name, attr) => {
-        attr = attr.replace(/\n/g, '⨨☇') // 标签内的换行, 转为一组特殊字符, 方便后面还原
-        if (attr) {
-          attr = ' ' + attr
-        }
-        return `<${name + attr}>`
-      })
-
     var links = {}
     var list = []
     var lines = str.split('\n')
@@ -508,5 +510,5 @@ class Tool {
 }
 
 export default function(str) {
-  return Tool.init(str).parse()
+  return Tool.init(fixed(str)).parse()
 }