增加markdown组件;优化code组件
parent
ba751ab314
commit
172c9e822f
|
@ -2,6 +2,7 @@
|
|||
<div class="code-box">
|
||||
<header class="title">
|
||||
<span><i></i><i></i><i></i></span>
|
||||
<span></span>
|
||||
<span>
|
||||
<wc-icon title="运行" class="act run" is="live"></wc-icon>
|
||||
<wc-icon title="复制" class="act cp" is="doc"></wc-icon>
|
||||
|
@ -138,23 +139,42 @@ import $ from '../utils'
|
|||
export default class Code {
|
||||
props = {
|
||||
dark: '',
|
||||
inline: '',
|
||||
content: ''
|
||||
lang: ''
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
// .code-box
|
||||
var elem = this.root.children[1]
|
||||
var header = elem.children[0]
|
||||
|
||||
this.__CODE__ = elem.children[1]
|
||||
this.__RUN__ = elem.children[0].children[1].firstElementChild
|
||||
this.__CP__ = elem.children[0].children[1].lastElementChild
|
||||
|
||||
this.__LANG__ = header.children[1]
|
||||
this.__RUN__ = header.children[2].firstElementChild
|
||||
this.__CP__ = header.children[2].lastElementChild
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.content
|
||||
}
|
||||
|
||||
set value(txt) {
|
||||
this.props.content = txt
|
||||
txt = txt
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.split('\n')
|
||||
txt = txt.map(s => `<p>${s}</p>`).join('')
|
||||
this.__CODE__.innerHTML = txt
|
||||
}
|
||||
|
||||
mounted() {
|
||||
var txt = this.innerHTML || this.textContent
|
||||
this.value = txt.replace(/^[\r\n]|\s{2,}$/g, '')
|
||||
this.textContent = ''
|
||||
|
||||
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
||||
try {
|
||||
navigator.clipboard.writeText(this.value)
|
||||
|
@ -180,18 +200,14 @@ export default class Code {
|
|||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'content':
|
||||
this.props.content = val
|
||||
val = val
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.split('\n')
|
||||
val = val.map(s => `<p>${s}</p>`).join('')
|
||||
this.__CODE__.innerHTML = val
|
||||
this.removeAttribute('content')
|
||||
case 'lang':
|
||||
this.props.lang = val.toLowerCase()
|
||||
this.__LANG__.textContent = this.props.lang
|
||||
break
|
||||
|
||||
default:
|
||||
case 'value':
|
||||
this.value = val
|
||||
this.removeAttribute('value')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
|
@ -826,48 +826,12 @@ Renderer.prototype.code = function(code, lang, escaped) {
|
|||
code = code
|
||||
.replace(/<script([^&]*?)>/g, '<script$1>')
|
||||
.replace(/<\/script>/g, '</script>')
|
||||
if (this.options.highlight) {
|
||||
var out = this.options.highlight(code, lang)
|
||||
if (out != null && out !== code) {
|
||||
escaped = true
|
||||
code = out
|
||||
}
|
||||
}
|
||||
|
||||
//转义特殊字符
|
||||
code = escaped ? code : escape(code, true)
|
||||
lang = this.options.langPrefix + escape(lang, true)
|
||||
code = escape(code, true)
|
||||
lang = escape(lang, true)
|
||||
|
||||
var codes = code.split('\n'),
|
||||
ln = codes.length,
|
||||
idx = 0,
|
||||
output = '',
|
||||
multiCom = false
|
||||
|
||||
while (idx++ < ln) {
|
||||
//处理多行注释
|
||||
if (!multiCom) {
|
||||
if (
|
||||
/^\s*?<span class="token comment"/.test(codes[idx - 1]) &&
|
||||
!/<\/span>$/.test(codes[idx - 1])
|
||||
) {
|
||||
multiCom = true
|
||||
codes[idx - 1] += '</span>'
|
||||
}
|
||||
} else {
|
||||
if (!/<\/span>$/.test(codes[idx - 1])) {
|
||||
codes[idx - 1] =
|
||||
'<span class="token comment">' + codes[idx - 1] + '</span>'
|
||||
} else {
|
||||
codes[idx - 1] = '<span class="token comment">' + codes[idx - 1]
|
||||
multiCom = false
|
||||
}
|
||||
}
|
||||
|
||||
output += '<code class="lang ' + lang + '">' + codes[idx - 1] + '\n</code>' //加\n为了避免空行时无法显示
|
||||
}
|
||||
|
||||
return '<pre skip class="do-ui-blockcode">' + output + '</pre>'
|
||||
return '<wc-code lang="' + lang + '">' + code + '</wc-code>'
|
||||
}
|
||||
|
||||
Renderer.prototype.blockquote = function(quote) {
|
||||
|
@ -1399,6 +1363,4 @@ marked.safe = function(txt) {
|
|||
return marked(txt)
|
||||
}
|
||||
|
||||
window.marked = marked
|
||||
|
||||
export default marked
|
|
@ -0,0 +1,253 @@
|
|||
<template>
|
||||
<div class="markd"><slot /></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
color: nth($cd, 1);
|
||||
font-size: 14px;
|
||||
}
|
||||
.markd {
|
||||
padding: 10px;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: nth($ct, 2);
|
||||
}
|
||||
a:hover {
|
||||
color: nth($ct, 1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
em {
|
||||
color: nth($cgr, 3);
|
||||
}
|
||||
strong {
|
||||
color: nth($cd, 3);
|
||||
}
|
||||
em,
|
||||
strong,
|
||||
del {
|
||||
padding: 0 3px;
|
||||
}
|
||||
p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
&.md-quote {
|
||||
margin: 10px 0;
|
||||
padding: 5px 10px;
|
||||
border-left: 5px solid nth($ct, 1);
|
||||
background: #f2faf7;
|
||||
color: nth($cgr, 1);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 提醒文本 */
|
||||
.md-warn,
|
||||
.md-mark {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 35px;
|
||||
margin: 3px 0;
|
||||
padding: 3px 8px 3px 35px;
|
||||
line-height: 27px;
|
||||
border: 1px solid nth($co, 2);
|
||||
border-radius: 5px;
|
||||
background: #fffbed;
|
||||
color: nth($co, 3);
|
||||
word-break: break-all;
|
||||
|
||||
p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 6px;
|
||||
line-height: 1;
|
||||
font-size: 20px;
|
||||
color: nth($cr, 2);
|
||||
}
|
||||
}
|
||||
.md-mark {
|
||||
border-color: nth($ct, 1);
|
||||
color: nth($ct, 3);
|
||||
background: #edfbf8;
|
||||
i {
|
||||
color: nth($ct, 3);
|
||||
}
|
||||
}
|
||||
.md-task {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 30px;
|
||||
padding-right: 10px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
|
||||
&__box {
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 6px;
|
||||
margin-left: 0;
|
||||
line-height: 1;
|
||||
border: 1px solid nth($cgr, 1);
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
&.done {
|
||||
.md-task__box {
|
||||
color: nth($cgr, 1);
|
||||
border-color: nth($cp, 3);
|
||||
background: nth($cp, 3);
|
||||
}
|
||||
.md-task__text {
|
||||
color: nth($cgr, 1);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: 30px 0;
|
||||
line-height: 1px;
|
||||
border: 0;
|
||||
color: nth($cgr, 1);
|
||||
background-color: nth($cgr, 1);
|
||||
}
|
||||
ol {
|
||||
margin-left: 1em;
|
||||
list-style: decimal outside none;
|
||||
}
|
||||
ul {
|
||||
margin-left: 1em;
|
||||
list-style: disc outside none;
|
||||
}
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
li ol {
|
||||
margin-left: 1em;
|
||||
}
|
||||
li ul {
|
||||
margin-left: 1em;
|
||||
list-style-type: circle;
|
||||
}
|
||||
li ol ul,
|
||||
li ul ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
margin: 15px 0;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
a {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
width: 25px;
|
||||
padding: 0 3px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover a {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
h2 {
|
||||
margin: 20px 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
h3 {
|
||||
margin: 20px 0 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
thead tr {
|
||||
background: nth($cp, 1);
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr:nth-child(2n) {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
|
||||
code.inline {
|
||||
color: nth($co, 3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import $ from '../utils'
|
||||
import '../code/index'
|
||||
|
||||
import parser from './core'
|
||||
|
||||
export default class Markd {
|
||||
props = {}
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
var elem = this.root.children[1]
|
||||
|
||||
this.__BOX__ = elem
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.__BOX__.innerHTML = parser.safe(this.textContent)
|
||||
this.textContent = ''
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -219,13 +219,13 @@ export default class Scroll {
|
|||
|
||||
// 鼠标滚动事件
|
||||
this._wheelFn = $.catch(this.__BOX__, 'wheel', ev => {
|
||||
ev.preventDefault()
|
||||
var { sh, oh, yh, sw, ow, xw } = this.props
|
||||
|
||||
// x轴 y轴 都为0时, 不作任何处理
|
||||
if (!xw && !yh) {
|
||||
return
|
||||
}
|
||||
ev.preventDefault()
|
||||
|
||||
//校正兼容苹果鼠标在 chrome和FF下滚动的精度
|
||||
var deltaX
|
||||
|
|
Reference in New Issue