优化代码块显示
parent
17d399d8fb
commit
c6837e79c0
|
@ -18,31 +18,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-box {
|
.code-box {
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 610px;
|
max-height: 610px;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
border: 1px solid var(--color-plain-2);
|
border-radius: 6px;
|
||||||
border-radius: 2px;
|
background: #f7f8fb;
|
||||||
|
color: var(--color-dark-1);
|
||||||
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 24px;
|
height: 32px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
background: var(--color-plain-2);
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 10px;
|
width: 12px;
|
||||||
height: 10px;
|
height: 12px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--color-red-1);
|
background: var(--color-red-1);
|
||||||
|
@ -55,8 +57,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.act {
|
.act {
|
||||||
--size: 16px;
|
--size: 18px;
|
||||||
margin: 0 2px;
|
margin: 0 6px;
|
||||||
color: var(--color-grey-2);
|
color: var(--color-grey-2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@ -75,7 +77,6 @@
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background: linear-gradient(to right, var(--color-plain-1) 40px, #fff 40px);
|
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
cursor: text;
|
cursor: text;
|
||||||
counter-reset: code;
|
counter-reset: code;
|
||||||
|
@ -114,18 +115,11 @@
|
||||||
:host([dark]) {
|
:host([dark]) {
|
||||||
.code-box {
|
.code-box {
|
||||||
border-color: var(--color-dark-2);
|
border-color: var(--color-dark-2);
|
||||||
|
background: var(--color-dark-1);
|
||||||
.title {
|
color: var(--color-plain-3);
|
||||||
background: var(--color-dark-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
.code {
|
||||||
background: linear-gradient(
|
color: var(--color-plain-2);
|
||||||
to right,
|
|
||||||
#596b7f 40px,
|
|
||||||
var(--color-dark-1) 40px
|
|
||||||
);
|
|
||||||
color: var(--color-plain-3);
|
|
||||||
|
|
||||||
p::before {
|
p::before {
|
||||||
color: var(--color-grey-3);
|
color: var(--color-grey-3);
|
||||||
|
@ -180,7 +174,13 @@ export default class Code {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
var txt = this.innerHTML || this.textContent
|
var txt = this.innerHTML || this.textContent
|
||||||
this.value = txt.replace(/^[\r\n]|\s{2,}$/g, '')
|
|
||||||
|
txt = txt.trim().replace(/^[\r\n]|\s{2,}$/g, '')
|
||||||
|
if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
|
||||||
|
txt = txt.slice(5, -6).trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.value = txt
|
||||||
this.textContent = ''
|
this.textContent = ''
|
||||||
|
|
||||||
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
||||||
|
|
|
@ -177,7 +177,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include focus1;
|
// @include focus1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
|
Reference in New Issue