上次为WP-B2主题增加代码块的复制按钮后,发现如果是几百行的代码块会导致文章非常的长,所以就有了这次的优化
优化前后的对比


将以下代码放入到主题的style.css文件中,建议使用子主题
要增加代码块的高度并添加滚动条,可以通过修改现有的CSS样式来实现。以下是具体的步骤和代码示例:
修改CSS样式
- 增加代码块的高度:
- 可以通过设置
.code-toolbar pre的max-height属性来限制代码块的最大高度。 - 使用
overflow-y属性来添加垂直滚动条。
- 可以通过设置
- 调整工具栏按钮的边框半径:
- 修正
.toolbar-item button中border-radius属性的值。
- 修正
以下是修改后的CSS代码:
直接替换即可