純CSS實現markdown自動編號

問題的由來

第一次關注這個標題編號的問題應該回溯到本科畢業論文的時候了，當時還單獨涉獵過這個主題，Word 有個很好的特性級聯標題，一次設置好以後，後續只要設置標題樣式就能按照設置的標題編號方式自動編號，咱們要作的只是將對應的標題設置成對應基本的標題樣式就行了，這個方法讓我愛不釋手，多年來一直沿用。徹底解決了中途插入一章，一節等等致使的章節編號都須要人肉調整的問題，固然還有圖片的編號命名什麼的，都是相似的。
直到後面開始用markdown 因爲各個編輯器的切換，一直沒有一個好用的替代方案，因此幾年前我寫了一個小工具用命令行來作這事rawbin-/markdown-clear，這個工具解決了在github寫博客的問題，同時在解決博客的問題的基礎上解決了在各個平臺發文的問題，由於編號是用腳本寫上去的，因此用markdown here在各個平臺發文也就瓜熟蒂落的轉成html就好了，也解決了這個階段的問題。
前兩天把拖欠幾個月的全面認知的總結寫了，忽然不想用這個腳原本編號了，產生一個想法：能不能不人肉編號，自動編上？而後就有了下面的內容。

先搞起來解決問題

如下操做案例都是在macOS中產出，其餘平臺可能有些許差異，換湯不換藥。

在typora中寫markdown自動編號

• 打開typora【偏好設置】
• 找到【外觀】=>【主題】=>【打開主題文件夾】
• 將以下代碼加入到打開目錄的base.user.css 中

#writer {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

#writer h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

#writer h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

#writer h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#writer h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#writer h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#writer h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

講道理

• 打開typora【偏好設置】
• 找到【通用】=>【高級 】=>【開啓調試模式】=>勾選
• 而後在非源碼模式下=>【右鍵】=>【檢查元素】，就能夠看到爲何是#write了
• 這個後面還有用

在github pages 寫markdown博客自動編號

我用的是jekyllbootstrap.com的模板，比較簡單

• 打開任意一篇rawbin-.github.io中的文章，而後【右鍵】=>【檢查】

• 能夠拿到兩個內容

  • 容器類爲 .content ，嚴格點爲#wrap .content
  • 樣式文件在assets/themes/bootstrap3，能夠修改其下的css/style.css
• 將以下內容改到源代碼的assets/themes/bootstrap3/css/style.css中

.content {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

.content h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

.content h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

.content h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

.content h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

.content h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

.content h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

在其餘網頁編輯中自動編碼

好比各個博客平臺，各個自媒體平臺等，像咱們經常使用的寫文檔的語雀均可以的。

這裏面涉及到一款瀏覽器插件markdown here，能夠在頁面富文本編輯器中將markdown 自動轉換爲網頁，這也是我前面說到的這幾年在各個平臺發文的套路，寫好編號好標題markdown往編輯器裏面一貼，而後一點 ，搞定。

簡單嘗試

• markdown here 有一個配置頁面，能夠配置和調整css，並能預覽效果
• 簡單看了下是用js把類轉成了style屬性，而且不支持僞類

修改源碼

• 到adam-p/markdown-here 看到，已經兩年沒動代碼了
• 無論三七二十三先 fork一把到rawbin-/markdown-here，而後把代碼拉下來
• 先把css文件建起來src/common/auto-number-title，找容器類能夠在markdown here的選項頁面找到.markdown-here-wrapper

.markdown-here-wrapper {
    counter-reset: h1
}

.markdown-here-wrapper h1 {
    counter-reset: h2
}

.markdown-here-wrapper h2 {
    counter-reset: h3
}

.markdown-here-wrapper h3 {
    counter-reset: h4
}

.markdown-here-wrapper h4 {
    counter-reset: h5
}

.markdown-here-wrapper h5 {
    counter-reset: h6
}

.markdown-here-wrapper h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

.markdown-here-wrapper h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

.markdown-here-wrapper h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

.markdown-here-wrapper h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

.markdown-here-wrapper h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

.markdown-here-wrapper h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

• 而後修改一下注入配置，容許加載這個樣式文件，並引入這個樣式問題
• 剩下的有錯改錯就行了

最終產出和應用

• 克隆rawbin-/markdown-here
• 打開Chrome 設置三個點=>【更多工具】=>【擴展程序】
• 打開【開發者模式】
• 選擇【加載已解壓的擴展程序】=>選擇克隆代碼下的src目錄便可安裝並加載插件
• 將插件固定在插件欄方便使用
• auto-number-title.scss內容以下

.markdown-here-wrapper {
    counter-reset: h1;
    h1 {
        counter-reset: h2;
        &:before {
            counter-increment: h1;
            content: counter(h1) ". ";
        }
    }
    h2 {
        counter-reset: h3;
        &:before {
            counter-increment: h2;
            content: counter(h1) "." counter(h2) ". "
        }
    }
    h3 {
        counter-reset: h4;
        &:before {
            counter-increment: h3;
            content: counter(h1) "." counter(h2) "." counter(h3) ". "
        }
    }
    h4 {
        counter-reset: h5;
        &:before {
            counter-increment: h4;
            content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
        }
    }
    h5 {
        counter-reset: h6;
        &:before {
            counter-increment: h5;
            content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
        }
    }
    h6:before{
        counter-increment: h6;
        content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
    }
}

再來簡單講一下道理

CSS 自動編號

• 不是一個新特性，或者說是一個老特性了，出如今CSS 2.1中，搜索site:w3.org css automatic numbering 能夠找到，固然截止今天后來的版本(CSS 3, CSS 2.2)都有這個特性，從caniuse上能夠看到，IE8及以上兼容，很棒吧

• 簡單說明

  • counter-reset 重置
  • counter-increment ++
  • counter() 取值
  • 配合before和after來作
  • 還有更多的玩法，參見 CSS The Defiiniitiive Guide 4th ，這裏有翻譯gdut-yy/CSS-The-Definitive-Guide-4th-zh

Chrome插件或擴展開發

• 這個 我也沒實際搞過，原來看了看書

• 可參考的資料

  • 官方文檔
  • sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略
  • 《Chrome擴展及應用開發》，這個就是我原來看的那本老書

仍是有些問題沒解決

• 上面的操做方式必需要h1到h6依次排開，否則會很好看
• 若是標題自己就編號了的，就有點糟糕了
• 這倆問題在我github的博客裏面都能看到，解決辦法能夠是運行下``

順便探索下CSS其餘可變的內容

CSS變量或者說自定義屬性

• 這個IE不兼容，其餘瀏覽器高版本兼容

:root{
    --var-test:xxx
}
.body{
    --var-test:ooo;
    prop-test:var(--var-test)
}

attr()

• 這個caniuse也有些說不清楚，主體兼容也是從IE8開始的，須要本身總結
• 強大的地方是能夠讀取屬性值，賦給另外的屬性，也就是能夠來個屬性聯動

看起來純CSS的解決方案就到此告一段落了

• 若是能有腳本參與，就自由了
• attr() 配合僞類來作展現，是一個JS和CSS通訊的一個比較好的方式