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

Support setting height for some blocks #11055

Open
TCOTC opened this issue Apr 16, 2024 · 16 comments
Open

Support setting height for some blocks #11055

TCOTC opened this issue Apr 16, 2024 · 16 comments
Assignees
Milestone

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Apr 16, 2024

代码块、嵌入块等块支持固定高度

In what scenarios do you need this feature?

一个想法:思源关于比较长的块,是否可以默认折叠,只显示前几行? - 链滴

有时候代码太长,不折叠的话要翻半天,折叠的话内容就都看不到了,希望有个功能像「固定表头」那样让块的高度显示为页面的一半。

还有嵌入块也是。

目前单纯用 CSS 做不了 更新:代码块的已经有办法用 CSS 实现了 #10769

Describe the optimal solution

比如固定表头可以让表格的高度显示为页面的一半

.protyle-wysiwyg [data-node-id].table[custom-pinthead=true] table {
    max-height: 50vh;
}

比如图表可以设置高度:

image

@TCOTC TCOTC changed the title 代码块、嵌入块增加一个功能 代码块、嵌入块支持固定高度 Apr 26, 2024
@TCOTC TCOTC changed the title 代码块、嵌入块支持固定高度 ✨代码块、嵌入块支持固定高度 Aug 10, 2024
@88250 88250 changed the title ✨代码块、嵌入块支持固定高度 代码块、嵌入块支持固定高度 Aug 11, 2024
@Vanessa219 Vanessa219 changed the title 代码块、嵌入块支持固定高度 代码块、嵌入块等块支持固定高度 Sep 11, 2024
@Vanessa219 Vanessa219 self-assigned this Sep 11, 2024
@Vanessa219 Vanessa219 added this to the 3.1.7 milestone Sep 11, 2024
@88250 88250 changed the title 代码块、嵌入块等块支持固定高度 Support setting height for some blocks Sep 11, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 11, 2024

@88250 Enhancement 和 Feature 是咋区分的?

@88250
Copy link
Member

88250 commented Sep 11, 2024

完全没有的较大改进算作特性。

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 6, 2024

参考 Wolai 的代码块:

video.webm

用户需求:

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

请问这个具体是如何实现的呢?或者我需要如何修改,才可以达到你这个效果呢

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 22, 2024

如果你问的是前一个录屏,那个是 Wolai 的代码块,不是思源的

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

如果你问的是前一个录屏,那个是 Wolai 的代码块,不是思源的

那请问目前针对于代码框固定高度(或者可以通过拖动,控制代码框的高度,这个有何方法呢)

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 22, 2024

比如用这个代码片段:

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

但目前还存在问题:#12726

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

比如用这个代码片段:

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

但目前还存在问题:#12726

请问是直接在我所使用的主题文件夹下的 theme.css 添加上面这个代码片段吗?

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 22, 2024

设置 - 编辑器 - 代码片段,添加、启用

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

设置 - 编辑器 - 代码片段,添加、启用

我的版本好像没有 代码片段,如下:
微信图片_20241123000852

我的版本为:v3.1.11

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 22, 2024

哦哦,说错了 设置 - 外观 - 代码片段

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

哦哦,说错了 设置 - 外观 - 代码片段

好的,可以了,不过我没有“启动”按钮,我是通过“直接在我所使用的主题文件夹下的 theme.css 添加上面这个代码片段”生效的

另外也可以按照你的说法,重启软件就可以额

@TCOTC
Copy link
Contributor Author

TCOTC commented Nov 22, 2024

这个是启用代码片段的流程:

image

@LEDZB
Copy link

LEDZB commented Nov 22, 2024

好的,感谢

@x93008
Copy link

x93008 commented Jan 21, 2025

上面的方法只能全局设置,能做成像图片以下可以自定义代码块的大小吗?

@TCOTC
Copy link
Contributor Author

TCOTC commented Feb 15, 2025

用户反馈:表格固定高度 https://ld246.com/article/1709887792491

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