使用 Shiki.js 對網頁上的程式碼進行著色

前陣子突然又心血來潮，將自己部落格的程式碼著色工具從 Highlight.js 換成 Shiki.js。雖然 Highlight.js 使用上並沒有什麼問題，我甚至還使用它提供的 API，幫自己寫了 Blade 與 HCL 的程式碼著色套件。Highlight.j...
TypeScript CSS

觸發互動視窗的 CSS 轉場動畫

之前因為好玩，還有想在部落格上看程式碼可以舒服點，所以自己寫了一個簡單的互動視窗（Modal），用來放大文章中的程式碼區塊。雖然功能一切正常，但我還是會嘗試去改善互動視窗的程式碼。前幾天改了一個版本，讓互...
TypeScript CSS

讓按鈕在移動設備上更大一些

Tailwind CSS 的作者 Adam Wathan 在 Build UIs that don't suck 系列中又分享了一個很實用的小技巧。作者提到網頁中的一些按鈕設計，在桌面設備上可能會小一點以求美觀與符合頁面設計，對於可以精準點擊的滑鼠游標...
Tailwind CSS CSS

為什麼 z-index 沒有效果

在做網頁改版的時候，遇到一個問題，一個元素的 z-index 數值不管我調多高，都無法蓋過 z-index 比它低的元素。認真看了一下 MDN 的敘述，發現這是個菜雞錯誤 (RTFM)，因此決定寫個文章記錄。什麼是 z-index在三維空...
CSS

PurgeCSS，清除沒有使用到的 CSS

最近開始在學習 Tailwins CSS，Tailwind CSS 有一個很讚的功能，就是使用 PurgeCSS 去清除沒有使用到 CSS class name，將 CSS 檔案進行大幅度的瘦身。此時小弟我有一個念頭。「PurgeCSS 可不可以幫 Bootstrap 的 CSS...
Laravel CSS JavaScript Bootstrap

CKEditor 5 教學 (六)，在你的文章中顯示程式碼區塊 (Code Block)

CKEditor 5 支援程式碼區塊 (Code Block)，讓你可以在文章中呈現各種程式語言的區塊。本篇文章會敘述如何安裝程式碼區塊的套件，還有在文章中使用 Prism.js 高亮你的程式碼區塊。這篇文章會簡單敘述安裝套件的過程，...
CKEditor Laravel CSS

CKEditor 5 教學 (四)，如何顯示編輯好的文章

當文章編輯好之後按下儲存送出，接下來就要來查看編輯好的文章內容啦！這時候如果你開啟文章顯示的頁面，你會發現剛剛編輯的效果並沒有完整顯示出來，像是馬克筆沒有顏色。如果你有插入影片的話，甚至連影片都看不到...
CKEditor JavaScript CSS

CKEditor 5 教學 (二)，客製化編輯器的功能列

本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 TypeScript 作為主要語言。在上一篇文章中，我們簡單介紹了一下 CKEditor 如何安裝。CKEditor 雖然功能非常多，但預設的功能非常少，需要我們再進...
CKEditor JavaScript CSS