parent
0880661727
commit
1a8a62f598
@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
copyByClickCode: true, // 点击代码块复制
|
||||||
|
showLanguageName: true, // 是否在代码块右上角显示语言的名称
|
||||||
|
showLineNumber: false // 是否显示行号
|
||||||
|
}
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
/**
|
||||||
|
* @fileoverview highlight 插件
|
||||||
|
* Include prismjs (https://prismjs.com)
|
||||||
|
*/
|
||||||
|
import prism from './prism.min'
|
||||||
|
import config from './config'
|
||||||
|
import Parser from '../parser'
|
||||||
|
|
||||||
|
function Highlight (vm) {
|
||||||
|
this.vm = vm
|
||||||
|
}
|
||||||
|
|
||||||
|
Highlight.prototype.onParse = function (node, vm) {
|
||||||
|
if (node.name === 'pre') {
|
||||||
|
if (vm.options.editable) {
|
||||||
|
node.attrs.class = (node.attrs.class || '') + ' hl-pre'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let i
|
||||||
|
for (i = node.children.length; i--;) {
|
||||||
|
if (node.children[i].name === 'code') break
|
||||||
|
}
|
||||||
|
if (i === -1) return
|
||||||
|
const code = node.children[i]
|
||||||
|
let className = code.attrs.class + ' ' + node.attrs.class
|
||||||
|
i = className.indexOf('language-')
|
||||||
|
if (i === -1) {
|
||||||
|
i = className.indexOf('lang-')
|
||||||
|
if (i === -1) {
|
||||||
|
className = 'language-text'
|
||||||
|
i = 9
|
||||||
|
} else {
|
||||||
|
i += 5
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
i += 9
|
||||||
|
}
|
||||||
|
let j
|
||||||
|
for (j = i; j < className.length; j++) {
|
||||||
|
if (className[j] === ' ') break
|
||||||
|
}
|
||||||
|
const lang = className.substring(i, j)
|
||||||
|
if (code.children.length) {
|
||||||
|
const text = this.vm.getText(code.children).replace(/&/g, '&')
|
||||||
|
if (!text) return
|
||||||
|
if (node.c) {
|
||||||
|
node.c = undefined
|
||||||
|
}
|
||||||
|
if (prism.languages[lang]) {
|
||||||
|
code.children = (new Parser(this.vm).parse(
|
||||||
|
// 加一层 pre 保留空白符
|
||||||
|
'<pre>' + prism.highlight(text, prism.languages[lang], lang).replace(/token /g, 'hl-') + '</pre>'))[0].children
|
||||||
|
}
|
||||||
|
node.attrs.class = 'hl-pre'
|
||||||
|
code.attrs.class = 'hl-code'
|
||||||
|
code.attrs.style ='display:block;overflow: auto;'
|
||||||
|
if (config.showLanguageName) {
|
||||||
|
node.children.push({
|
||||||
|
name: 'div',
|
||||||
|
attrs: {
|
||||||
|
class: 'hl-language',
|
||||||
|
style: 'user-select:none;position:absolute;top:0;right:2px;font-size:10px;'
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
type: 'text',
|
||||||
|
text: lang
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (config.copyByClickCode) {
|
||||||
|
node.attrs.style += (node.attrs.style || '') + ';user-select:none;'
|
||||||
|
node.attrs['data-content'] = text
|
||||||
|
node.children.push({
|
||||||
|
name: 'div',
|
||||||
|
attrs: {
|
||||||
|
class: 'hl-copy',
|
||||||
|
style: 'user-select:none;position:absolute;top:0;right:3px;font-size:10px;'
|
||||||
|
},
|
||||||
|
// children: [{
|
||||||
|
// type: 'text',
|
||||||
|
// text: '复制'
|
||||||
|
// }]
|
||||||
|
})
|
||||||
|
vm.expose()
|
||||||
|
// console.log('vm',node,vm)
|
||||||
|
}
|
||||||
|
if (config.showLineNumber) {
|
||||||
|
const line = text.split('\n').length; const children = []
|
||||||
|
for (let k = line; k--;) {
|
||||||
|
children.push({
|
||||||
|
name: 'span',
|
||||||
|
attrs: {
|
||||||
|
class: 'span'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
node.children.push({
|
||||||
|
name: 'span',
|
||||||
|
attrs: {
|
||||||
|
class: 'line-numbers-rows'
|
||||||
|
},
|
||||||
|
children
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Highlight
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* @fileoverview markdown 插件
|
||||||
|
* Include marked (https://github.com/markedjs/marked)
|
||||||
|
* Include github-markdown-css (https://github.com/sindresorhus/github-markdown-css)
|
||||||
|
*/
|
||||||
|
import marked from './marked.min'
|
||||||
|
let index = 0
|
||||||
|
|
||||||
|
function Markdown (vm) {
|
||||||
|
this.vm = vm
|
||||||
|
vm._ids = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
Markdown.prototype.onUpdate = function (content) {
|
||||||
|
if (this.vm.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 || ''}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Markdown
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,175 @@
|
|||||||
|
const blank = {
|
||||||
|
' ': true,
|
||||||
|
'\n': true,
|
||||||
|
'\t': true,
|
||||||
|
'\r': true,
|
||||||
|
'\f': true
|
||||||
|
}
|
||||||
|
|
||||||
|
function Parser () {
|
||||||
|
this.styles = []
|
||||||
|
this.selectors = []
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 解析 css 字符串
|
||||||
|
* @param {string} content css 内容
|
||||||
|
*/
|
||||||
|
Parser.prototype.parse = function (content) {
|
||||||
|
new Lexer(this).parse(content)
|
||||||
|
return this.styles
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 解析到一个选择器
|
||||||
|
* @param {string} name 名称
|
||||||
|
*/
|
||||||
|
Parser.prototype.onSelector = function (name) {
|
||||||
|
// 不支持的选择器
|
||||||
|
if (name.includes('[') || name.includes('*') || name.includes('@')) return
|
||||||
|
const selector = {}
|
||||||
|
// 伪类
|
||||||
|
if (name.includes(':')) {
|
||||||
|
const info = name.split(':')
|
||||||
|
const pseudo = info.pop()
|
||||||
|
if (pseudo === 'before' || pseudo === 'after') {
|
||||||
|
selector.pseudo = pseudo
|
||||||
|
name = info[0]
|
||||||
|
} else return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分割交集选择器
|
||||||
|
function splitItem (str) {
|
||||||
|
const arr = []
|
||||||
|
let i, start
|
||||||
|
for (i = 1, start = 0; i < str.length; i++) {
|
||||||
|
if (str[i] === '.' || str[i] === '#') {
|
||||||
|
arr.push(str.substring(start, i))
|
||||||
|
start = i
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!arr.length) {
|
||||||
|
return str
|
||||||
|
} else {
|
||||||
|
arr.push(str.substring(start, i))
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 后代选择器
|
||||||
|
if (name.includes(' ')) {
|
||||||
|
selector.list = []
|
||||||
|
const list = name.split(' ')
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (list[i].length) {
|
||||||
|
// 拆分子选择器
|
||||||
|
const arr = list[i].split('>')
|
||||||
|
for (let j = 0; j < arr.length; j++) {
|
||||||
|
selector.list.push(splitItem(arr[j]))
|
||||||
|
if (j < arr.length - 1) {
|
||||||
|
selector.list.push('>')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selector.key = splitItem(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selectors.push(selector)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 解析到选择器内容
|
||||||
|
* @param {string} content 内容
|
||||||
|
*/
|
||||||
|
Parser.prototype.onContent = function (content) {
|
||||||
|
// 并集选择器
|
||||||
|
for (let i = 0; i < this.selectors.length; i++) {
|
||||||
|
this.selectors[i].style = content
|
||||||
|
}
|
||||||
|
this.styles = this.styles.concat(this.selectors)
|
||||||
|
this.selectors = []
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description css 词法分析器
|
||||||
|
* @param {object} handler 高层处理器
|
||||||
|
*/
|
||||||
|
function Lexer (handler) {
|
||||||
|
this.selector = ''
|
||||||
|
this.style = ''
|
||||||
|
this.handler = handler
|
||||||
|
}
|
||||||
|
|
||||||
|
Lexer.prototype.parse = function (content) {
|
||||||
|
this.i = 0
|
||||||
|
this.content = content
|
||||||
|
this.state = this.blank
|
||||||
|
for (let len = content.length; this.i < len; this.i++) {
|
||||||
|
this.state(content[this.i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Lexer.prototype.comment = function () {
|
||||||
|
this.i = this.content.indexOf('*/', this.i) + 1
|
||||||
|
if (!this.i) {
|
||||||
|
this.i = this.content.length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Lexer.prototype.blank = function (c) {
|
||||||
|
if (!blank[c]) {
|
||||||
|
if (c === '/' && this.content[this.i + 1] === '*') {
|
||||||
|
this.comment()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.selector += c
|
||||||
|
this.state = this.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Lexer.prototype.name = function (c) {
|
||||||
|
if (c === '/' && this.content[this.i + 1] === '*') {
|
||||||
|
this.comment()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (c === '{' || c === ',' || c === ';') {
|
||||||
|
this.handler.onSelector(this.selector.trimEnd())
|
||||||
|
this.selector = ''
|
||||||
|
if (c !== '{') {
|
||||||
|
while (blank[this.content[++this.i]]);
|
||||||
|
}
|
||||||
|
if (this.content[this.i] === '{') {
|
||||||
|
this.floor = 1
|
||||||
|
this.state = this.val
|
||||||
|
} else {
|
||||||
|
this.selector += this.content[this.i]
|
||||||
|
}
|
||||||
|
} else if (blank[c]) {
|
||||||
|
this.selector += ' '
|
||||||
|
} else {
|
||||||
|
this.selector += c
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Lexer.prototype.val = function (c) {
|
||||||
|
if (c === '/' && this.content[this.i + 1] === '*') {
|
||||||
|
this.comment()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (c === '{') {
|
||||||
|
this.floor++
|
||||||
|
} else if (c === '}') {
|
||||||
|
this.floor--
|
||||||
|
if (!this.floor) {
|
||||||
|
this.handler.onContent(this.style)
|
||||||
|
this.style = ''
|
||||||
|
this.state = this.blank
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.style += c
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Parser
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<view class="zero-markdown-view">
|
||||||
|
<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
|
||||||
|
:markdown="true" :content="html">
|
||||||
|
</mp-html>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mpHtml from '../mp-html/mp-html';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'zero-markdown-view',
|
||||||
|
components: {
|
||||||
|
mpHtml
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
markdown: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selectable: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
scrollTable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
themeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#007AFF'
|
||||||
|
},
|
||||||
|
codeBgColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#2d2d2d'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
html: '',
|
||||||
|
tagStyle: '',
|
||||||
|
mpkey: 'zero'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
markdown: function(val) {
|
||||||
|
this.html = this.markdown
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initTagStyle();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
this.html = this.markdown
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
initTagStyle() {
|
||||||
|
const themeColor = this.themeColor
|
||||||
|
const codeBgColor = this.codeBgColor
|
||||||
|
let zeroStyle = {
|
||||||
|
p: `
|
||||||
|
margin:5px 5px;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height:1.75;
|
||||||
|
letter-spacing:0.2em;
|
||||||
|
word-spacing:0.1em;
|
||||||
|
`,
|
||||||
|
// 一级标题
|
||||||
|
h1: `
|
||||||
|
margin:25px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: ${themeColor};
|
||||||
|
padding:3px 10px 1px;
|
||||||
|
border-bottom: 2px solid ${themeColor};
|
||||||
|
border-top-right-radius:3px;
|
||||||
|
border-top-left-radius:3px;
|
||||||
|
`,
|
||||||
|
// 二级标题
|
||||||
|
h2: `
|
||||||
|
margin:40px 0 20px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align:center;
|
||||||
|
color:${themeColor};
|
||||||
|
font-weight:bolder;
|
||||||
|
padding-left:10px;
|
||||||
|
// border:1px solid ${themeColor};
|
||||||
|
`,
|
||||||
|
// 三级标题
|
||||||
|
h3: `
|
||||||
|
margin:30px 0 10px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: ${themeColor};
|
||||||
|
padding-left:10px;
|
||||||
|
border-left:3px solid ${themeColor};
|
||||||
|
`,
|
||||||
|
// 引用
|
||||||
|
blockquote: `
|
||||||
|
margin:15px 0;
|
||||||
|
font-size:15px;
|
||||||
|
color: #777777;
|
||||||
|
border-left: 4px solid #dddddd;
|
||||||
|
padding: 0 10px;
|
||||||
|
`,
|
||||||
|
// 列表
|
||||||
|
ul: `
|
||||||
|
margin: 10px 0;
|
||||||
|
color: #555;
|
||||||
|
`,
|
||||||
|
li: `
|
||||||
|
margin: 5px 0;
|
||||||
|
color: #555;
|
||||||
|
`,
|
||||||
|
// 链接
|
||||||
|
a: `
|
||||||
|
// color: ${themeColor};
|
||||||
|
`,
|
||||||
|
// 加粗
|
||||||
|
strong: `
|
||||||
|
font-weight: border;
|
||||||
|
color: ${themeColor};
|
||||||
|
`,
|
||||||
|
// 斜体
|
||||||
|
em: `
|
||||||
|
color: ${themeColor};
|
||||||
|
letter-spacing:0.3em;
|
||||||
|
`,
|
||||||
|
// 分割线
|
||||||
|
hr: `
|
||||||
|
height:1px;
|
||||||
|
padding:0;
|
||||||
|
border:none;
|
||||||
|
// border-top:medium solid #333;
|
||||||
|
text-align:center;
|
||||||
|
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
||||||
|
`,
|
||||||
|
// 表格
|
||||||
|
table: `
|
||||||
|
border-spacing:0;
|
||||||
|
overflow:auto;
|
||||||
|
min-width:100%;
|
||||||
|
margin:10px 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
`,
|
||||||
|
th: `
|
||||||
|
border: 1px solid #202121;
|
||||||
|
color: #555;
|
||||||
|
`,
|
||||||
|
td: `
|
||||||
|
color:#555;
|
||||||
|
border: 1px solid #555555;
|
||||||
|
`,
|
||||||
|
pre: `
|
||||||
|
border-radius: 5px;
|
||||||
|
white-space: pre;
|
||||||
|
background: ${codeBgColor};
|
||||||
|
font-size:12px;
|
||||||
|
position: relative;
|
||||||
|
`,
|
||||||
|
}
|
||||||
|
this.tagStyle = zeroStyle
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.zero-markdown-view {
|
||||||
|
padding: 15rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
{
|
||||||
|
"id": "zero-markdown-view",
|
||||||
|
"displayName": "zero-markdown-view(markdown解析)",
|
||||||
|
"version": "2.0.5",
|
||||||
|
"description": "一行代码即可实现markdown解析,支持自定义主题色,支持vue2,vue3.",
|
||||||
|
"keywords": [
|
||||||
|
"markdown",
|
||||||
|
"markdown解析",
|
||||||
|
"代码块",
|
||||||
|
"代码高亮",
|
||||||
|
"mp-html"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue