純CSS怎么實現(xiàn)markdown自動編號
本文將為大家詳細介紹“純CSS怎么實現(xiàn)markdown自動編號”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“純CSS怎么實現(xiàn)markdown自動編號”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。
創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的天涯網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
css是什么意思
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結構決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。
問題的由來
第一次關注這個標題編號的問題應該回溯到本科畢業(yè)論文的時候了，當時還單獨涉獵過這個主題，Word 有個很好的特性級聯(lián)標題，一次設置好之后，后續(xù)只要設置標題樣式就能按照設置的標題編號方式自動編號，我們要做的只是將對應的標題設置成對應基本的標題樣式就好了，這個方法讓我愛不釋手，多年來一直沿用。完全解決了中途插入一章，一節(jié)等等導致的章節(jié)編號都需要人肉調整的問題，當然還有圖片的編號命名什么的，都是類似的。
直到后面開始用markdown 由于各個編輯器的切換，一直沒有一個好用的替代方案，所以幾年前我寫了一個小工具用命令行來做這事rawbin-/markdown-clear，這個工具解決了在github寫博客的問題，同時在解決博客的問題的基礎上解決了在各個平臺發(fā)文的問題，因為編號是用腳本寫上去的，所以用markdown here在各個平臺發(fā)文也就順理成章的轉成html就行了，也解決了這個階段的問題。
前兩天把拖欠幾個月的全面認知的總結寫了，突然不想用這個腳本來編號了，產(chǎn)生一個想法：能不能不人肉編號，自動編上？然后就有了下面的內(nèi)容。
先搞起來解決問題
以下操作案例都是在macOS中產(chǎn)出，其他平臺可能有些許差別，換湯不換藥。
在typora中寫markdown自動編號
打開typora【偏好設置】
找到【外觀】=>【主題】=>【打開主題文件夾】
將如下代碼加入到打開目錄的base.user.css 中
#writer {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
h6 {
counter-reset: h7
}
#writer h2:before {
counter-increment: h2;
content: counter(h2) ". "
}
#writer h3:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
#writer h4:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
#writer h5:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
#writer h6:before {
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
#writer h7:before{
counter-increment: h7;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "
}講道理
打開typora【偏好設置】
找到【通用】=>【高級 】=>【開啟調試模式】=>勾選
然后在非源碼模式下=>【右鍵】=>【檢查元素】，就可以看到為什么是#write了
這個后面還有用
在github pages 寫markdown博客自動編號
我用的是jekyllbootstrap.com的模板，比較簡單
打開任意一篇rawbin-.github.io中的文章，然后【右鍵】=>【檢查】
可以拿到兩個內(nèi)容
容器類為 .content ，嚴格點為#wrap .content
樣式文件在assets/themes/bootstrap3，可以修改其下的css/style.css
將如下內(nèi)容改到源代碼的assets/themes/bootstrap3/css/style.css中
.content {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
h6 {
counter-reset: h7
}
.content h2:before {
counter-increment: h2;
content: counter(h2) ". "
}
.content h3:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
.content h4:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
.content h5:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.content h6:before {
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
.content h7:before{
counter-increment: h7;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "
}在其他網(wǎng)頁編輯中自動編碼
比如各個博客平臺，各個自媒體平臺等，像我們常用的寫文檔的語雀都可以的。
這里面涉及到一款瀏覽器插件markdown here，可以在頁面富文本編輯器中將markdown 自動轉換為網(wǎng)頁，這也是我前面說到的這幾年在各個平臺發(fā)文的套路，寫好編號好標題markdown往編輯器里面一貼，然后一點 ，搞定。
簡單嘗試
markdown here 有一個配置頁面，可以配置和調整css，并能預覽效果
簡單看了下是用js把類轉成了style屬性，并且不支持偽類
修改源碼
到adam-p/markdown-here 看到，已經(jīng)兩年沒動代碼了
不管三七二十三先 fork一把到rawbin-/markdown-here，然后把代碼拉下來
先把css文件建起來src/common/auto-number-title，找容器類可以在markdown here的選項頁面找到.markdown-here-wrapper
.markdown-here-wrapper {
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 h6 {
counter-reset: h7
}
.markdown-here-wrapper h2:before {
counter-increment: h2;
content: counter(h2) ". "
}
.markdown-here-wrapper h3:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
.markdown-here-wrapper h4:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
.markdown-here-wrapper h5:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.markdown-here-wrapper h6:before {
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
.markdown-here-wrapper h7:before{
counter-increment: h7;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "
}然后修改一下注入配置，允許加載這個樣式文件，并引入這個樣式問題
剩下的有錯改錯就好了
最終產(chǎn)出和應用
克隆rawbin-/markdown-here
打開Chrome 設置三個點=>【更多工具】=>【擴展程序】
打開【開發(fā)者模式】
選擇【加載已解壓的擴展程序】=>選擇克隆代碼下的src目錄即可安裝并加載插件
將插件固定在插件欄方便使用
auto-number-title.scss內(nèi)容如下
.markdown-here-wrapper {
counter-reset: h2;
h2 {
counter-reset: h3;
&:before {
counter-increment: h2;
content: counter(h2) ". ";
}
}
h3 {
counter-reset: h4;
&:before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". "
}
}
h4 {
counter-reset: h5;
&:before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "
}
}
h5 {
counter-reset: h6;
&:before {
counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
}
h6 {
counter-reset: h7;
&:before {
counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
}
h7:before{
counter-increment: h7;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "
}
}再來簡單講一下道理
CSS 自動編號
不是一個新特性，或者說是一個老特性了，出現(xiàn)在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插件或擴展開發(fā)
這個 我也沒實際搞過，原來看了看書
可參考的資料
官方文檔
sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略
《Chrome擴展及應用開發(fā)》，這個就是我原來看的那本老書
還是有些問題沒解決
上面的操作方式必須要h2到h7依次排開，不然會很好看
如果標題本身就編號了的，就有點糟糕了
這倆問題在我github的博客里面都能看到，解決辦法可以是運行下``
順便探索下CSS其他可變的內(nèi)容
CSS變量或者說自定義屬性
這個IE不兼容，其他瀏覽器高版本兼容
:root{
--var-test:xxx
}
.body{
--var-test:ooo;
prop-test:var(--var-test)
}attr()
這個caniuse也有些說不清楚，主體兼容也是從IE8開始的，需要自己總結
強大的地方是可以讀取屬性值，賦給另外的屬性，也就是可以來個屬性聯(lián)動
看起來純CSS的解決方案就到此告一段落了
如果能有腳本參與，就自由了
attr() 配合偽類來做展示，是一個JS和CSS通信的一個比較好的方式
如果你能讀到這里，小編希望你對“純CSS怎么實現(xiàn)markdown自動編號”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享標題：純CSS怎么實現(xiàn)markdown自動編號
轉載源于：http://m.jiaotiyi.com/article/jojjdi.html