您好,登錄后才能下訂單哦!
本文將為大家詳細(xì)介紹“純CSS怎么實(shí)現(xiàn)markdown自動(dòng)編號(hào)”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會(huì)更新不同的知識(shí)點(diǎn),希望這篇“純CSS怎么實(shí)現(xiàn)markdown自動(dòng)編號(hào)”能夠給你意想不到的收獲,請(qǐng)大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識(shí)吧。
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
問(wèn)題的由來(lái)
第一次關(guān)注這個(gè)標(biāo)題編號(hào)的問(wèn)題應(yīng)該回溯到本科畢業(yè)論文的時(shí)候了,當(dāng)時(shí)還單獨(dú)涉獵過(guò)這個(gè)主題,Word 有個(gè)很好的特性級(jí)聯(lián)標(biāo)題,一次設(shè)置好之后,后續(xù)只要設(shè)置標(biāo)題樣式就能按照設(shè)置的標(biāo)題編號(hào)方式自動(dòng)編號(hào),我們要做的只是將對(duì)應(yīng)的標(biāo)題設(shè)置成對(duì)應(yīng)基本的標(biāo)題樣式就好了,這個(gè)方法讓我愛(ài)不釋手,多年來(lái)一直沿用。完全解決了中途插入一章,一節(jié)等等導(dǎo)致的章節(jié)編號(hào)都需要人肉調(diào)整的問(wèn)題,當(dāng)然還有圖片的編號(hào)命名什么的,都是類似的。
直到后面開(kāi)始用markdown 由于各個(gè)編輯器的切換,一直沒(méi)有一個(gè)好用的替代方案,所以幾年前我寫(xiě)了一個(gè)小工具用命令行來(lái)做這事rawbin-/markdown-clear,這個(gè)工具解決了在github寫(xiě)博客的問(wèn)題,同時(shí)在解決博客的問(wèn)題的基礎(chǔ)上解決了在各個(gè)平臺(tái)發(fā)文的問(wèn)題,因?yàn)榫幪?hào)是用腳本寫(xiě)上去的,所以用markdown here在各個(gè)平臺(tái)發(fā)文也就順理成章的轉(zhuǎn)成html就行了,也解決了這個(gè)階段的問(wèn)題。
前兩天把拖欠幾個(gè)月的全面認(rèn)知的總結(jié)寫(xiě)了,突然不想用這個(gè)腳本來(lái)編號(hào)了,產(chǎn)生一個(gè)想法:能不能不人肉編號(hào),自動(dòng)編上?然后就有了下面的內(nèi)容。
先搞起來(lái)解決問(wèn)題
以下操作案例都是在macOS中產(chǎn)出,其他平臺(tái)可能有些許差別,換湯不換藥。
在typora中寫(xiě)markdown自動(dòng)編號(hào)
打開(kāi)typora【偏好設(shè)置】
找到【外觀】=>【主題】=>【打開(kāi)主題文件夾】
將如下代碼加入到打開(kāi)目錄的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) ". " }
講道理
打開(kāi)typora【偏好設(shè)置】
找到【通用】=>【高級(jí) 】=>【開(kāi)啟調(diào)試模式】=>勾選
然后在非源碼模式下=>【右鍵】=>【檢查元素】,就可以看到為什么是#write了
這個(gè)后面還有用
在github pages 寫(xiě)markdown博客自動(dòng)編號(hào)
我用的是jekyllbootstrap.com的模板,比較簡(jiǎn)單
打開(kāi)任意一篇rawbin-.github.io中的文章,然后【右鍵】=>【檢查】
可以拿到兩個(gè)內(nèi)容
容器類為 .content ,嚴(yán)格點(diǎn)為#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)頁(yè)編輯中自動(dòng)編碼
比如各個(gè)博客平臺(tái),各個(gè)自媒體平臺(tái)等,像我們常用的寫(xiě)文檔的語(yǔ)雀都可以的。
這里面涉及到一款瀏覽器插件markdown here,可以在頁(yè)面富文本編輯器中將markdown 自動(dòng)轉(zhuǎn)換為網(wǎng)頁(yè),這也是我前面說(shuō)到的這幾年在各個(gè)平臺(tái)發(fā)文的套路,寫(xiě)好編號(hào)好標(biāo)題markdown往編輯器里面一貼,然后一點(diǎn) ,搞定。
簡(jiǎn)單嘗試
markdown here 有一個(gè)配置頁(yè)面,可以配置和調(diào)整css,并能預(yù)覽效果
簡(jiǎn)單看了下是用js把類轉(zhuǎn)成了style屬性,并且不支持偽類
修改源碼
到adam-p/markdown-here 看到,已經(jīng)兩年沒(méi)動(dòng)代碼了
不管三七二十三先 fork一把到rawbin-/markdown-here,然后把代碼拉下來(lái)
先把css文件建起來(lái)src/common/auto-number-title,找容器類可以在markdown here的選項(xiàng)頁(yè)面找到.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) ". " }
然后修改一下注入配置,允許加載這個(gè)樣式文件,并引入這個(gè)樣式問(wèn)題
剩下的有錯(cuò)改錯(cuò)就好了
最終產(chǎn)出和應(yīng)用
克隆rawbin-/markdown-here
打開(kāi)Chrome 設(shè)置三個(gè)點(diǎn)=>【更多工具】=>【擴(kuò)展程序】
打開(kāi)【開(kāi)發(fā)者模式】
選擇【加載已解壓的擴(kuò)展程序】=>選擇克隆代碼下的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) ". " } }
再來(lái)簡(jiǎn)單講一下道理
CSS 自動(dòng)編號(hào)
不是一個(gè)新特性,或者說(shuō)是一個(gè)老特性了,出現(xiàn)在CSS 2.1中,搜索site:w3.org css automatic numbering 可以找到,當(dāng)然截止今天后來(lái)的版本(CSS 3, CSS 2.2)都有這個(gè)特性,從caniuse上可以看到,IE8及以上兼容,很棒吧
簡(jiǎn)單說(shuō)明
counter-reset 重置
counter-increment ++
counter() 取值
配合before和after來(lái)做
還有更多的玩法,參見(jiàn) CSS The Defiiniitiive Guide 4th ,這里有翻譯gdut-yy/CSS-The-Definitive-Guide-4th-zh
Chrome插件或擴(kuò)展開(kāi)發(fā)
這個(gè) 我也沒(méi)實(shí)際搞過(guò),原來(lái)看了看書(shū)
可參考的資料
官方文檔
sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略
《Chrome擴(kuò)展及應(yīng)用開(kāi)發(fā)》,這個(gè)就是我原來(lái)看的那本老書(shū)
還是有些問(wèn)題沒(méi)解決
上面的操作方式必須要h2到h7依次排開(kāi),不然會(huì)很好看
如果標(biāo)題本身就編號(hào)了的,就有點(diǎn)糟糕了
這倆問(wèn)題在我github的博客里面都能看到,解決辦法可以是運(yùn)行下``
順便探索下CSS其他可變的內(nèi)容
CSS變量或者說(shuō)自定義屬性
這個(gè)IE不兼容,其他瀏覽器高版本兼容
:root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) }
attr()
這個(gè)caniuse也有些說(shuō)不清楚,主體兼容也是從IE8開(kāi)始的,需要自己總結(jié)
強(qiáng)大的地方是可以讀取屬性值,賦給另外的屬性,也就是可以來(lái)個(gè)屬性聯(lián)動(dòng)
看起來(lái)純CSS的解決方案就到此告一段落了
如果能有腳本參與,就自由了
attr() 配合偽類來(lái)做展示,是一個(gè)JS和CSS通信的一個(gè)比較好的方式
如果你能讀到這里,小編希望你對(duì)“純CSS怎么實(shí)現(xiàn)markdown自動(dòng)編號(hào)”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì),具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。