Initial commit

wechat-mini-program/components/mp-html/plugins/markdown/README.md

@@ -0,0 +1,17 @@
+# markdown
+功能：渲染 *markdown*  
+大小：*≈37KB*  
+支持平台：  
+
+| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| √ | √ | √ | √ | √ | √ |
+
+说明：  
+引入本插件后，会给组件添加一个 *markdown* 属性，将该属性设置为 *true* 后，即可通过 *content* 属性或 *setContent* 方法设置 *markdown* 内容即可  
+
+若开启 *use-anchor* 属性，所有标题 `*# xxx*` 都会被设置为锚点，通过链接 `[xxx](#xxx)` 可以直接跳转  
+
+> 本插件通过 [marked](https://github.com/markedjs/marked) 解析 *markdown* 文本，部分 *css* 摘选自 [github-markdown-css](https://github.com/sindresorhus/github-markdown-css)  
+
+> 本插件可以和 *highlight* 插件共用，实现 *markdown* 中代码块的高亮效果  

wechat-mini-program/components/mp-html/plugins/markdown/index.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview markdown 插件
+ * Include marked (https://github.com/markedjs/marked)
+ * Include github-markdown-css (https://github.com/sindresorhus/github-markdown-css)
+ */
+const marked = require('./marked.min')
+let index = 0
+
+function Markdown (vm) {
+  this.vm = vm
+  vm._ids = {}
+}
+
+Markdown.prototype.onUpdate = function (content) {
+  if (this.vm.properties.markdown) {
+    return marked(content)
+  }
+}
+
+Markdown.prototype.onParse = function (node, vm) {
+  if (vm.options.markdown) {
+    // 中文 id 需要转换，否则无法跳转
+    if (vm.options.useAnchor && node.attrs && /[\u4e00-\u9fa5]/.test(node.attrs.id)) {
+      const id = 't' + index++
+      this.vm._ids[node.attrs.id] = id
+      node.attrs.id = id
+    }
+    if (node.name === 'p' || node.name === 'table' || node.name === 'tr' || node.name === 'th' || node.name === 'td' || node.name === 'blockquote' || node.name === 'pre' || node.name === 'code') {
+      node.attrs.class = `md-${node.name} ${node.attrs.class || ''}`
+    }
+  }
+}
+
+module.exports = Markdown

wechat-mini-program/components/mp-html/plugins/markdown/miniprogram/build.js

@@ -0,0 +1,70 @@
+const path = require('path')
+
+module.exports = {
+  style:
+    `.md-p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+.md-table,
+.md-blockquote {
+  margin-bottom: 16px;
+}
+
+.md-table {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.md-tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.md-table .md-tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.md-th,
+.md-td {
+  padding: 6px 13px !important;
+  border: 1px solid #dfe2e5;
+}
+
+.md-th {
+  font-weight: 600;
+}
+
+.md-blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+}
+
+.md-code {
+  padding: 0.2em 0.4em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+}
+
+.md-pre .md-code {
+  padding: 0;
+  font-size: 100%;
+  background: transparent;
+  border: 0;
+}`,
+  handler (file) {
+    // 添加 markdown 属性
+    if (file.path.includes('miniprogram' + path.sep + 'index.js')) {
+      file.contents = Buffer.from(file.contents.toString().replace(/properties\s*:\s*{/, 'properties: {\n    markdown: Boolean,')
+      // 处理中文 id
+        .replace(/navigateTo\s*\(id,\s*offset\)\s*{/, 'navigateTo (id, offset) {\n      id = this._ids[decodeURI(id)] || id'))
+    }
+  }
+}

wechat-mini-program/components/mp-html/plugins/markdown/uni-app/build.js

@@ -0,0 +1,68 @@
+module.exports = {
+  style:
+    `.md-p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+.md-table,
+.md-blockquote {
+  margin-bottom: 16px;
+}
+
+.md-table {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.md-tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.md-table .md-tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.md-th,
+.md-td {
+  padding: 6px 13px !important;
+  border: 1px solid #dfe2e5;
+}
+
+.md-th {
+  font-weight: 600;
+}
+
+.md-blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+}
+
+.md-code {
+  padding: 0.2em 0.4em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+}
+
+.md-pre .md-code {
+  padding: 0;
+  font-size: 100%;
+  background: transparent;
+  border: 0;
+}`,
+  handler (file) {
+    // 添加 markdown 属性
+    if (file.path.includes('mp-html.vue')) {
+      file.contents = Buffer.from(file.contents.toString().replace(/props\s*:\s*{/, 'props: {\n    markdown: Boolean,')
+      // 处理中文 id
+        .replace(/navigateTo\s*\(id,\s*offset\)\s*{/, 'navigateTo (id, offset) {\n      id = this._ids[decodeURI(id)] || id'))
+    }
+  }
+}