感覺博客缺少一個代碼高亮插件, 所以我就挑了一個免費的, 功能比較多的插件 Enligher 安裝到博客.
好用但是挺好用, 但是好像和當前的主題不太兼容, 具體症狀請見下圖:
可以看見, 不管是編輯器還是實際文章, 這個插件都有兼容性問題.
所以我馬上要做的事情, 就是找出問題並自己解決掉.
我沒有學過任何關於 CSS 或者 JS 的知識, 以下所有紀錄都來源於常識… 如果我有哪邊做錯, 歡迎在評論區指正😄
(下文所有的修改都會寫在文末的 patch 文件中)
編輯器部分
錯位修正
margin 的左右都是 0這個比較簡單, 修改 enlighter/resources/gutenberg/enlighterjs.gutenberg.min.css , 如下所示:
div[data-type="enlighter/codeblock"] {
border: 1px solid #cccbcb;
border-radius: 5px;
/* max-width: 100%; */
padding: 15px
}刪除/移動 干擾信息
右下角的提示 “EnligherJS Syntax Highlighter” 一直都在那裡, 非常佔空間而且還會產生打擾的效果, 所以我們不能讓它達到目的, 可以直接把它刪掉. 另外, 左上角的粗體字提示 Highlighting 種類未免有些太過喧賓奪主, 要是可以把它移到右下角的話豈不完美.
所以我就將 enlighter-footer 的部分刪掉, 然後將 enlighter-title 的部分移到 原來的 footer 的部分. 目前一切進行的都比較順利.
wp.element.createElement("div", {
className: "enlighter-header"
},
/*wp.element.createElement("div", {
className: "enlighter-title"
}, (e = t.language, s()[e] || "Unknown language"))), wp.element.createElement(u, {
value: t.content,
onChange: function (e) {
return n({
content: e
})
},
placeholder: "Insert Sourcecode..",
"aria-label": "Code"
}),*/
/*wp.element.createElement("div", {
className: "enlighter-footer"
},
wp.element.createElement("div", {
className: "enlighter-footer-label"
},
wp.element.createElement("strong", null, "EnlighterJS"), " Syntax Highlighter"))*/
wp.element.createElement(u, {
value: t.content,
onChange: function (e) {
return n({
content: e
})
},
placeholder: "Insert Sourcecode..",
"aria-label": "Code"
}), wp.element.createElement("div", {
className: "enlighter-footer"
}, wp.element.createElement("div", {
className: "enlighter-footer-label",
}, (e = t.language, s()[e] || "Unknown language")))),美化
到這一步, 編輯器 Enlighter 區塊的效果是這個樣子的:
不夠完美啊!從使用的角度來說, 它已經夠用了.
但是右下角的那一行字總覺得有點不和諧.
所以我就把它往下移動了一點點, 並且加粗.
div[data-type="enlighter/codeblock"] {
border: 1px solid #cccbcb;
border-radius: 5px;
padding: 15px;
padding-block-end: 1px /* New */
}
div[data-type="enlighter/codeblock"] .enlighter-footer-label {
text-align: right;
font-size: 10px;
font-family: Menlo,Consolas,monaco,monospace;
color: #23282d;
cursor: pointer;
padding-top: 3px; /* New */
font-weight: 800 /* New */
}
( 以上所有代碼全部由我目測得到, 且並不理解其含義, 均未考慮兼容性. 使用前請再三考慮 )
最終效果現在感覺好多了 👌
網頁展示部分
EnlighterJS 官網按鈕倒不難去掉, 插件提供了開關可以直接把它關掉.
將 EnlighterJS website button 設為 Disable 就可以了那麼接下來要做到就是適配暗黑模式.
適配暗黑模式的話… (撓頭) 要改的變量好像有點太多了, 暫時就不寫了吧.
本身 MDX 的暗黑模式就不太好看, 我的解決方法就是 徹 . 底 . 不 . 開 ! 這下不會有問題了吧?
Patch via Gist
