diff --git a/.gitignore b/.gitignore index 959f8f1c8..c3dcb7599 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ coverage style.js tsconfig.json packages/*/LICENSE +.history \ No newline at end of file diff --git a/packages/mp/.babelrc b/packages/mp/.babelrc new file mode 100644 index 000000000..0b403190c --- /dev/null +++ b/packages/mp/.babelrc @@ -0,0 +1,11 @@ +{ + "plugins": [ + ["module-resolver", { + "root": ["./src"], + "alias": {} + }] + ], + "presets": [ + ["env", {"loose": true, "modules": "commonjs"}] + ] +} \ No newline at end of file diff --git a/packages/mp/.commitlintrc.js b/packages/mp/.commitlintrc.js new file mode 100644 index 000000000..e2a5f5e71 --- /dev/null +++ b/packages/mp/.commitlintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: [ + '@commitlint/config-conventional' + ], + rules: { + } +} diff --git a/packages/mp/.eslintignore b/packages/mp/.eslintignore new file mode 100644 index 000000000..0baf8092f --- /dev/null +++ b/packages/mp/.eslintignore @@ -0,0 +1 @@ +*.min.js \ No newline at end of file diff --git a/packages/mp/.eslintrc.js b/packages/mp/.eslintrc.js new file mode 100644 index 000000000..1f42ef581 --- /dev/null +++ b/packages/mp/.eslintrc.js @@ -0,0 +1,96 @@ +module.exports = { + 'extends': [ + 'airbnb-base', + 'plugin:promise/recommended' + ], + 'parserOptions': { + 'ecmaVersion': 9, + 'ecmaFeatures': { + 'jsx': false + }, + 'sourceType': 'module' + }, + 'env': { + 'es6': true, + 'node': true, + 'jest': true + }, + 'plugins': [ + 'import', + 'node', + 'promise' + ], + 'rules': { + 'arrow-parens': 'off', + 'comma-dangle': [ + 'error', + 'only-multiline' + ], + 'complexity': ['error', 10], + 'func-names': 'off', + 'global-require': 'off', + 'handle-callback-err': [ + 'error', + '^(err|error)$' + ], + 'import/no-unresolved': [ + 'error', + { + 'caseSensitive': true, + 'commonjs': true, + 'ignore': ['^[^.]'] + } + ], + 'import/prefer-default-export': 'off', + 'linebreak-style': 'off', + 'no-catch-shadow': 'error', + 'no-continue': 'off', + 'no-div-regex': 'warn', + 'no-else-return': 'off', + 'no-param-reassign': 'off', + 'no-plusplus': 'off', + 'no-shadow': 'off', + 'no-multi-assign': 'off', + 'no-underscore-dangle': 'off', + 'node/no-deprecated-api': 'error', + 'node/process-exit-as-throw': 'error', + 'object-curly-spacing': [ + 'error', + 'never' + ], + 'operator-linebreak': [ + 'error', + 'after', + { + 'overrides': { + ':': 'before', + '?': 'before' + } + } + ], + 'prefer-arrow-callback': 'off', + 'prefer-destructuring': 'off', + 'prefer-template': 'off', + 'quote-props': [ + 1, + 'as-needed', + { + 'unnecessary': true + } + ], + 'semi': [ + 'error', + 'never' + ] + }, + 'globals': { + 'window': true, + 'document': true, + 'App': true, + 'Page': true, + 'Component': true, + 'Behavior': true, + 'wx': true, + 'getCurrentPages': true, + } +} diff --git a/packages/mp/.gitignore b/packages/mp/.gitignore new file mode 100644 index 000000000..57a5ebff0 --- /dev/null +++ b/packages/mp/.gitignore @@ -0,0 +1,15 @@ +.idea +.DS_Store + +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +miniprogram_dist +miniprogram_dev +miniprogram_npm +node_modules +coverage +.history \ No newline at end of file diff --git a/packages/mp/.gitmodules b/packages/mp/.gitmodules new file mode 100644 index 000000000..eab56cb4b --- /dev/null +++ b/packages/mp/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src/weui-wxss"] + path = src/weui-wxss + url = http://git.code.oa.com/modules/weui-wxss.git diff --git a/packages/mp/.npmignore b/packages/mp/.npmignore new file mode 100644 index 000000000..624791150 --- /dev/null +++ b/packages/mp/.npmignore @@ -0,0 +1,17 @@ +.idea +.DS_Store +package-lock.json + +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +test +tools +docs +miniprogram_dev +miniprogram_npm +node_modules +coverage \ No newline at end of file diff --git a/packages/mp/CHANGELOG.md b/packages/mp/CHANGELOG.md deleted file mode 100644 index 082d7a710..000000000 --- a/packages/mp/CHANGELOG.md +++ /dev/null @@ -1,8 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [1.3.4](https://github.com/bytedance/bytemd/compare/v1.3.3...v1.3.4) (2020-12-21) - -**Note:** Version bump only for package @bytemd/mp diff --git a/packages/mp/README.md b/packages/mp/README.md new file mode 100644 index 000000000..452164fc0 --- /dev/null +++ b/packages/mp/README.md @@ -0,0 +1,42 @@ +## 开发 + +1. 安装依赖： + +``` +npm install +``` + +2. 执行命令： + +``` +npm run dev +``` + +默认会在包根目录下生成 miniprogram\_dev 目录，src 中的源代码会被构建并生成到 miniprogram\_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令： + +``` +npm run watch +``` + +3. 生成的 miniprogram\_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。 + +## 其他命令 + +* 清空 miniprogram_dist 目录： + +``` +npm run clean +``` + +* 清空 miniprogam_dev 目录： + +``` +npm run clean-dev +``` +## 子模块开发 + +src 下每个组件目录对应一个 npm 模块，需保证文件名均为 index.xxx，同时添加 package.json， 参考 src/video-swiper。 + +## 发布npm包 + +`npm run dist` 后生成 miniprogram_npm 目录，进入到每个子项目中执行 `npm publish --access=publish` diff --git a/packages/mp/docs/markdown.md b/packages/mp/docs/markdown.md new file mode 100644 index 000000000..68f162cac --- /dev/null +++ b/packages/mp/docs/markdown.md @@ -0,0 +1,17 @@ +# markdown + +markdown组件。 + +## 属性列表 + +| 属性 | 类型 | 默认值 | 必填 | 说明 | +| -------------------- | ----------- | ------- | ---- | ------------------------------------------------- | +| md | String | | 是 | 需要渲染的markdown文本 | +| highlight | Boolean | false | 否 | 代码是否高亮 | + +### 注意事项 + - 需要在app.json中添加"recursion-node": "components/markdown/index"， 用以markdown组件自调用 + +### 示例代码 + + \ No newline at end of file diff --git a/packages/mp/gulpfile.js b/packages/mp/gulpfile.js new file mode 100644 index 000000000..085540324 --- /dev/null +++ b/packages/mp/gulpfile.js @@ -0,0 +1,28 @@ +const gulp = require('gulp') +const clean = require('gulp-clean') + +const config = require('./tools/config') +const BuildTask = require('./tools/build') +const id = require('./package.json').name + +// 构建任务实例 +// eslint-disable-next-line no-new +new BuildTask(id, config.entry) + +// 清空生成目录和文件 +gulp.task('clean', gulp.series(() => gulp.src(config.distPath, {read: false, allowEmpty: true}).pipe(clean()), done => { + if (config.isDev) { + return gulp.src(config.demoDist, {read: false, allowEmpty: true}) + .pipe(clean()) + } + + return done() +})) +// 监听文件变化并进行开发模式构建 +gulp.task('watch', gulp.series(`${id}-watch`)) +// 开发模式构建 +gulp.task('dev', gulp.series(`${id}-dev`)) +// 生产模式构建 +gulp.task('default', gulp.series(`${id}-default`)) +// 构建demo +gulp.task('demo', gulp.series(`${id}-demo`)) diff --git a/packages/mp/package.json b/packages/mp/package.json index f118d78e4..c71fa5336 100644 --- a/packages/mp/package.json +++ b/packages/mp/package.json @@ -1,31 +1,82 @@ { "name": "@bytemd/mp", - "version": "1.3.4", - "private": true, - "description": "Full-featured markdown editor and viewer", - "author": "Rongjian Zhang ", - "license": "MIT", + "version": "1.0.0", + "description": "wx miniprogram markdown viewer", + "main": "miniprogram_dist/index.js", + "scripts": { + "init": "git submodule init && git submodule update --init --remote && npm run dev", + "dev": "gulp dev --develop", + "demo": "gulp demo --develop", + "watch": "gulp watch --develop --watch", + "copy": "sh tools/copy.sh", + "build": "gulp", + "dist": "npm run build && npm run copy", + "clean-dev": "gulp clean --develop", + "clean": "gulp clean", + "test": "jest ./test/* --silent --bail", + "coverage": "jest ./test/* --coverage --bail", + "lint": "eslint \"src/**/*.js\"", + "lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\"" + }, + "miniprogram": "miniprogram_dist", + "jest": { + "testEnvironment": "jsdom", + "testURL": "https://jest.test", + "collectCoverageFrom": [ + "src/**/*.js" + ], + "moduleDirectories": [ + "node_modules", + "src" + ] + }, "repository": { "type": "git", "url": "https://github.com/bytedance/bytemd.git", "directory": "packages/mp" }, - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", - "unpkg": "dist/index.min.js", - "jsdelivr": "dist/index.min.js", - "types": "lib/index.d.ts", - "files": [ - "dist", - "lib" - ], - "dependencies": { - "bytemd": "^1.3.4" - }, - "publishConfig": { - "access": "public" + "author": "baozuona ", + "license": "MIT", + "husky": { + "hooks": { + "commit-msg": "commitlint -e $GIT_PARAMS" + } }, "devDependencies": { - "miniprogram-api-typings": "^3.2.0" - } + "@commitlint/cli": "^8.2.0", + "@commitlint/config-conventional": "^8.2.0", + "autoprefixer": "^6.5.1", + "babel-core": "^6.26.3", + "babel-loader": "^7.1.5", + "babel-plugin-module-resolver": "^3.2.0", + "babel-preset-env": "^1.7.0", + "colors": "^1.3.1", + "eslint": "^5.14.1", + "eslint-config-airbnb-base": "13.1.0", + "eslint-loader": "^2.1.2", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-node": "^7.0.1", + "eslint-plugin-promise": "^3.8.0", + "fs-extra": "^8.1.0", + "gulp": "^4.0.0", + "gulp-clean": "^0.4.0", + "gulp-if": "^2.0.2", + "gulp-install": "^1.1.0", + "gulp-less": "^4.0.1", + "gulp-rename": "^1.4.0", + "gulp-sourcemaps": "^2.6.5", + "husky": "^4.0.0-beta.5", + "jest": "^23.5.0", + "miniprogram-api-typings": "^2.9.2", + "miniprogram-simulate": "^1.0.0", + "through2": "^2.0.3", + "ts-loader": "^5.3.3", + "tslint": "^5.13.1", + "tslint-loader": "^3.5.4", + "typescript": "^3.3.3333", + "vinyl": "^2.2.0", + "webpack": "^4.29.5", + "webpack-node-externals": "^1.7.2" + }, + "dependencies": {} } diff --git a/packages/mp/src/index.json b/packages/mp/src/index.json new file mode 100644 index 000000000..a96e14595 --- /dev/null +++ b/packages/mp/src/index.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "markdown": "./markdown/index" + } +} \ No newline at end of file diff --git a/packages/mp/src/index.ts b/packages/mp/src/index.ts new file mode 100644 index 000000000..189181a82 --- /dev/null +++ b/packages/mp/src/index.ts @@ -0,0 +1,5 @@ +// import FormValidator from './form/form-validator' + +export { + // FormValidator +} \ No newline at end of file diff --git a/packages/mp/src/markdown/customReset.less b/packages/mp/src/markdown/customReset.less new file mode 100644 index 000000000..3422d9bb0 --- /dev/null +++ b/packages/mp/src/markdown/customReset.less @@ -0,0 +1,49 @@ +/* custom reset */ +.b, +.big, +.i, +.small, +.tt abbr, +.acronym, +.cite, +.code, +.dfn, +.em, +.kbd, +.strong, +.samp, +.var a, +.bdo, +.br, +.img, +.map, +.object, +.q, +.script, +.span, +.sub, +.sup button, +.input, +.label, +.select, +.textarea, +.text { + display: inline; +} +.a, +.img, +.input, +.button, +.select, +.textarea { + display: inline-block; +} +.pre .code .span{ + white-space: pre; +} +.code .span{ + white-space: pre-line; +} +.span { + display: inline; +} diff --git a/packages/mp/src/markdown/github.less b/packages/mp/src/markdown/github.less new file mode 100644 index 000000000..47d7a5f1b --- /dev/null +++ b/packages/mp/src/markdown/github.less @@ -0,0 +1,812 @@ + +.markdown-body .hr:after, +.markdown-body .hr:before { + display: table; + content: ""; +} + +.markdown-body .hr:after { + clear: both; +} + +.markdown-body .table { + border-spacing: 0; + border-collapse: collapse; +} + +.markdown-body .td, +.markdown-body .th { + padding: 0; +} + +.markdown-body .details .summary { + cursor: pointer; +} + +.markdown-body .kbd { + display: inline-block; + padding: 3px 5px; + font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: 1px solid #d1d5da; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #d1d5da; +} + +.markdown-body .h1, +.markdown-body .h2, +.markdown-body .h3, +.markdown-body .h4, +.markdown-body .h5, +.markdown-body .h6 { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body .h1 { + font-size: 32px; +} + +.markdown-body .h1, +.markdown-body .h2 { + font-weight: 600; +} + +.markdown-body .h2 { + font-size: 24px; +} + +.markdown-body .h3 { + font-size: 20px; +} + +.markdown-body .h3, +.markdown-body .h4 { + font-weight: 600; +} + +.markdown-body .h4 { + font-size: 16px; +} + +.markdown-body .h5 { + font-size: 14px; +} + +.markdown-body .h5, +.markdown-body .h6 { + font-weight: 600; +} + +.markdown-body .h6 { + font-size: 12px; +} + +.markdown-body .p { + margin-top: 0; + margin-bottom: 10px; +} + +.markdown-body .blockquote { + margin: 0; +} + +.markdown-body .ol, +.markdown-body .ul { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body .ol .ol, +.markdown-body .ul .ol { + list-style-type: lower-roman; +} + +.markdown-body .ol .ol .ol, +.markdown-body .ol .ul .ol, +.markdown-body .ul .ol .ol, +.markdown-body .ul .ul .ol { + list-style-type: lower-alpha; +} + +.markdown-body .dd { + margin-left: 0; +} + +.markdown-body .code, +.markdown-body .pre { + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + font-size: 12px; +} + +.markdown-body .pre { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body .input::-webkit-inner-spin-button, +.markdown-body .input::-webkit-outer-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; +} + +.markdown-body :checked+.radio-label { + position: relative; + z-index: 1; + border-color: #0366d6; +} + +.markdown-body .border { + border: 1px solid #e1e4e8!important; +} + +.markdown-body .border-0 { + border: 0!important; +} + +.markdown-body .border-bottom { + border-bottom: 1px solid #e1e4e8!important; +} + +.markdown-body .rounded-1 { + border-radius: 3px!important; +} + +.markdown-body .bg-white { + background-color: #fff!important; +} + +.markdown-body .bg-gray-light { + background-color: #fafbfc!important; +} + +.markdown-body .text-gray-light { + color: #6a737d!important; +} + +.markdown-body .mb-0 { + margin-bottom: 0!important; +} + +.markdown-body .my-2 { + margin-top: 8px!important; + margin-bottom: 8px!important; +} + +.markdown-body .pl-0 { + padding-left: 0!important; +} + +.markdown-body .py-0 { + padding-top: 0!important; + padding-bottom: 0!important; +} + +.markdown-body .pl-1 { + padding-left: 4px!important; +} + +.markdown-body .pl-2 { + padding-left: 8px!important; +} + +.markdown-body .py-2 { + padding-top: 8px!important; + padding-bottom: 8px!important; +} + +.markdown-body .pl-3, +.markdown-body .px-3 { + padding-left: 16px!important; +} + +.markdown-body .px-3 { + padding-right: 16px!important; +} + +.markdown-body .pl-4 { + padding-left: 24px!important; +} + +.markdown-body .pl-5 { + padding-left: 32px!important; +} + +.markdown-body .pl-6 { + padding-left: 40px!important; +} + +.markdown-body .f6 { + font-size: 12px!important; +} + +.markdown-body .lh-condensed { + line-height: 1.25!important; +} + +.markdown-body .text-bold { + font-weight: 600!important; +} + +.markdown-body .pl-c { + color: #6a737d; +} + +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: #005cc5; +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #6f42c1; +} + +.markdown-body .pl-s .pl-s1, +.markdown-body .pl-smi { + color: #24292e; +} + +.markdown-body .pl-ent { + color: #22863a; +} + +.markdown-body .pl-k { + color: #d73a49; +} + +.markdown-body .pl-pds, +.markdown-body .pl-s, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sra, +.markdown-body .pl-sr .pl-sre { + color: #032f62; +} + +.markdown-body .pl-smw, +.markdown-body .pl-v { + color: #e36209; +} + +.markdown-body .pl-bu { + color: #b31d28; +} + +.markdown-body .pl-ii { + color: #fafbfc; + background-color: #b31d28; +} + +.markdown-body .pl-c2 { + color: #fafbfc; + background-color: #d73a49; +} + +.markdown-body .pl-c2:before { + content: "^M"; +} + +.markdown-body .pl-sr .pl-cce { + font-weight: 700; + color: #22863a; +} + +.markdown-body .pl-ml { + color: #735c0f; +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: 700; + color: #005cc5; +} + +.markdown-body .pl-mi { + font-style: italic; + color: #24292e; +} + +.markdown-body .pl-mb { + font-weight: 700; + color: #24292e; +} + +.markdown-body .pl-md { + color: #b31d28; + background-color: #ffeef0; +} + +.markdown-body .pl-mi1 { + color: #22863a; + background-color: #f0fff4; +} + +.markdown-body .pl-mc { + color: #e36209; + background-color: #ffebda; +} + +.markdown-body .pl-mi2 { + color: #f6f8fa; + background-color: #005cc5; +} + +.markdown-body .pl-mdr { + font-weight: 700; + color: #6f42c1; +} + +.markdown-body .pl-ba { + color: #586069; +} + +.markdown-body .pl-sg { + color: #959da5; +} + +.markdown-body .pl-corl { + text-decoration: underline; + color: #032f62; +} + +.markdown-body .mb-0 { + margin-bottom: 0!important; +} + +.markdown-body .my-2 { + margin-bottom: 8px!important; +} + +.markdown-body .my-2 { + margin-top: 8px!important; +} + +.markdown-body .pl-0 { + padding-left: 0!important; +} + +.markdown-body .py-0 { + padding-top: 0!important; + padding-bottom: 0!important; +} + +.markdown-body .pl-1 { + padding-left: 4px!important; +} + +.markdown-body .pl-2 { + padding-left: 8px!important; +} + +.markdown-body .py-2 { + padding-top: 8px!important; + padding-bottom: 8px!important; +} + +.markdown-body .pl-3 { + padding-left: 16px!important; +} + +.markdown-body .pl-4 { + padding-left: 24px!important; +} + +.markdown-body .pl-5 { + padding-left: 32px!important; +} + +.markdown-body .pl-6 { + padding-left: 40px!important; +} + +.markdown-body .pl-7 { + padding-left: 48px!important; +} + +.markdown-body .pl-8 { + padding-left: 64px!important; +} + +.markdown-body .pl-9 { + padding-left: 80px!important; +} + +.markdown-body .pl-10 { + padding-left: 96px!important; +} + +.markdown-body .pl-11 { + padding-left: 112px!important; +} + +.markdown-body .pl-12 { + padding-left: 128px!important; +} + +.markdown-body .hr { + border-bottom-color: #eee; +} + +.markdown-body .kbd { + display: inline-block; + padding: 3px 5px; + font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: 1px solid #d1d5da; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #d1d5da; +} + +.markdown-body:after, +.markdown-body:before { + display: table; + content: ""; +} + +.markdown-body:after { + clear: both; +} + +.markdown-body .a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-body .blockquote, +.markdown-body .details, +.markdown-body .dl, +.markdown-body .ol, +.markdown-body .p, +.markdown-body .pre, +.markdown-body .table, +.markdown-body .ul { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-body .hr { + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #e1e4e8; + border: 0; +} + +.markdown-body .blockquote { + padding: 0 1em; + color: #6a737d; + border-left: .25em solid #dfe2e5; +} + +.markdown-body .h1, +.markdown-body .h2, +.markdown-body .h3, +.markdown-body .h4, +.markdown-body .h5, +.markdown-body .h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} + +.markdown-body .h1 { + font-size: 2em; +} + +.markdown-body .h1, +.markdown-body .h2 { + padding-bottom: .3em; + border-bottom: 1px solid #eaecef; +} + +.markdown-body .h2 { + font-size: 1.5em; +} + +.markdown-body .h3 { + font-size: 1.25em; +} + +.markdown-body .h4 { + font-size: 1em; +} + +.markdown-body .h5 { + font-size: .875em; +} + +.markdown-body .h6 { + font-size: .85em; + color: #6a737d; +} + +.markdown-body .ol, +.markdown-body .ul { + padding-left: 2em; +} + +.markdown-body .ol .ol, +.markdown-body .ol .ul, +.markdown-body .ul .ol, +.markdown-body .ul .ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body .li { + word-wrap: break-all; +} + +.markdown-body .li>.p { + margin-top: 16px; +} + +.markdown-body .li+.li { + margin-top: .25em; +} + +.markdown-body .dl { + padding: 0; +} + +.markdown-body .dl .dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markdown-body .dl .dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-body .table { + display: block; + width: 100%; + overflow: auto; +} + +.markdown-body .table .th { + font-weight: 600; +} + +.markdown-body .table .td, +.markdown-body .table .th { + padding: 6px 13px; + border: 1px solid #dfe2e5; +} + +.markdown-body .table .tr { + background-color: #fff; + border-top: 1px solid #c6cbd1; +} + +.markdown-body .table .tr:nth-child(2n) { + background-color: #f6f8fa; +} + +.markdown-body .img { + box-sizing: initial; + width: 100%; + text-align: center; +} + +.markdown-body .img[align=right] { + padding-left: 20px; +} + +.markdown-body .img[align=left] { + padding-right: 20px; +} + +.markdown-body .code { + padding: .2em .4em; + margin: 0; + font-size: 85%; + background-color: rgba(27,31,35,.05); + border-radius: 3px; +} + +.markdown-body .pre { + word-wrap: normal; +} + +.markdown-body .pre>.code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-body .highlight { + margin-bottom: 16px; +} + +.markdown-body .highlight .pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-body .highlight .pre, +.markdown-body .pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: rgba(27,31,35,0.05); + border-radius: 3px; +} + +.markdown-body .pre .code { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: initial; + border: 0; +} + +.markdown-body .commit-tease-sha { + display: inline-block; + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + font-size: 90%; + color: #444d56; +} + +.markdown-body .full-commit .btn-outline:not(:disabled):hover { + color: #005cc5; + border-color: #005cc5; +} + +.markdown-body .blob-wrapper { + overflow-x: auto; + overflow-y: hidden; +} + +.markdown-body .blob-wrapper-embedded { + max-height: 240px; + overflow-y: auto; +} + +.markdown-body .blob-num { + width: 1%; + min-width: 50px; + padding-right: 10px; + padding-left: 10px; + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + font-size: 12px; + line-height: 20px; + color: rgba(27,31,35,.3); + text-align: right; + white-space: nowrap; + vertical-align: top; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.markdown-body .blob-num:hover { + color: rgba(27,31,35,.6); +} + +.markdown-body .blob-num:before { + content: attr(data-line-number); +} + +.markdown-body .blob-code { + position: relative; + padding-right: 10px; + padding-left: 10px; + line-height: 20px; + vertical-align: top; +} + +.markdown-body .blob-code-inner { + overflow: visible; + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + font-size: 12px; + color: #24292e; + word-wrap: normal; + white-space: pre; +} + +.markdown-body .pl-token.active, +.markdown-body .pl-token:hover { + cursor: pointer; + background: #ffea7f; +} + +.markdown-body .tab-size[data-tab-size="1"] { + -moz-tab-size: 1; + tab-size: 1; +} + +.markdown-body .tab-size[data-tab-size="2"] { + -moz-tab-size: 2; + tab-size: 2; +} + +.markdown-body .tab-size[data-tab-size="3"] { + -moz-tab-size: 3; + tab-size: 3; +} + +.markdown-body .tab-size[data-tab-size="4"] { + -moz-tab-size: 4; + tab-size: 4; +} + +.markdown-body .tab-size[data-tab-size="5"] { + -moz-tab-size: 5; + tab-size: 5; +} + +.markdown-body .tab-size[data-tab-size="6"] { + -moz-tab-size: 6; + tab-size: 6; +} + +.markdown-body .tab-size[data-tab-size="7"] { + -moz-tab-size: 7; + tab-size: 7; +} + +.markdown-body .tab-size[data-tab-size="8"] { + -moz-tab-size: 8; + tab-size: 8; +} + +.markdown-body .tab-size[data-tab-size="9"] { + -moz-tab-size: 9; + tab-size: 9; +} + +.markdown-body .tab-size[data-tab-size="10"] { + -moz-tab-size: 10; + tab-size: 10; +} + +.markdown-body .tab-size[data-tab-size="11"] { + -moz-tab-size: 11; + tab-size: 11; +} + +.markdown-body .tab-size[data-tab-size="12"] { + -moz-tab-size: 12; + tab-size: 12; +} + +.markdown-body .task-list-item { + list-style-type: none; +} + +.markdown-body .task-list-item+.task-list-item { + margin-top: 3px; +} + +.markdown-body .task-list-item input { + margin: 0 .2em .25em -1.6em; + vertical-align: middle; +} \ No newline at end of file diff --git a/packages/mp/src/markdown/highlight.less b/packages/mp/src/markdown/highlight.less new file mode 100644 index 000000000..b2f11b54b --- /dev/null +++ b/packages/mp/src/markdown/highlight.less @@ -0,0 +1,66 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #f0f0f0; +} +.hljs, +.hljs-subst { + color: #444; +} +.hljs-comment { + color: #888; +} +.hljs-attribute, +.hljs-doctag, +.hljs-keyword, +.hljs-meta-keyword, +.hljs-name, +.hljs-selector-tag { + font-weight: 700; +} +.hljs-deletion, +.hljs-number, +.hljs-quote, +.hljs-selector-class, +.hljs-selector-id, +.hljs-string, +.hljs-template-tag, +.hljs-type { + color: #800; +} +.hljs-section, +.hljs-title { + color: #800; + font-weight: 700; +} +.hljs-link, +.hljs-regexp, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-symbol, +.hljs-template-variable, +.hljs-variable { + color: #bc6060; +} +.hljs-literal { + color: #78a960; +} +.hljs-addition, +.hljs-built_in, +.hljs-bullet, +.hljs-code { + color: #397300; +} +.hljs-meta { + color: #1f7199; +} +.hljs-meta-string { + color: #4d99bf; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: 700; +} diff --git a/packages/mp/src/markdown/index.json b/packages/mp/src/markdown/index.json new file mode 100644 index 000000000..ada75a6b3 --- /dev/null +++ b/packages/mp/src/markdown/index.json @@ -0,0 +1,5 @@ +{ + "component": true, + "usingComponents": { + } +} \ No newline at end of file diff --git a/packages/mp/src/markdown/index.less b/packages/mp/src/markdown/index.less new file mode 100644 index 000000000..ecf60f20f --- /dev/null +++ b/packages/mp/src/markdown/index.less @@ -0,0 +1,22 @@ +@import "mockHtml.less"; +@import "customReset.less"; +@import "github.less"; +@import "highlight.less"; + +.markdown-body { + font-family: Lucida Grande; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 27.5px; + color: #292929; + letter-spacing: -0.12px; +} + +.pre::-webkit-scrollbar { + width: 0px; + height: 0px; +} +.text { + word-break: break-word; +} diff --git a/packages/mp/src/markdown/index.ts b/packages/mp/src/markdown/index.ts new file mode 100644 index 000000000..39b92a286 --- /dev/null +++ b/packages/mp/src/markdown/index.ts @@ -0,0 +1,58 @@ +const { getProcessor } = require("./libs/bytemd.min.js"); +const gfm = require("./libs/gfm.min.js"); +const highlight = require("./libs/highlight.min.js"); + +Component({ + properties: { + md: { + type: String, + value: '', + observer: function (newval, oldval) { + this.getMDNodes(newval) + }, + }, + highlight: { + type: Boolean, + value: false + }, + _pnode: null, // Used for recursive rendering + _code: null // Used for recursive rendering + }, + data: { + nodes: {}, + }, + methods: { + getMDNodes(md) { + const processor = getProcessor({ + plugins: [ + gfm(), + this.data.highlight && highlight({ + subset: ["javascript", "html", "css"] + }) + ] + }); + const ast = processor.runSync(processor.parse(md)); + ast.children = this.recursiveTree(ast.children, ast); + this.setData({ nodes: ast }); + }, + recursiveTree(array, parentNode) { + array = array.filter((item) => { + if (item.children && typeof Array.isArray(item.children)) { + item.children = this.recursiveTree(item.children, item); + } + return !(item.type === 'text' && item.value.trim() === '' && parentNode.tagName !== "code" && parentNode.tagName !== "span") + }) + return array + }, + imagePreview({ + currentTarget: { + dataset: { src } + } + }) { + wx.previewImage({ + current: src, // 当前显示图片的http链接 + urls: [src] // 需要预览的图片http链接列表 + }) + } + } +}); diff --git a/packages/mp/src/markdown/index.wxml b/packages/mp/src/markdown/index.wxml new file mode 100644 index 000000000..91820fc05 --- /dev/null +++ b/packages/mp/src/markdown/index.wxml @@ -0,0 +1,48 @@ + +