给我的Highlights上点色

给我的Highlights上点色


某大佬群里的人突然开始流行起写语雀来,看了一圈的我想起了很久以来一直想弄的东西——用 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?


假装有分享按钮~

Comments


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×