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

代码增加着色;增加一个尺寸规范

old
宇天 2021-01-30 17:35:32 +08:00
parent 48a0001104
commit 11ecf7b839
4 changed files with 164 additions and 104 deletions

56
src/code/colorful.js Normal file
View File

@ -0,0 +1,56 @@
/**
* 简单的代码着色 (html, css, js)
* @author yutent<yutent.io@gmail.com>
* @date 2021/01/30 14:00:12
*/
const DOCTYPE_EXP = /<\!DOCTYPE html>/
const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
const TAG_END_EXP = /<\/([\w\-]+)>/g
const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
// const TAGS = 'a,b,i'
export function colorHtml(code) {
code = code
.replace(DOCTYPE_EXP, '[tag]&lt;!DOCTYPE [attr]html[/attr]&gt;[/tag]')
.replace(TAG_START_EXP, (m, tag, attr) => {
if (attr) {
attr = attr.replace(TAG_ATTR_EXP, function(t) {
if (~t.indexOf('=')) {
t = t.split('=')
let a = t.shift()
let b = t.join('=')
return `[attr]${a}[/attr]=[str]${b}[/str]`
} else {
return `[attr]${t}[/attr]`
}
})
}
return `[tag]&lt;${tag + attr}&gt;[/tag]`
})
.replace(TAG_END_EXP, (m, tag) => {
return `[tag]&lt;/${tag}&gt;[/tag]`
})
.replace(TAG_CM_EXP, '<i class="gr">&lt;!--$1--&gt;</i>')
return code
.replace(/\[(\/?)tag\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
.replace(/\[(\/?)attr\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
.replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
}
export function colorCss(code) {
code = code
.replace(
/:(hover|after|active|last\-child|first\-child)/g,
'<i class="o">:$1</i>'
)
.replace(/([\.#])([\w\-]+)/g, '<i class="gr">$1</i><i class="o">$2</i>')
.replace(
/([a-zA-Z\-]+):\s?([^;\n]+);?/g,
'<b class="gr">$1: </b><i class="b">$2</i><i class="gr">;</i>'
)
.replace(/([,\{\}])/g, '<i class="gr">$1</i>')
.replace(/&/g, '<i class="r">&</i>')
return code
}

View File

@ -8,7 +8,7 @@
<wc-icon title="复制" class="act cp" is="doc"></wc-icon>
</span>
</header>
<wc-scroll axis="y" class="code"></wc-scroll>
<wc-scroll axis="y" class="scoll"></wc-scroll>
</div>
</template>
@ -25,6 +25,7 @@
width: 100%;
max-height: 610px;
margin: 10px 0;
padding-bottom: 8px;
border-radius: 6px;
background: #f7f8fb;
color: var(--color-dark-1);
@ -71,23 +72,23 @@
}
}
.code {
.scoll {
flex: 1;
padding: 5px 0;
line-height: 18px;
line-height: 20px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 13px;
font-size: 14px;
color: var(--color-dark-1);
cursor: text;
counter-reset: code;
p {
display: flex;
code {
display: block;
position: relative;
min-height: 18px;
min-height: 20px;
padding: 0 8px 0 45px;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
&::before {
position: absolute;
@ -100,6 +101,26 @@
content: counter(code);
counter-increment: code;
}
i {
font-style: normal;
}
.r {
color: var(--color-red-1);
}
.b {
color: var(--color-blue-1);
}
.g {
color: var(--color-green-1);
}
.gr {
color: var(--color-grey-2);
}
.o {
color: var(--color-orange-2);
}
}
}
}
@ -133,6 +154,7 @@
import '../scroll/index'
import '../layer/index'
import $ from '../utils'
import { colorHtml, colorCss } from './colorful'
export default class Code {
props = {
@ -159,16 +181,33 @@ export default class Code {
}
set value(txt) {
this.props.content = txt
txt = txt
.replace(/&amp;/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
this.props.content = txt
switch (this.props.lang) {
case 'html':
txt = colorHtml(txt)
break
case 'css':
case 'scss':
case 'less':
txt = colorCss(txt)
break
default:
txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
break
}
txt = txt
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.split('\n')
txt = txt.map(s => `<p>${s}</p>`).join('')
.map(s => `<code>${s}</code>`)
.join('')
this.__CODE__.innerHTML = txt
}

View File

@ -9,8 +9,8 @@
:host {
overflow: hidden;
display: inline-flex;
min-width: 64px;
height: 32px;
min-width: 76px;
height: 36px;
border-radius: 6px;
user-select: none;
-moz-user-select: none;
@ -29,10 +29,10 @@
padding: var(--padding, 0 14px);
margin: auto;
line-height: 1;
border: 0;
border: 2px solid var(--color-plain-2);
border-radius: inherit;
white-space: nowrap;
background: var(--color-plain-2);
background: #fff;
font-size: inherit;
font-family: inherit;
outline: none;
@ -74,17 +74,23 @@
}
:host([size='medium']) {
min-width: 128px;
height: 36px;
height: 44px;
button {
padding: 0 18px;
}
}
:host([size='medium'][circle]) {
min-width: 36px;
min-width: 44px;
}
:host([size='small']) {
height: 32px;
}
:host([size='small'][circle]) {
min-width: 32px;
}
:host([size='mini']) {
min-width: 26px;
min-width: 32px;
height: 26px;
font-size: 12px;
@ -104,7 +110,7 @@
border-radius: 26px;
}
:host([circle]) {
min-width: 32px;
min-width: 36px;
border-radius: 50%;
button {
padding: 0;
@ -120,43 +126,28 @@
:host([type]) {
color: #fff;
}
:host([link]) {
min-width: auto;
height: auto;
font-size: 14px;
color: var(--color-plain-3);
button {
padding: 0;
background: none;
&:hover {
text-decoration: underline;
}
border: 0;
}
}
:host(:not([disabled]):not([loading]):not([link])) button {
:host(:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-plain-1);
border-color: var(--color-plain-1);
}
&:active {
background: var(--color-plain-3);
border-color: var(--color-plain-3);
}
}
:host(:focus-within:not([link])) {
:host(:focus-within) {
box-shadow: 0 0 0 2px var(--color-plain-a);
}
// -------------
:host([type='danger']:not([link])) button {
:host([type='danger']) button {
background: var(--color-red-2);
}
:host([type='danger'][link]) button {
color: var(--color-red-1);
}
:host([type='danger']:not([disabled]):not([loading]):not([link])) button {
:host([type='danger']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-red-1);
}
@ -164,18 +155,15 @@
background: var(--color-red-3);
}
}
:host([type='danger']:focus-within:not([link])) {
:host([type='danger']:focus-within) {
box-shadow: 0 0 0 2px var(--color-red-a);
}
// -------------
:host([type='info']:not([link])) button {
:host([type='info']) button {
background: var(--color-blue-2);
}
:host([type='info'][link]) button {
color: var(--color-blue-2);
}
:host([type='info']:not([disabled]):not([loading]):not([link])) button {
:host([type='info']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-blue-1);
}
@ -183,18 +171,15 @@
background: var(--color-blue-3);
}
}
:host([type='info']:focus-within:not([link])) {
:host([type='info']:focus-within) {
box-shadow: 0 0 0 2px var(--color-blue-a);
}
// --------
:host([type='success']:not([link])) button {
:host([type='success']) button {
background: var(--color-green-2);
}
:host([type='success'][link]) button {
color: var(--color-green-2);
}
:host([type='success']:not([disabled]):not([loading]):not([link])) button {
:host([type='success']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-green-1);
}
@ -202,18 +187,15 @@
background: var(--color-green-3);
}
}
:host([type='success']:focus-within:not([link])) {
:host([type='success']:focus-within) {
box-shadow: 0 0 0 2px var(--color-green-a);
}
// ---------
:host([type='primary']:not([link])) button {
:host([type='primary']) button {
background: var(--color-teal-2);
}
:host([type='primary'][link]) button {
color: var(--color-teal-2);
}
:host([type='primary']:not([disabled]):not([loading]):not([link])) button {
:host([type='primary']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-teal-1);
}
@ -221,18 +203,15 @@
background: var(--color-teal-3);
}
}
:host([type='primary']:focus-within:not([link])) {
:host([type='primary']:focus-within) {
box-shadow: 0 0 0 2px var(--color-teal-a);
}
// ----------
:host([type='warning']:not([link])) button {
:host([type='warning']) button {
background: var(--color-orange-2);
}
:host([type='warning'][link]) button {
color: var(--color-orange-2);
}
:host([type='warning']:not([disabled]):not([loading]):not([link])) button {
:host([type='warning']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-orange-1);
}
@ -240,18 +219,15 @@
background: var(--color-orange-3);
}
}
:host([type='warning']:focus-within:not([link])) {
:host([type='warning']:focus-within) {
box-shadow: 0 0 0 2px var(--color-orange-a);
}
// -------
:host([type='inverse']:not([link])) button {
:host([type='inverse']) button {
background: var(--color-dark-2);
}
:host([type='inverse'][link]) button {
color: var(--color-dark-2);
}
:host([type='inverse']:not([disabled]):not([loading]):not([link])) button {
:host([type='inverse']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-dark-1);
}
@ -259,18 +235,15 @@
background: var(--color-dark-3);
}
}
:host([type='inverse']:focus-within:not([link])) {
:host([type='inverse']:focus-within) {
box-shadow: 0 0 0 2px var(--color-dark-a);
}
// -------
:host([type='default']:not([link])) button {
:host([type='default']) button {
background: var(--color-grey-2);
}
:host([type='default'][link]) button {
color: var(--color-grey-2);
}
:host([type='default']:not([disabled]):not([loading]):not([link])) button {
:host([type='default']:not([disabled]):not([loading])) button {
&:hover {
background: var(--color-grey-1);
}
@ -278,7 +251,7 @@
background: var(--color-grey-3);
}
}
:host([type='default']:focus-within:not([link])) {
:host([type='default']:focus-within) {
box-shadow: 0 0 0 2px var(--color-grey-a);
}
@ -287,16 +260,6 @@
cursor: not-allowed;
opacity: 0.6;
}
:host([link][loading]),
:host([link][disabled]) {
button {
&:hover,
&:active {
text-decoration: none;
}
}
}
</style>
<script>

View File

@ -148,6 +148,22 @@ const Decoder = {
}
}
function fixed(str) {
// 去掉\r, 将\t转为空格(2个)
return str
.replace(/\r\n|\r/g, '\n')
.replace(/\t/g, ' ')
.replace(/\u00a0/g, ' ')
.replace(/\u2424/g, '\n')
.replace(TAG_REG, (m, name, attr) => {
let tmp = attr.replace(/\n/g, '⨨☇') // 标签内的换行, 转为一组特殊字符, 方便后面还原
if (tmp !== attr) {
tmp = ' ' + tmp
}
return `<${name + tmp}>`
})
}
class Tool {
constructor(list, links) {
this.list = list
@ -156,20 +172,6 @@ class Tool {
// 初始化字符串, 处理多余换行等
static init(str) {
// 去掉\r, 将\t转为空格(2个)
str = str
.replace(/\r\n|\r/g, '\n')
.replace(/\t/g, ' ')
.replace(/\u00a0/g, ' ')
.replace(/\u2424/g, '\n')
.replace(TAG_REG, (m, name, attr) => {
attr = attr.replace(/\n/g, '⨨☇') // 标签内的换行, 转为一组特殊字符, 方便后面还原
if (attr) {
attr = ' ' + attr
}
return `<${name + attr}>`
})
var links = {}
var list = []
var lines = str.split('\n')
@ -508,5 +510,5 @@ class Tool {
}
export default function(str) {
return Tool.init(str).parse()
return Tool.init(fixed(str)).parse()
}