618 lines
11 KiB
Vue
618 lines
11 KiB
Vue
<template>
|
|
<view class="u-markdown">
|
|
<rich-text space="nbsp" :nodes="parsedNodes" @itemclick="handleItemClick"></rich-text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
/**
|
|
* markdown
|
|
* @description 该组件用于解析markdown内容
|
|
* @tutorial https://uviewui.com/components/markdown.html
|
|
* @property {String} content 渲染解析内容
|
|
* @property {Boolean} showLine 是否显示代码块行号
|
|
* @example <u-markdown :content="content" :showLine="showLine" ></u-markdown>
|
|
*/
|
|
|
|
import props from './props.js';
|
|
import mixin from '../../libs/mixin/mixin'
|
|
import mpMixin from '../../libs/mixin/mpMixin'
|
|
import MarkdownIt from './markdown/markdown-it.min.js'
|
|
import hljs from './highlight/uni-highlight.min.js'
|
|
import './highlight/atom-one-dark.css'
|
|
|
|
// #ifdef APP-NVUE
|
|
import parseHtml from './parser.js'
|
|
// #endif
|
|
|
|
export default {
|
|
name: "u-markdown",
|
|
mixins: [mpMixin, mixin, props],
|
|
data() {
|
|
return {
|
|
copyCodeData: [],
|
|
markdown: null,
|
|
highlight: null,
|
|
latex: null,
|
|
}
|
|
},
|
|
computed: {
|
|
parsedNodes() {
|
|
return this.parseNodes(this.content)
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
let that = this;
|
|
that.markdown = MarkdownIt({
|
|
html: true,
|
|
highlight: function (str, lang) {
|
|
let preCode = ''
|
|
try {
|
|
preCode = hljs.highlightAuto(str).value
|
|
} catch (err) {
|
|
preCode = that.markdown.utils.escapeHtml(str)
|
|
}
|
|
const lines = preCode.split(/\n/).slice(0, -1)
|
|
// 添加自定义行号
|
|
let html = lines
|
|
.map((item, index) => {
|
|
if (item == '') {
|
|
return ''
|
|
}
|
|
return (
|
|
'<li><span class="line-num" data-line="' +
|
|
(index + 1) +
|
|
'"></span>' +
|
|
item +
|
|
'</li>'
|
|
)
|
|
})
|
|
.join('')
|
|
if (that.showLine) {
|
|
html = '<ol style="padding: 0px 30px;">' + html + '</ol>'
|
|
} else {
|
|
html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>'
|
|
}
|
|
|
|
that.copyCodeData = str
|
|
|
|
let htmlCode = `<div class="markdown-wrap">`
|
|
// #ifndef MP-WEIXIN
|
|
htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`
|
|
htmlCode += `${lang}<a class="copy-btn" code-data-index="${that.copyCodeData.length - 1}" style="margin-left: 8px;">复制代码</a>`
|
|
htmlCode += `</div>`
|
|
// #endif
|
|
htmlCode += `<pre class="hljs"><code>${html}</code></pre>`
|
|
htmlCode += '</div>'
|
|
return htmlCode
|
|
}
|
|
});
|
|
|
|
// 自定义表格渲染规则，添加横向滚动包装器
|
|
that.markdown.renderer.rules.table_open = function (tokens, idx, options, env, slf) {
|
|
return '<div class="table-wrapper"><table class="table">';
|
|
};
|
|
|
|
that.markdown.renderer.rules.table_close = function (tokens, idx, options, env, slf) {
|
|
return '</table></div>';
|
|
};
|
|
|
|
// 自定义表格行渲染规则
|
|
that.markdown.renderer.rules.tr_open = function (tokens, idx, options, env, slf) {
|
|
return '<tr class="tr">';
|
|
};
|
|
|
|
that.markdown.renderer.rules.tr_close = function (tokens, idx, options, env, slf) {
|
|
return '</tr>';
|
|
};
|
|
|
|
// 自定义表格单元格渲染规则
|
|
that.markdown.renderer.rules.td_open = function (tokens, idx, options, env, slf) {
|
|
return '<td class="td">';
|
|
};
|
|
|
|
that.markdown.renderer.rules.td_close = function (tokens, idx, options, env, slf) {
|
|
return '</td>';
|
|
};
|
|
|
|
// 自定义表头单元格渲染规则
|
|
that.markdown.renderer.rules.th_open = function (tokens, idx, options, env, slf) {
|
|
return '<th class="th">';
|
|
};
|
|
|
|
that.markdown.renderer.rules.th_close = function (tokens, idx, options, env, slf) {
|
|
return '</th>';
|
|
};
|
|
|
|
},
|
|
parseNodes(value) {
|
|
if (!value) return
|
|
// 解析<br />到\n
|
|
value = value.replace(/<br>|<br\/>|<br \/>/g, '\n')
|
|
value = value.replace(/ /g, ' ')
|
|
let htmlString = ''
|
|
if (value.split('```').length % 2) {
|
|
let mdtext = value
|
|
if (mdtext[mdtext.length - 1] != '\n') {
|
|
mdtext += '\n'
|
|
}
|
|
htmlString = this.markdown.render(mdtext)
|
|
} else {
|
|
htmlString = this.markdown.render(value)
|
|
}
|
|
|
|
// #ifndef APP-NVUE
|
|
return htmlString
|
|
// #endif
|
|
|
|
// 将htmlString转成htmlArray，反之使用rich-text解析
|
|
// #ifdef APP-NVUE
|
|
return parseHtml(htmlString)
|
|
// #endif
|
|
},
|
|
handleItemClick(e) {
|
|
let { attrs } = e.detail.node
|
|
let { 'code-data-index': codeDataIndex, class: className } = attrs
|
|
if (className == 'copy-btn') {
|
|
uni.setClipboardData({
|
|
data: this.copyCodeData[codeDataIndex],
|
|
showToast: false,
|
|
success() {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../libs/css/components.scss';
|
|
|
|
.u-markdown {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
word-break: break-all;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: inherit;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
color: inherit;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.h1,
|
|
h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.h2,
|
|
h2 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.h3,
|
|
h3 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.h4,
|
|
h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.h5,
|
|
h5 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.h6,
|
|
h6 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
a {
|
|
background-color: transparent;
|
|
color: #2196f3;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr,
|
|
::v-deep .hr {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
border: 0;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
|
|
img {
|
|
max-width: 35%;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
ol ol,
|
|
ol ul,
|
|
ul ol,
|
|
ul ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ol ol,
|
|
ul ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
ol ol ol,
|
|
ul ul ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
dl {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
dt {
|
|
font-weight: 600;
|
|
}
|
|
|
|
dt,
|
|
dd {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.task-list-item input {
|
|
margin: 0 0.2em 0.25em -1.6em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
pre {
|
|
position: relative;
|
|
z-index: 11;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
code:not(.hljs) {
|
|
padding: 2px 4px;
|
|
font-size: 90%;
|
|
color: #c7254e;
|
|
background-color: #ffe7ee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
code:empty {
|
|
display: none;
|
|
}
|
|
|
|
pre code.hljs {
|
|
color: var(--vg__text-1);
|
|
border-radius: 16px;
|
|
background: var(--vg__bg-1);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.markdown-wrap {
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
pre.code-block-wrapper {
|
|
background: #2b2b2b;
|
|
color: #f8f8f2;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
pre.code-block-wrapper code {
|
|
padding: auto;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.code-block-header__copy {
|
|
font-size: 16px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
abbr[data-original-title],
|
|
abbr[title] {
|
|
cursor: help;
|
|
border-bottom: 1px dotted #777;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 10px 20px;
|
|
margin: 0 0 20px;
|
|
font-size: 17.5px;
|
|
border-left: 5px solid #e5e5e5;
|
|
}
|
|
|
|
blockquote ol:last-child,
|
|
blockquote p:last-child,
|
|
blockquote ul:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
blockquote .small,
|
|
blockquote footer,
|
|
blockquote small {
|
|
display: block;
|
|
font-size: 80%;
|
|
line-height: 1.42857143;
|
|
color: #777;
|
|
}
|
|
|
|
blockquote .small:before,
|
|
blockquote footer:before,
|
|
blockquote small:before {
|
|
content: '\2014 \00A0';
|
|
}
|
|
|
|
.blockquote-reverse,
|
|
blockquote.pull-right {
|
|
padding-right: 15px;
|
|
padding-left: 0;
|
|
text-align: right;
|
|
border-right: 5px solid #eee;
|
|
border-left: 0;
|
|
}
|
|
|
|
.blockquote-reverse .small:before,
|
|
.blockquote-reverse footer:before,
|
|
.blockquote-reverse small:before,
|
|
blockquote.pull-right .small:before,
|
|
blockquote.pull-right footer:before,
|
|
blockquote.pull-right small:before {
|
|
content: '';
|
|
}
|
|
|
|
.blockquote-reverse .small:after,
|
|
.blockquote-reverse footer:after,
|
|
.blockquote-reverse small:after,
|
|
blockquote.pull-right .small:after,
|
|
blockquote.pull-right footer:after,
|
|
blockquote.pull-right small:after {
|
|
content: '\00A0 \2014';
|
|
}
|
|
|
|
.footnotes {
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
|
|
.footnotes-list {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
::v-deep .table-wrapper {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
|
|
::v-deep .table-wrapper::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
::v-deep .table-wrapper .table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
|
|
::v-deep .table-wrapper .table .th,
|
|
::v-deep .table-wrapper .table .td {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
border-right: 1px solid #e5e5e5;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
min-width: 100%;
|
|
}
|
|
::v-deep .table-wrapper .table .tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
::v-deep .table-wrapper .table .tr td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
::v-deep .table-wrapper .table .th {
|
|
font-weight: 600;
|
|
background-color: #f8f9fa;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
::v-deep .hljs{
|
|
padding:10px 8px 0;
|
|
margin-bottom:5px;
|
|
overflow: auto;
|
|
display: block;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.hljs[class*='language-']:before {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0.8em;
|
|
right: 1em;
|
|
font-size: 0.8em;
|
|
color: #999;
|
|
}
|
|
|
|
.hljs[class~='language-js']:before {
|
|
content: 'js';
|
|
}
|
|
|
|
.hljs[class~='language-ts']:before {
|
|
content: 'ts';
|
|
}
|
|
|
|
.hljs[class~='language-html']:before {
|
|
content: 'html';
|
|
}
|
|
|
|
.hljs[class~='language-md']:before {
|
|
content: 'md';
|
|
}
|
|
|
|
.hljs[class~='language-vue']:before {
|
|
content: 'vue';
|
|
}
|
|
|
|
.hljs[class~='language-css']:before {
|
|
content: 'css';
|
|
}
|
|
|
|
.hljs[class~='language-sass']:before {
|
|
content: 'sass';
|
|
}
|
|
|
|
.hljs[class~='language-scss']:before {
|
|
content: 'scss';
|
|
}
|
|
|
|
.hljs[class~='language-less']:before {
|
|
content: 'less';
|
|
}
|
|
|
|
.hljs[class~='language-stylus']:before {
|
|
content: 'stylus';
|
|
}
|
|
|
|
.hljs[class~='language-go']:before {
|
|
content: 'go';
|
|
}
|
|
|
|
.hljs[class~='language-java']:before {
|
|
content: 'java';
|
|
}
|
|
|
|
.hljs[class~='language-c']:before {
|
|
content: 'c';
|
|
}
|
|
|
|
.hljs[class~='language-sh']:before {
|
|
content: 'sh';
|
|
}
|
|
|
|
.hljs[class~='language-yaml']:before {
|
|
content: 'yaml';
|
|
}
|
|
|
|
.hljs[class~='language-py']:before {
|
|
content: 'py';
|
|
}
|
|
|
|
.hljs[class~='language-docker']:before {
|
|
content: 'docker';
|
|
}
|
|
|
|
.hljs[class~='language-dockerfile']:before {
|
|
content: 'dockerfile';
|
|
}
|
|
|
|
.hljs[class~='language-makefile']:before {
|
|
content: 'makefile';
|
|
}
|
|
|
|
.hljs[class~='language-javascript']:before {
|
|
content: 'js';
|
|
}
|
|
|
|
.hljs[class~='language-typescript']:before {
|
|
content: 'ts';
|
|
}
|
|
|
|
.hljs[class~='language-markup']:before {
|
|
content: 'html';
|
|
}
|
|
|
|
.hljs[class~='language-markdown']:before {
|
|
content: 'md';
|
|
}
|
|
|
|
.hljs[class~='language-json']:before {
|
|
content: 'json';
|
|
}
|
|
|
|
.hljs[class~='language-ruby']:before {
|
|
content: 'rb';
|
|
}
|
|
|
|
.hljs[class~='language-python']:before {
|
|
content: 'py';
|
|
}
|
|
|
|
.hljs[class~='language-bash']:before {
|
|
content: 'sh';
|
|
}
|
|
|
|
.hljs[class~='language-php']:before {
|
|
content: 'php';
|
|
}
|
|
}
|
|
</style>
|