Post by tag
按标签聚合
包含 # 代码块 的文章列表
Obsidian 样式 - 圆角代码块
参考PinkTopaz主题的圆角代码块样式
2024-06-14Obsidian样式-圆角代码块 css / !代码块显示长度 / / https://forum-zh.obsidian.md/t/topic/27088 / pre code { display: block; max-height: 500px; overflow-x: hidden; / 添加自动换行 / white-space: pre-wrap; } / 隐藏滚动条只在代码块内生效 / pre code::-webkit-scrollbar { display:inherit !imp
熊猫别熬夜
Pkmer
Copy button for code blocks 给代码块添加一键复制按钮
Copy button for code blocks 给代码块添加一键复制按钮
在阅读模式中，为代码块右上角添加一个复制按钮，点击后自动复制代码块内容到剪贴板。 Copy button for code blocks 自定义插件仅适用于 Obsidian v0.9.7+。 此存储库的当前 API 针对 Obsidian v0.9.7+。
OS
Pkmer
Obsidian 插件:Better CodeBlock 代码块显示增强
在阅读视图中为代码块添加标题、行号和折叠按钮
Obsidian 的代码块一般无法显示具体行号，虽然通过 css 手段可以 Obsidian样式-编辑模式代码块显示行号编辑模式下显示代码块行号，阅读模式下就需要借助插件实现了。better codeblock 插件就可以在阅读视图中为代码块添加标题、行号和折叠按钮，增强了代码块的显示效果。 该插件的大部分代码和灵感来自以下两个插件（感谢他们的贡献），图标来自 Admonition。 我将两个插件的代码合并并修改了其中一些功能。 image.png 这里注意的是，排除的语言列表中建议写上 dataview,dat
cuman
Pkmer
Obsidian 样式：编辑模式代码块显示行号
代码块在编辑模式显示行号
Obsidian 作为 md 文档编辑器，写代码块本来就不是强项，无法跟专业的代码编辑相比，比如代码块无法显示行号。本文通过 css 的方法实现在编辑模式下显示代码行号 ，但因为受限于 Obsidian 的渲染机制，如果代码长度超过一屏幕，代码行号会被重置，也算一个瑕疵。 image.png 具体代码片段如何使用参考 Obsidian的CSS代码片段Obsidian css代码片段 css .HyperMD-codeblock-begin { counter-reset: line-numbers; } .HyperMD-
cuman
Pkmer
Code Tab 不止于混合代码块
Code Tab 混合代码块，创造一个类似 leetcode 样式的混合代码块，且不仅限于代码块。
为代码块加上标签页，生成 leetcode 样式的混合代码块，且不仅限于代码块，可以自己设计内容比如 tasks，dataview 等。 tab: 标题1 从这里到下一个tab就是内容啦 tab: 标题2 内容二 image-20230707191358527.png 当每一个内容为代码块时，渲染的效果就是类似 leetcode 的那种混合代码块的效果啦
Huajin
Pkmer