0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/10769

Browse source
This commit is contained in:
Vanessa 2024-08-15 11:03:16 +08:00
parent 19ceaf050a
commit 7d455d70a3
5 changed files with 16 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/appearance/themes/daylight/theme.css
View file

@ -151,7 +151,6 @@
/* 代码片段背景 */
--b3-protyle-code-background: rgba(27, 31, 35, .05);
--b3-protyle-code-linenumber-hl: #b9d1f4;
/* 所见即所得行内元素颜色 */
--b3-protyle-inline-strong-color: #202124;
@ -186,7 +185,3 @@
.protyle-action--order:after {
mix-blend-mode: multiply;
}
.b3-typography .hljs, .protyle-wysiwyg .hljs {
background-color: #f8f9fa;
}

1
app/appearance/themes/midnight/theme.css
View file

@ -150,7 +150,6 @@
/* 代码片段背景 */
--b3-protyle-code-background: rgba(240, 246, 252, .15);
--b3-protyle-code-linenumber-hl: #26364a;
/* 所见即所得行内元素颜色 */
--b3-protyle-inline-strong-color: #e8eaed;

13
app/src/assets/scss/component/_typography.scss
View file

@ -268,10 +268,11 @@
.code-block {
position: relative;
padding: 0;
padding: 2em 1em 1.6em;
margin: 1em 0;
display: flex;
flex-direction: row-reverse;
background-color: var(--b3-protyle-code-background);
.protyle-action {
left: 4px;
@ -307,7 +308,6 @@
.hljs {
border-radius: var(--b3-border-radius);
padding: 2em 4px 1.6em 4px;
font-size: 85%;
overflow: auto;
font-family: var(--b3-font-family-code);
@ -315,6 +315,8 @@
overflow-x: overlay;
tab-size: 4;
flex: 1;
display: flex;
background-color: transparent;
}
[data-subtype="echarts"],
@ -561,12 +563,11 @@
user-select: none;
counter-reset: linenumber;
font-size: 85%;
background-color: var(--b3-theme-surface);
padding: 2em 4px 1.6em 4px;
box-sizing: border-box;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
width: 3.6em;
font-family: var(--b3-font-family-code);
margin-right: 1em;
min-width: 1.2em;
text-align: right;
& > span {
pointer-events: none;

13
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -446,27 +446,16 @@
}
}
&--select,
&--select .hljs {
background-color: var(--b3-theme-primary-lightest) !important;
}
// https://github.com/siyuan-note/siyuan/issues/11589
.hljs wbr {
display: none;
}
&--hl,
&--hl .hljs {
&--hl {
transition: var(--b3-background-transition);
background-color: var(--b3-theme-primary-lightest) !important;
}
&--hl .protyle-linenumber__rows,
&--select .protyle-linenumber__rows {
background-color: var(--b3-protyle-code-linenumber-hl) !important;
}
.dragover {
&__top:not(.av__row) {
box-shadow: 0 -4px 0 0 var(--b3-theme-primary-lighter) !important;

27
app/src/protyle/render/highlightRender.ts
View file

@ -86,23 +86,16 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
} else {
block.style.fontVariantLigatures = "none";
}
const languageElement = block.parentElement.querySelector(".protyle-action__language") as HTMLElement;
const codeText = block.textContent;
if (!isPreview && (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum))) {
// 需要先添加 class 以防止抖动 https://ld246.com/article/1648116585443
block.classList.add("protyle-linenumber");
block.innerHTML = '<div class="protyle-linenumber__rows"></div><div style="flex: 1"></div>'
lineNumberRender(block);
if (languageElement) {
languageElement.style.marginLeft = "3.6em";
}
} else if (block.nextElementSibling?.classList.contains("protyle-linenumber__rows")) {
block.classList.remove("protyle-linenumber");
block.nextElementSibling.remove();
if (languageElement) {
languageElement.style.marginLeft = "";
}
}
block.innerHTML = window.hljs.highlight(
block.textContent + (block.textContent.endsWith("\n") ? "" : "\n"), // https://github.com/siyuan-note/siyuan/issues/4609
(block.childElementCount === 2 ? block.lastElementChild : block).innerHTML = window.hljs.highlight(
codeText + (codeText.endsWith("\n") ? "" : "\n"), // https://github.com/siyuan-note/siyuan/issues/4609
{
language,
ignoreIllegals: true
@ -133,7 +126,7 @@ export const lineNumberRender = (block: HTMLElement) => {
block.insertAdjacentElement("afterend", lineNumberTemp);
let lineNumberHTML = "";
const lineList = block.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
const lineList = block.lastElementChild.textContent.split(/\r\n|\r|\n|\u2028|\u2029/g);
if (lineList[lineList.length - 1] === "" && lineList.length > 1) {
lineList.pop();
}
@ -141,7 +134,7 @@ export const lineNumberRender = (block: HTMLElement) => {
lineList.map((line) => {
let lineHeight = "";
if (isWrap) {
lineNumberTemp.textContent = line || "\n";
lineNumberTemp.textContent = line || "<br>";
// 不能使用 lineNumberTemp.getBoundingClientRect().height.toFixed(1) 否则
// windows 需等待字体下载完成再计算，否则导致不换行，高度计算错误
// https://github.com/siyuan-note/siyuan/issues/9029
@ -152,9 +145,5 @@ export const lineNumberRender = (block: HTMLElement) => {
});
lineNumberTemp.remove();
if (block.nextElementSibling?.classList.contains("protyle-linenumber__rows")) {
block.nextElementSibling.innerHTML = lineNumberHTML;
} else {
block.insertAdjacentHTML("afterend", `<span contenteditable="false" class="protyle-linenumber__rows">${lineNumberHTML}</span>`);
}
block.firstElementChild.innerHTML = lineNumberHTML;
};