某大佬群裡的人突然開始流行起寫語雀來,看了一圈的我想起了很久以來一直想弄的東西——用 blog 做出可讀性強的筆記。之前高中的時候用過類似的東西寫筆記,但是由於侷限性,很多東西仍然無法代替地需要手寫,因此體驗一直不好。剛好寒假也有些細碎的時間,就此定下一個計劃來一點一點把它變成我想要的樣子。因為主要注重體驗改善,所以這個系列的文章都會偏細碎、偏簡單。這也就是 Plan spare = new Plan(); 的來源了。這是這個系列的第一篇,也算一個好的開頭。

顏色的執念

一直以來我都認為顏色在筆記中的地位是無可取代的,無論是區分重點抑或是區分層次,顏色都是最佳載體。而且顏色可以幫助自己形成獨有的記憶。加之我一直喜歡玩各式各樣彩色的墨水。玩得深入真的很花錢 所以,blog 怎麼能沒有熒光筆這種東西呢!

直接衝CSS

有了上次黑幕的經驗,這次上來直接往 css 上衝。

既然是熒光筆,照著 Microsoft Edge 的效果,用簡單的 background 來實現就行啦!於是順手寫下 css

1
2
3
4
.HighlightEdgeBlue{
background: rgb(166, 230, 255);
padding: 0px 0px;
}

Deploy 到線上看了看,居然效果還不錯,於是照葫蘆畫瓢,接著從喜歡的顏色上挑了幾種,然後調整了一下顏色的透明度。

上線

本來是準備直接像黑幕一樣放在本地加載,但是後來發現了 jsDelivr 這個挺好的東西 Blog加載緩慢的問題終於有了些改善 於是一頓操作,做好之後放到 Github 倉庫裡,發佈以後用 jsDelivr 來加載。事實證明它確實不錯(我超喜歡自動生成壓縮格式這一點。

只需要在 head.ejs(全局可用) 或者文章中(局部使用)加上這樣一句,就可以使用 Highlight 啦

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LemonPrefect/sDelivr/css/var.highlight.min.css" />

Sample

本來是不準備放 sample 的,但是我怕 class 名稱太長我自己也記不住。 真實

具體有些啥顏色嘛,戳這裡!

於是,放上我喜歡的某首歌的歌詞和我很菜的翻譯 特意用了襯線字體

太陽升 瑩瑩回回 透過車窗

When the sun rises, the sunlight goes through the car windows.

清晨的風微微泛著香

The dawn wind blows with fragrance.

路過了中山 城市間恢復繁華模樣

I went through Zhongshan, which city has recovered to be prosperous.

而我這一次要去何方

However, what should I go this time?

昨夜想了太久 那個路口哪有

I still couldn’t find which cross is the one after thinking for a long time last night sleeplessly.

停下等候還是一直走

Should I stop to wait or keep going?