-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update the dom of code blocks #10769
Comments
行号和代码块是分离的,好像不行。估计要弄点 js 之类的吧。 |
@Vanessa219 要不当开启代码块行号的时候就把整条行号和整个代码的元素套在一个 差不多是这么个意思: |
这个用的是 highlight.js,好像没有办法去支持。 |
我看到 highlight.js 原生不支持行号: https://github.com/highlightjs/highlight.js/blob/main/docs/line-numbers.rst |
试试这个 .protyle-wysiwyg .code-block{
max-height: 800px;
overflow: auto;
padding-top: 10px;
}
.protyle-wysiwyg .hljs,
.protyle-linenumber__rows{
height:max-content;
}
.protyle-wysiwyg .code-block .protyle-attr {
top: -2px;
} |
忽略了复制按钮的悬浮文字提示,再改改 .protyle-wysiwyg .hljs,
.protyle-linenumber__rows{
height:max-content;
margin-top: 10px;
}
.protyle-wysiwyg .code-block .protyle-attr {
top: -2px;
}
.protyle-wysiwyg .code-block .protyle-action .b3-tooltips__nw {
top: 25px;
}
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language{
margin-top: 10px
} |
改了结构就没有办法渲染代码高亮了。 |
应该说的不是这样改。。。 |
@Vanessa219 「把行号和代码用一个父节点包裹在一起」就是这个意思 |
改了看看吧,我觉得这样可能会有问题。 |
@Vanessa219 这个改了吗? |
这个 hljs 不支持,没法改。要一个行号和一行代码在一个div 里面才可以实现吧。 |
不用每一行,整个行号的元素和整个代码的元素包在一起就行了 |
那怎么滚动呢? |
这样文档就不能滚动了吗? |
在开发者工具输入下面代码,可以实现代码块限制高度后,代码块和行号能同时滚动了(不过因为改了dom,代码块修改内容会有问题,仅作演示用) document.querySelectorAll('.code-block>div.hljs').forEach((hljsDiv) => {
hljsDiv.style = "overflow: visible;";
hljsDiv.style.backgroundColor = 'transparent';
// 创建一个新的父容器,用于包裹 hljs.protyle-linenumber 和 protyle-linenumber__rows
const scrollContainer = document.createElement('div');
scrollContainer.style = 'display: flex; overflow: auto; max-height: 800px;';
scrollContainer.style.justifyContent = 'flex-start'; // 子元素居左排列
scrollContainer.style.alignItems = 'flex-start'; // 垂直方向上居左(顶部)
// 查找 span.protyle-linenumber__rows 兄弟节点
const siblingSpan = hljsDiv.nextElementSibling;
if (siblingSpan && siblingSpan.classList.contains('protyle-linenumber__rows')) {
// 将 span.protyle-linenumber__rows 移动到 scrollContainer 中
siblingSpan.style.backgroundColor = 'transparent';
scrollContainer.appendChild(siblingSpan.cloneNode(true));
// 移除旧的 span.protyle-linenumber__rows
siblingSpan.remove();
}
scrollContainer.appendChild(hljsDiv.cloneNode(true));
// 将 scrollContainer 插入到原始的父容器中
hljsDiv.parentNode.style = "flex-direction: row;"
hljsDiv.parentNode.insertBefore(scrollContainer, hljsDiv);
// 移除旧的 hljsDiv
hljsDiv.remove();
}); 备注:默认主题的代码块内容和代码行号有设置背景色,但是父节点设置overflow:auto之后,设置的背景色只有设置的max-height高度,后面的滚动内容没有背景色,不过对于我的Tsundoku主题,本身就将其代码块内容和行号设置为透明色,用code-block来设置代码块的颜色,所以没有影响。 |
哦,我大概明白了。 |
想问问能否适配粘贴后的滚动高度呢? |
指的是粘贴后需要滚动到光标位置么? |
@Vanessa219 v3.1.4-dev4 版本,代码块显示行号后,在代码块的菜单栏设置为不显示行号,切换后没有动态隐藏行号。 |
发现用了自定义css片段折叠代码块后存在一些问题 div:not(#preview) > .protyle-wysiwyg .code-block .hljs {
max-height: 300px;
} 问题
希望: 备注:已经在新工作空间测试 |
记录到 #12726 |
把全部行号和全部代码用一个父节点包裹
In what scenarios do you need this feature?
01
用这个CSS片段之后,书签之类的就在滚动容器中被遮盖了:
02
用这个CSS片段之后,书签之类的能显示了,但代码块行号又不能跟随着滚动了:
有什么办法让代码块在限制最大高度的同时,行号和书签之类的都能正常显示呢?
Other information
https://ld246.com/article/1699238495421
The text was updated successfully, but these errors were encountered: