This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加markdown组件;优化code组件

old
宇天 2020-02-02 22:55:16 +08:00
parent ba751ab314
commit 172c9e822f
4 changed files with 287 additions and 56 deletions

View File

@ -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, '&lt;')
.replace(/>/g, '&gt;')
.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, '&lt;')
.replace(/>/g, '&gt;')
.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
}
}

View File

@ -826,48 +826,12 @@ Renderer.prototype.code = function(code, lang, escaped) {
code = code
.replace(/&lt;script([^&]*?)&gt;/g, '<script$1>')
.replace(/&lt;\/script&gt;/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

253
src/markd/index.wc Normal file
View File

@ -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>

View File

@ -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