【已解决】代码块添加左右滑动栏

疑问解答
21

多谢多谢多谢，是我想要的，哈哈，多谢多谢

22

怎么用阿兄弟，得先下载主题吗，我直接放到snippets下不管用呢，非常感谢！

23

怎么用呢兄弟，我放到snippets下不管用，得先下载主题吗？

24

你在obsidian设置里开启CCS代码片段了吗，在 设置 —外观—CSS代码片段 可以开启

26

开启了在设置外观最下面css代码片段，加一个snippet.css文件之后会有一个snippet的开关。我把上面code[class*="language-"], pre[class*="language-"] { word-break: normal; word-wrap: break-word; white-space: pre; }这段代码加进文件里，重新输入代码块和原来一样没有变化呀？

27

大佬我查了一下 display: inline-block; 在前端的代码里有滑块的意思可不可以这样写 code[class*=“language-”],
pre[class*=“language-”]
{
word-break: normal;
word-wrap: break-word;
white-space: pre;
overflow-x: auto;
display: inline-block;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}

28

可以的，但是你这样是为了啥？出现滚动条是靠overflow实现的

29

源码无法预览是编辑状态无 pre 和 code 标签，暂时只能预览模式使用了。

1 个赞
30

从 Obsidian 英文论坛找到的CSS代码：

/*un-wrap codeblock*/
.HyperMD-codeblock {
  white-space: nowrap;
}

/*scroll codeblock in read mode*/
.markdown-reading-view code[class*="language-"] {
  overflow-x: scroll;
  white-space: pre;
  padding: 15px 0px;
}

编辑、阅读模式均可实现不换行+滑动条。编辑模式是滑动Obsidian界面最下方的横向滑动条。

image
image702×315 36.4 KB

1 个赞
31

试过了，但是在编辑模式下还是不好使呀

32

不好使是不起作用还是觉得滑下方滑动条不方便。

33

Snipaste_2023-11-25_12-21-22
Snipaste_2023-11-25_12-21-221667×649 82.2 KB

阅读视图下能起作用，但是编辑模式下就不行了

34

没想到你这么快就能回复呀！！！

35

你的视窗足够显示你的代码，所以就没有滑动条了。你把视窗调小，它没法完全显示，需要通过滑动条才能顺利阅读，就有了，属于是按需显现。

38

还是算了吧，就这样，阅读模式下能有已经很好了，谢谢啦

39

好歹自己把视窗调小一下试试呢？视窗宽度不是编辑区宽度。

20231125_123545

我平时用的 CSS 多，要测试代码总得等我把我的 Ob 调好状态才能给你演示吧。

40

对其实我也跟你一样的效果，但是这个代码明显要比中间的暗色区域长呀 :open_mouth:，

41

您好，插件code styler解君愁