Obsidian自定義程式碼塊樣式成Typora

Yantul發表於2024-04-10

先來效果圖

修改前效果:
image

修改後效果:
編輯模式:
image
預覽模式:
image

兩種模式的表現間距略有不同, 但不影響.

新增自定義css樣式

.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock {
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: #E7EAED;
}
.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock-begin {
    margin-bottom: 5px !important;
    height: 26px;
    top: 5px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #E7EAED;
}

.markdown-source-view.mod-cm6 .cm-content > .HyperMD-codeblock-end {
    margin-top: 5px !important;
    height: 26px;
    bottom: 5px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #E7EAED;
}

body {
    --code-size: 15px;
}

把上述程式碼片段放到.obsidian\snippets\page-style.css, 然後在obsidian軟體中啟用page-style.css

啟用css

image

其它

根據檢索的資訊和嘗試, 發現直接設定margin-*會導致輸入時部分行無法聚焦, 雖然使用padding可以修改間距但是如果兩個程式碼段連在一塊就會導致兩者的邊界模糊, 影響觀感, 與此相反的是typora的程式碼塊看著就很舒服, 因此使用了一定的技巧最終實現了效果並且不影響輸入.

  1. 加了程式碼塊邊框顏色
  2. 加了程式碼塊間距

總體的思路就是既然所有的元素都是相對定位, 那就增加HyperMD-codeblock-begin和HyperMD-codeblock-end的高度, 然後對開始的div HyperMD-codeblock-begin 新增margin-bottom, 對HyperMD-codeblock-end新增margin-top, 測試沒問題.

參考

軟體Obsidian中如何修改段間距？
Obsidian中自定義編輯模式的段間距

相關文章