· 1 分鐘閱讀
從 prismjs 改為 shiki
# 前端shiki 是一個將程式碼語法做高亮的套件,跟其他套件(highlightjs, prismjs)算是比較新一些,也比較少人知道。shiki 是用 TextMate grammar 當作 tokenizer 的定義,除了可以從其他地方直接拿來用不需要再另外撰寫客製化語言之外,有統一的標準之後要擴充也比較容易。
另外則是它支援的語法很豐富也比較好設定,內建的主題也很多,就順手把原本的 prismjs 換掉了。安裝 gatsby-remark-shiki 再把設定套上去就搞定了,讚讚。
遇到一些小問題:
- 原本用 react 的 highlight,要全部改成 jsx 或是 tsx
- 如果是用
c++,要改成cpp
看看成果:
const Component = () => <MyComponent /> 相關文章
- 前端使用圖片時需要注意的事從 Jake Archibald 的文章延伸,整理現代響應式圖片應該怎麼寫:為什麼 width/height 還是要加、什麼時候用 CSS aspect-ratio、AVIF 跟 WebP 怎麼選,以及用 picture/source/srcset 處理手機版圖片切換。
- CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小textarea 自動調整高度,以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代,支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
- 讓你的超連結底線更好看:text-underline-offset預設的情況下底線跟文字很接近,有些設計師不喜歡這種樣式,我自己也覺得沒有很好看。
- 為什麼網頁不應該追求 Pixel Perfect只有在 Pixel Perfect 很重要的時候才應該關注他,否則往往會讓你得到一個雙輸的局面。