优化css高亮

master
yutent 2023-04-24 18:36:27 +08:00
parent 93afc6adbf
commit 66687150f8
1 changed files with 0 additions and 133 deletions

133
test.md
View File

@ -1,133 +0,0 @@
```html
<div class="code-box">
<header class="title">
<section><i></i><i></i><i></i></section>
<section>${this.lang}</section>
<wc-icon
title="复制"
class="act"
name="doc"
@click=${this.copyCode}
></wc-icon>
</header>
<div class="code-block">
${this.#code.map(s => html`<code>${raw(s)}</code>`)}
</div>
</div>
```
```js
import { html, raw, css, Component, nextTick } from '@bd/core'
import { colorHtml, colorJs, colorCss, colorMd } from './colorful.js'
import '../icon/index.js'
import '../layer/index.js'
function trim(str) {
return str
.trim()
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&amp;/g, '&')
}
class Code extends Component {
static props = {
code: {
type: String,
default: '',
attribute: false,
observer(v) {
this.setCode(v.trim())
}
},
lang: ''
}
#code = []
setCode(txt, a) {
let lang = this.lang
switch (lang) {
case 'js':
case 'javascript':
case 'ts':
case 'typescript':
txt = colorJs(txt)
break
case 'html':
txt = colorHtml(txt)
break
case 'css':
case 'scss':
case 'less':
txt = colorCss(txt)
break
case 'md':
case 'markdown':
txt = colorMd(txt)
break
}
this.#code = txt.split('\n')
}
copyCode() {
navigator.clipboard.writeText(this.code)
layer.toast('复制到粘贴板成功', 'success')
}
mounted() {
var txt = this.innerHTML || this.textContent
txt = txt.trim().replace(/^[\r\n]|\s{2,}$/g, '')
if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
txt = txt.slice(5, -6).trim()
} else if (this.firstElementChild?.tagName === 'TEXTAREA') {
txt = this.firstElementChild.value.trim()
} else if (txt.startsWith('<pre>') && txt.endsWith('</pre>')) {
txt = trim(txt.slice(5, -6))
} else {
txt = trim(txt)
}
this.textContent = ''
if (txt) {
nextTick(_ => {
this.code = txt
})
}
}
render() {
let foo = html`<section>${this.#code.map(s => html`<a>${s}</a>`)}</section>`
return html`
<div class="code-box">
<header class="title">
<section><i></i><i></i><i></i></section>
<section>${this.lang}</section>
<wc-icon
title="复制"
class="act"
name="doc"
@click=${this.copyCode}
></wc-icon>
</header>
<div class="code-block">
${this.#code.map(s => html`<code>${raw(s)}</code>`)}
</div>
</div>
`
}
}
Code.reg('code')
```