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

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

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

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

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

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

PurgeCSS,清除沒有使用到的 CSS

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

為什麼 z-index 沒有效果

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