feat: 引入了markdown
This commit is contained in:
1
components/ua-markdown/lib/highlight/atom-one-dark.css
Normal file
1
components/ua-markdown/lib/highlight/atom-one-dark.css
Normal file
@@ -0,0 +1 @@
|
||||
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
|
||||
1
components/ua-markdown/lib/highlight/atom-one-light.css
Normal file
1
components/ua-markdown/lib/highlight/atom-one-light.css
Normal file
@@ -0,0 +1 @@
|
||||
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
|
||||
10
components/ua-markdown/lib/highlight/github-dark.min.css
vendored
Normal file
10
components/ua-markdown/lib/highlight/github-dark.min.css
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
|
||||
Theme: GitHub Dark
|
||||
Description: Dark theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-dark
|
||||
Current colors taken from GitHub's CSS
|
||||
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
|
||||
5254
components/ua-markdown/lib/highlight/uni-highlight.min.js
vendored
Normal file
5254
components/ua-markdown/lib/highlight/uni-highlight.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
352
components/ua-markdown/lib/html-parser.js
Normal file
352
components/ua-markdown/lib/html-parser.js
Normal file
@@ -0,0 +1,352 @@
|
||||
/*
|
||||
* HTML5 Parser By Sam Blowes
|
||||
*
|
||||
* Designed for HTML5 documents
|
||||
*
|
||||
* Original code by John Resig (ejohn.org)
|
||||
* http://ejohn.org/blog/pure-javascript-html-parser/
|
||||
* Original code by Erik Arvidsson, Mozilla Public License
|
||||
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
|
||||
*
|
||||
* ----------------------------------------------------------------------------
|
||||
* License
|
||||
* ----------------------------------------------------------------------------
|
||||
*
|
||||
* This code is triple licensed using Apache Software License 2.0,
|
||||
* Mozilla Public License or GNU Public License
|
||||
*
|
||||
* ////////////////////////////////////////////////////////////////////////////
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
|
||||
* use this file except in compliance with the License. You may obtain a copy
|
||||
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* ////////////////////////////////////////////////////////////////////////////
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License
|
||||
* Version 1.1 (the "License"); you may not use this file except in
|
||||
* compliance with the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS"
|
||||
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing rights and limitations
|
||||
* under the License.
|
||||
*
|
||||
* The Original Code is Simple HTML Parser.
|
||||
*
|
||||
* The Initial Developer of the Original Code is Erik Arvidsson.
|
||||
* Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
|
||||
* Reserved.
|
||||
*
|
||||
* ////////////////////////////////////////////////////////////////////////////
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public License
|
||||
* as published by the Free Software Foundation; either version 2
|
||||
* of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* ----------------------------------------------------------------------------
|
||||
* Usage
|
||||
* ----------------------------------------------------------------------------
|
||||
*
|
||||
* // Use like so:
|
||||
* HTMLParser(htmlString, {
|
||||
* start: function(tag, attrs, unary) {},
|
||||
* end: function(tag) {},
|
||||
* chars: function(text) {},
|
||||
* comment: function(text) {}
|
||||
* });
|
||||
*
|
||||
* // or to get an XML string:
|
||||
* HTMLtoXML(htmlString);
|
||||
*
|
||||
* // or to get an XML DOM Document
|
||||
* HTMLtoDOM(htmlString);
|
||||
*
|
||||
* // or to inject into an existing document/DOM node
|
||||
* HTMLtoDOM(htmlString, document);
|
||||
* HTMLtoDOM(htmlString, document.body);
|
||||
*
|
||||
*/
|
||||
// Regular Expressions for parsing tags and attributes
|
||||
var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
|
||||
var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
|
||||
var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
|
||||
|
||||
var empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
|
||||
// fixed by xxx 将 ins 标签从块级名单中移除
|
||||
|
||||
var block = makeMap('a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); // Inline Elements - HTML 5
|
||||
|
||||
var inline = makeMap('abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); // Elements that you can, intentionally, leave open
|
||||
// (and which close themselves)
|
||||
|
||||
var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
|
||||
|
||||
var fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
|
||||
|
||||
var special = makeMap('script,style');
|
||||
function HTMLParser(html, handler) {
|
||||
var index;
|
||||
var chars;
|
||||
var match;
|
||||
var stack = [];
|
||||
var last = html;
|
||||
|
||||
stack.last = function () {
|
||||
return this[this.length - 1];
|
||||
};
|
||||
|
||||
while (html) {
|
||||
chars = true; // Make sure we're not in a script or style element
|
||||
|
||||
if (!stack.last() || !special[stack.last()]) {
|
||||
// Comment
|
||||
if (html.indexOf('<!--') == 0) {
|
||||
index = html.indexOf('-->');
|
||||
|
||||
if (index >= 0) {
|
||||
if (handler.comment) {
|
||||
handler.comment(html.substring(4, index));
|
||||
}
|
||||
|
||||
html = html.substring(index + 3);
|
||||
chars = false;
|
||||
} // end tag
|
||||
|
||||
} else if (html.indexOf('</') == 0) {
|
||||
match = html.match(endTag);
|
||||
|
||||
if (match) {
|
||||
html = html.substring(match[0].length);
|
||||
match[0].replace(endTag, parseEndTag);
|
||||
chars = false;
|
||||
} // start tag
|
||||
|
||||
} else if (html.indexOf('<') == 0) {
|
||||
match = html.match(startTag);
|
||||
|
||||
if (match) {
|
||||
html = html.substring(match[0].length);
|
||||
match[0].replace(startTag, parseStartTag);
|
||||
chars = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (chars) {
|
||||
index = html.indexOf('<');
|
||||
var text = index < 0 ? html : html.substring(0, index);
|
||||
html = index < 0 ? '' : html.substring(index);
|
||||
|
||||
if (handler.chars) {
|
||||
handler.chars(text);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function (all, text) {
|
||||
text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
|
||||
|
||||
if (handler.chars) {
|
||||
handler.chars(text);
|
||||
}
|
||||
|
||||
return '';
|
||||
});
|
||||
parseEndTag('', stack.last());
|
||||
}
|
||||
|
||||
if (html == last) {
|
||||
throw 'Parse Error: ' + html;
|
||||
}
|
||||
|
||||
last = html;
|
||||
} // Clean up any remaining tags
|
||||
|
||||
|
||||
parseEndTag();
|
||||
|
||||
function parseStartTag(tag, tagName, rest, unary) {
|
||||
tagName = tagName.toLowerCase();
|
||||
|
||||
if (block[tagName]) {
|
||||
while (stack.last() && inline[stack.last()]) {
|
||||
parseEndTag('', stack.last());
|
||||
}
|
||||
}
|
||||
|
||||
if (closeSelf[tagName] && stack.last() == tagName) {
|
||||
parseEndTag('', tagName);
|
||||
}
|
||||
|
||||
unary = empty[tagName] || !!unary;
|
||||
|
||||
if (!unary) {
|
||||
stack.push(tagName);
|
||||
}
|
||||
|
||||
if (handler.start) {
|
||||
var attrs = [];
|
||||
rest.replace(attr, function (match, name) {
|
||||
var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[name] ? name : '';
|
||||
attrs.push({
|
||||
name: name,
|
||||
value: value,
|
||||
escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
if (handler.start) {
|
||||
handler.start(tagName, attrs, unary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseEndTag(tag, tagName) {
|
||||
// If no tag name is provided, clean shop
|
||||
if (!tagName) {
|
||||
var pos = 0;
|
||||
} // Find the closest opened tag of the same type
|
||||
else {
|
||||
for (var pos = stack.length - 1; pos >= 0; pos--) {
|
||||
if (stack[pos] == tagName) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (pos >= 0) {
|
||||
// Close all the open elements, up the stack
|
||||
for (var i = stack.length - 1; i >= pos; i--) {
|
||||
if (handler.end) {
|
||||
handler.end(stack[i]);
|
||||
}
|
||||
} // Remove the open elements from the stack
|
||||
|
||||
|
||||
stack.length = pos;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function makeMap(str) {
|
||||
var obj = {};
|
||||
var items = str.split(',');
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
obj[items[i]] = true;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function removeDOCTYPE(html) {
|
||||
return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
|
||||
}
|
||||
|
||||
function parseAttrs(attrs) {
|
||||
return attrs.reduce(function (pre, attr) {
|
||||
var value = attr.value;
|
||||
var name = attr.name;
|
||||
|
||||
if (pre[name]) {
|
||||
pre[name] = pre[name] + " " + value;
|
||||
} else {
|
||||
pre[name] = value;
|
||||
}
|
||||
|
||||
return pre;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function parseHtml(html) {
|
||||
html = removeDOCTYPE(html);
|
||||
var stacks = [];
|
||||
var results = {
|
||||
node: 'root',
|
||||
children: []
|
||||
};
|
||||
HTMLParser(html, {
|
||||
start: function start(tag, attrs, unary) {
|
||||
var node = {
|
||||
name: tag
|
||||
};
|
||||
|
||||
if (attrs.length !== 0) {
|
||||
node.attrs = parseAttrs(attrs);
|
||||
}
|
||||
|
||||
if (unary) {
|
||||
var parent = stacks[0] || results;
|
||||
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
|
||||
parent.children.push(node);
|
||||
} else {
|
||||
stacks.unshift(node);
|
||||
}
|
||||
},
|
||||
end: function end(tag) {
|
||||
var node = stacks.shift();
|
||||
if (node.name !== tag) console.error('invalid state: mismatch end tag');
|
||||
|
||||
if (stacks.length === 0) {
|
||||
results.children.push(node);
|
||||
} else {
|
||||
var parent = stacks[0];
|
||||
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
|
||||
parent.children.push(node);
|
||||
}
|
||||
},
|
||||
chars: function chars(text) {
|
||||
var node = {
|
||||
type: 'text',
|
||||
text: text
|
||||
};
|
||||
|
||||
if (stacks.length === 0) {
|
||||
results.children.push(node);
|
||||
} else {
|
||||
var parent = stacks[0];
|
||||
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
|
||||
parent.children.push(node);
|
||||
}
|
||||
},
|
||||
comment: function comment(text) {
|
||||
var node = {
|
||||
node: 'comment',
|
||||
text: text
|
||||
};
|
||||
var parent = stacks[0];
|
||||
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
|
||||
parent.children.push(node);
|
||||
}
|
||||
});
|
||||
return results.children;
|
||||
}
|
||||
|
||||
export default parseHtml;
|
||||
2
components/ua-markdown/lib/markdown-it.min.js
vendored
Normal file
2
components/ua-markdown/lib/markdown-it.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
318
components/ua-markdown/ua-markdown.vue
Normal file
318
components/ua-markdown/ua-markdown.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<!-- uniapp vue3 markdown解析 -->
|
||||
<template>
|
||||
<view class="ua__markdown"><rich-text space="nbsp" :nodes="parseNodes(source)" @itemclick="handleItemClick"></rich-text></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import MarkdownIt from './lib/markdown-it.min.js'
|
||||
import hljs from './lib/highlight/uni-highlight.min.js'
|
||||
import './lib/highlight/atom-one-dark.css'
|
||||
import parseHtml from './lib/html-parser.js'
|
||||
const props = defineProps({
|
||||
// 解析内容
|
||||
source: String,
|
||||
showLine: { type: [Boolean, String], default: true }
|
||||
})
|
||||
|
||||
let copyCodeData = []
|
||||
const markdown = MarkdownIt({
|
||||
html: true,
|
||||
highlight: function(str, lang) {
|
||||
let preCode = ""
|
||||
try {
|
||||
preCode = hljs.highlightAuto(str).value
|
||||
} catch (err) {
|
||||
preCode = 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(props.showLine) {
|
||||
html = '<ol style="padding: 0px 30px;">' + html + '</ol>'
|
||||
}else {
|
||||
html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>'
|
||||
}
|
||||
copyCodeData.push(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="${copyCodeData.length - 1}" style="margin-left: 8px;">复制代码</a>`
|
||||
htmlCode += `</div>`
|
||||
// #endif
|
||||
htmlCode += `<pre class="hljs" style="padding:10px 8px 0;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`;
|
||||
htmlCode += '</div>'
|
||||
return htmlCode
|
||||
}
|
||||
})
|
||||
const 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 = markdown.render(mdtext)
|
||||
} else {
|
||||
htmlString = markdown.render(value)
|
||||
}
|
||||
// 解决小程序表格边框型失效问题
|
||||
htmlString = htmlString.replace(/<table/g, `<table class="table"`)
|
||||
htmlString = htmlString.replace(/<tr/g, `<tr class="tr"`)
|
||||
htmlString = htmlString.replace(/<th>/g, `<th class="th">`)
|
||||
htmlString = htmlString.replace(/<td/g, `<td class="td"`)
|
||||
htmlString = htmlString.replace(/<hr>|<hr\/>|<hr \/>/g, `<hr class="hr">`)
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
return htmlString
|
||||
// #endif
|
||||
|
||||
// 将htmlString转成htmlArray，反之使用rich-text解析
|
||||
// #ifdef APP-NVUE
|
||||
return parseHtml(htmlString)
|
||||
// #endif
|
||||
}
|
||||
|
||||
// 复制代码
|
||||
const handleItemClick = (e) => {
|
||||
let {attrs} = e.detail.node
|
||||
let {"code-data-index":codeDataIndex,"class":className} = attrs
|
||||
if(className == 'copy-btn'){
|
||||
uni.setClipboardData({
|
||||
data: copyCodeData[codeDataIndex],showToast: false,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ua__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 .2em .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}
|
||||
table, ::v-deep .table {
|
||||
border-spacing: 0;border-collapse: collapse; width: 100%;max-width: 65em; overflow: auto;margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
table tr, ::v-deep .table .tr {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
table th, table td, ::v-deep .table .th, ::v-deep .table .td {
|
||||
padding: 6px 13px;border: 1px solid #e5e5e5;
|
||||
}
|
||||
table th, ::v-deep .table .th {
|
||||
font-weight: 600;background-color: #eee;
|
||||
}
|
||||
.hljs[class*=language-]:before {
|
||||
position: absolute; z-index: 3;top: .8em; right: 1em; font-size: .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>
|
||||
2535
node_modules/.package-lock.json
generated
vendored
2535
node_modules/.package-lock.json
generated
vendored
File diff suppressed because it is too large
Load Diff
2538
package-lock.json
generated
2538
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"lottie-web": "^5.13.0"
|
||||
"lottie-web": "^5.13.0",
|
||||
"vue-element-plus-x": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<view class="chat-ai">
|
||||
<text>{{ text }}</text>
|
||||
<!-- <text>{{ text }}</text> -->
|
||||
<!-- <XMarkdown :markdown="text"/> -->
|
||||
<ua-markdown :source="text" />
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
|
||||
defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
|
||||
49
readme.md
Normal file
49
readme.md
Normal file
@@ -0,0 +1,49 @@
|
||||
|
||||
# vue3版本！！！
|
||||
vue2版本已经上线，欢迎下载使用。
|
||||
[https://ext.dcloud.net.cn/plugin?id=13864](https://ext.dcloud.net.cn/plugin?id=13864)
|
||||
|
||||
## uniapp markdown渲染解析.md语法及代码高亮
|
||||
> **组件名：uaMarkdown**
|
||||
> 代码块： `<ua-markdown>`
|
||||
|
||||
|
||||
uaMarkdown组件是基于uniapp+vue3自定义解析markdown语法结构插件、支持代码块高亮，编译兼容H5+小程序端+App端。
|
||||
|
||||
|
||||
### 引入方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，只需将本组件`ua-markdown`放在components目录，在页面`template`中即可直接使用。
|
||||
|
||||
|
||||
### 基本用法
|
||||
|
||||
**示例**
|
||||
|
||||
- 基础用法
|
||||
|
||||
```html
|
||||
const mdvalue = '### uniapp markdwon'
|
||||
<ua-markdown :source="mdvalue" />
|
||||
```
|
||||
|
||||
- 去掉代码块行号
|
||||
|
||||
```html
|
||||
<ua-markdown :source="xxx" :showLine="false" />
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
### uaMarkdown Props
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
|:-:|:-:|:-:|:-:|
|
||||
|source|String|-| 渲染解析内容 |
|
||||
|showLine|Boolean|true| 是否显示代码块行号 |
|
||||
|
||||
|
||||
### 💝最后
|
||||
|
||||
开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️
|
||||
Reference in New Issue
Block a user