問題的由來

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

先搞起來解決問題

以下操作案例都是在macOS中產出，其他平臺可能有些許差別，換湯不換藥。

在 typora中寫 markdown自動編號

• 開啟 typora【偏好設定】
• 找到【外觀】=>【主題】=>【開啟主題資料夾】
• 將如下程式碼加入到開啟目錄的 base.user.css 中
  ```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`中
```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通訊的一個比較好的方式