Skip to content

Update the dom of code blocks #10769

New issue
New issue
Closed
Closed
Update the dom of code blocks#10769
Assignees
88250Vanessa219
Labels
Development
Milestone
 
3.1.4
@TCOTC

Description

@TCOTC
TCOTC
opened on Mar 27, 2024 · edited by TCOTC
Contributor

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

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

Activity

Vanessa219

Vanessa219 commented on Mar 28, 2024

@Vanessa219
Vanessa219
on Mar 28, 2024
Member

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

Vanessa219
closed this as completedon Mar 28, 2024
TCOTC

TCOTC commented on Mar 28, 2024

@TCOTC
TCOTC
on Mar 28, 2024 · edited by TCOTC
ContributorAuthor

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

差不多是这么个意思：

image

image

Vanessa219

Vanessa219 commented on Mar 31, 2024

@Vanessa219
Vanessa219
on Mar 31, 2024
Member

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

TCOTC

TCOTC commented on Mar 31, 2024

@TCOTC
TCOTC
on Mar 31, 2024
ContributorAuthor

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

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

TCOTC
mentioned this on Apr 16, 2024
TCOTC
mentioned this on May 5, 2024
Achuan-2

Achuan-2 commented on May 6, 2024

@Achuan-2
Achuan-2
on May 6, 2024 · edited by Achuan-2
Member

把别名那些的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

TCOTC commented on May 6, 2024

@TCOTC
TCOTC
on May 6, 2024 · edited by TCOTC
ContributorAuthor

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

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

image

Achuan-2

Achuan-2 commented on May 6, 2024

@Achuan-2
Achuan-2
on May 6, 2024
Member

试试这个

.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

Achuan-2 commented on May 6, 2024

@Achuan-2
Achuan-2
on May 6, 2024 · edited by Achuan-2
Member

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

.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

TCOTC commented on May 10, 2024

@TCOTC
TCOTC
on May 10, 2024 · edited by TCOTC
ContributorAuthor

@Vanessa219

image

https://ld246.com/article/1715314437969/comment/1715328787597?r=JeffreyChen#comments

Vanessa219

Vanessa219 commented on May 13, 2024

@Vanessa219
Vanessa219
on May 13, 2024 · edited by Vanessa219
Member

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

Achuan-2

Achuan-2 commented on May 13, 2024

@Achuan-2
Achuan-2
on May 13, 2024 · edited by Achuan-2
Member

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

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

Vanessa219

Vanessa219 commented on May 14, 2024

@Vanessa219
Vanessa219
on May 14, 2024
Member

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

52 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Development

Type

No type

Projects

No projects

Milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @88250@Vanessa219@Achuan-2@TCOTC@Misuzu2027

      Issue actions
        Update the dom of code blocks · Issue #10769 · siyuan-note/siyuan