Skip to content
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

Closed
TCOTC opened this issue Mar 27, 2024 · 29 comments
Closed

Update the dom of code blocks #10769

TCOTC opened this issue Mar 27, 2024 · 29 comments
Assignees
Milestone

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Mar 27, 2024

把全部行号和全部代码用一个父节点包裹

In what scenarios do you need this feature?

01

.protyle-wysiwyg div.code-block[data-node-id] {
    overflow-y: auto;
    max-height: 20vh;
}

.protyle-linenumber, .protyle-linenumber__rows{
    height:100%;
}

用这个CSS片段之后,书签之类的就在滚动容器中被遮盖了:

image

02

.protyle-wysiwyg div.code-block[data-node-id] .hljs {
    overflow-y: auto;
    max-height: 20vh;
}
.protyle-linenumber, .protyle-linenumber__rows{
    height:100%;
}

用这个CSS片段之后,书签之类的能显示了,但代码块行号又不能跟随着滚动了:

image

有什么办法让代码块在限制最大高度的同时,行号和书签之类的都能正常显示呢?

Other information

https://ld246.com/article/1699238495421

@Vanessa219
Copy link
Member

行号和代码块是分离的,好像不行。估计要弄点 js 之类的吧。

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 28, 2024

@Vanessa219 要不当开启代码块行号的时候就把整条行号和整个代码的元素套在一个 <div> 标签里?现在的问题我个人解决不了

差不多是这么个意思:

image

image

@Vanessa219
Copy link
Member

这个用的是 highlight.js,好像没有办法去支持。

@TCOTC
Copy link
Contributor Author

TCOTC commented Mar 31, 2024

我看到 highlight.js 原生不支持行号:

https://github.com/highlightjs/highlight.js/blob/main/docs/line-numbers.rst

@Achuan-2
Copy link
Member

Achuan-2 commented May 6, 2024

把别名那些的top值调低,code block的padding-top调大就可以了吧

.protyle-wysiwyg .code-block{
    max-height: 800px;
    overflow: auto;
    padding-top: 10px;
}
.protyle-linenumber, .protyle-linenumber__rows{
    height:100%;
}
.protyle-wysiwyg .code-block .protyle-attr {
    top: -2px;
}

Clip_2024-05-06_19-10-58

好吧,一刷新之后就有问题,被撑的老大
Clip_2024-05-06_19-29-53

@TCOTC
Copy link
Contributor Author

TCOTC commented May 6, 2024

有道理,不过这个代码片段用了之后同时开启代码块行号和代码块换行就会有问题

好吧,一刷新之后就有问题,被撑的老大

image

@Achuan-2
Copy link
Member

Achuan-2 commented May 6, 2024

试试这个

.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;
}

@Achuan-2
Copy link
Member

Achuan-2 commented May 6, 2024

忽略了复制按钮的悬浮文字提示,再改改

.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
}

@TCOTC
Copy link
Contributor Author

TCOTC commented May 10, 2024

@Vanessa219
Copy link
Member

Vanessa219 commented May 13, 2024

改了结构就没有办法渲染代码高亮了。

@Achuan-2
Copy link
Member

Achuan-2 commented May 13, 2024

改了结构就没有办法渲染代码高亮了。

用开发者工具改了下好像也没啥影响呀
Clip_2024-05-13_11-48-42

@Vanessa219
Copy link
Member

应该说的不是这样改。。。

@TCOTC
Copy link
Contributor Author

TCOTC commented May 20, 2024

@Vanessa219 「把行号和代码用一个父节点包裹在一起」就是这个意思

@Vanessa219
Copy link
Member

改了看看吧,我觉得这样可能会有问题。

@TCOTC
Copy link
Contributor Author

TCOTC commented Aug 7, 2024

@Vanessa219 这个改了吗?

@Vanessa219
Copy link
Member

这个 hljs 不支持,没法改。要一个行号和一行代码在一个div 里面才可以实现吧。

@TCOTC
Copy link
Contributor Author

TCOTC commented Aug 8, 2024

不用每一行,整个行号的元素和整个代码的元素包在一起就行了

@Vanessa219
Copy link
Member

那怎么滚动呢?

@TCOTC
Copy link
Contributor Author

TCOTC commented Aug 9, 2024

这样文档就不能滚动了吗?

@Achuan-2
Copy link
Member

Achuan-2 commented Aug 9, 2024

代码块限制高度这一点可以参考语雀
Clip_2024-08-09_18-56-18

在开发者工具输入下面代码,可以实现代码块限制高度后,代码块和行号能同时滚动了(不过因为改了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
Copy link
Member

哦,我大概明白了。

@Vanessa219 Vanessa219 reopened this Aug 10, 2024
@TCOTC TCOTC changed the title 一个CSS片段的问题 把全部行号和全部代码用一个父节点包裹 Aug 10, 2024
@TCOTC TCOTC changed the title 把全部行号和全部代码用一个父节点包裹 ✨把全部行号和全部代码用一个父节点包裹 Aug 10, 2024
@88250 88250 changed the title ✨把全部行号和全部代码用一个父节点包裹 把全部行号和全部代码用一个父节点包裹 Aug 11, 2024
Vanessa219 added a commit that referenced this issue Aug 15, 2024
Vanessa219 added a commit that referenced this issue Aug 15, 2024
Vanessa219 added a commit that referenced this issue Aug 15, 2024
Vanessa219 added a commit that referenced this issue Aug 15, 2024
88250 added a commit to 88250/lute that referenced this issue Aug 15, 2024
@88250 88250 changed the title Code blocks support setting height Update the dom of code blocks Aug 15, 2024
88250 added a commit to 88250/lute that referenced this issue Aug 15, 2024
88250 added a commit to 88250/lute that referenced this issue Aug 15, 2024
88250 added a commit that referenced this issue Aug 15, 2024
@Achuan-2
Copy link
Member

Achuan-2 commented Aug 16, 2024

想问问能否适配粘贴后的滚动高度呢?
之前的DOM结构,如果我自己在代码片段里设置代码块max-height,粘贴代码后,滚动高度依然会是原代码块高度而不是设置的max-height,所以还需要上滚很多才能回到代码块的实际位置

@Vanessa219
Copy link
Member

指的是粘贴后需要滚动到光标位置么?

@Achuan-2
Copy link
Member

Achuan-2 commented Aug 16, 2024

指的是粘贴后需要滚动到光标位置么?

是的,这是现在的DOM结构限制代码块高度,在代码块粘贴的问题(注意:要复现代码块后面要有很多块)
GIF:
思源笔记代码块限制高度

@TCOTC
Copy link
Contributor Author

TCOTC commented Aug 17, 2024

感觉不错

.protyle-wysiwyg .code-block > .hljs {
    max-height: 400px;
}

使用代码片段后的效果:

image

@Misuzu2027
Copy link
Contributor

@Vanessa219 v3.1.4-dev4 版本,代码块显示行号后,在代码块的菜单栏设置为不显示行号,切换后没有动态隐藏行号。

@TCOTC
Copy link
Contributor Author

TCOTC commented Aug 20, 2024

@Misuzu2027 #12268

@Achuan-2
Copy link
Member

Achuan-2 commented Oct 7, 2024

发现用了自定义css片段折叠代码块后存在一些问题

div:not(#preview) > .protyle-wysiwyg .code-block .hljs {
    max-height: 300px;
}

问题

  1. 在不开启行号的情况下,经过一定行后(大概就是设置的代码最大高度),直接在末尾按enter,不会创建新行,只有先打几个字,在中间按enter才能创建新行
  2. 在开启行号的情况下,按enter一直能创建新行,但可视区域不会自动移到下一行,需要手动滚动

希望
不开启行号的情况下,直接在末尾按enter,能创建新行,并且可视区域能自动移动到新创建的代码块行

备注:已经在新工作空间测试

@TCOTC
Copy link
Contributor Author

TCOTC commented Oct 7, 2024

记录到 #12726

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants