給為知筆記的markdown樣式設置標題自動添加編號


給為知筆記的markdown樣式設置標題自動編號

注意:本文可能會過期失效。

由於為知筆記的markdown樣式原本沒有為標題自動設置編號,因此我到網上找到了相關的設置方法。

找到markdown筆記樣式的設置文件

也就是一個css文件,可以去為知筆記官網常見問題處(我的是Windows版,當時的地址是:https://www.wiz.cn/zh-cn/change_markdown_style.html)找到該文件的位置。

image-官網截圖

修改樣式

按照指示,先備份github2.css文件。然后打開該文件,在文末添加以下css代碼。

/* 首先在父元素中(在這里是類markdown-body的元素),初始化你想要編號的最大標題的計數。我喜歡從h2開始編號,所以我就寫h2,你也可以寫h1。 */
.markdown-body {
    counter-reset: h2;
}
/* 然后父標題初始化子標題的計數,下面以此類推。 */
h2 {
    counter-reset: h3;
}
h3 {
    counter-reset: h4;
}
h4 {
    counter-reset: h5;
}
h5 {
    counter-reset: h6;
}
/* 接着在每個標題前面自動加上編號 */
h2:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}
h3:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}
h4:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
h5:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
h6:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

上述css代碼的詳細解釋可以參考下面的參考資料。效果如下圖:

image-效果圖

注意事項

值得注意是,countercounter-incrementcounter-reset的使用方法。counter-reset一定要在父元素中使用,然后在子元素中使用countercounter-increment。否則可能會遇到“counter不起作用“的問題。

參考資料

  1. Typora設置標題自動添加序號—簡書
  2. counter-reset—MDN web docs
  3. CSS counter-reset 屬性—W3school
  4. CSS偽元素(content與counter)—segmentfault


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM