Astro 部落格架設筆記(5) - 程式碼語法高亮 Expressive-Code

技術類型的部落格,往往會在文章中貼上一些程式碼,而具備程式碼語法高亮算是一個很基本的功能,過往在 Google Blogger 就沒辦法做到這件事情,或是做出來的效果很差。

上傳進度:已上傳 114625 個位元組 (共 266027 個位元組)。
程式碼語法高亮示意圖

如果想要在 Astro 部落格實現語法高亮,只需要安裝 Expressive Code 即可

  1. 安裝套件
    npm install astro-expressive-code
  2. 設定 content.config.ts
    import expressiveCode from 'astro-expressive-code';
    
    export default defineConfig({
    	site: 'https://rojerchen.github.io',
    	base: '/',
    	integrations: [
    		expressiveCode({
    			// 可設置主題、按鈕樣式等
    			themes: ['dracula', 'github-dark'],
    		}),
    	],
      },
    });
只要完成上述步驟,就可以達到最基本的程式碼語法高亮,而我自己又陸續安裝了以下幾個套件:
  1. @expressive-code/plugin-line-numbers`  (顯示行數)
  2. @xt0rted/expressive-code-file-icons`  (icon圖示)
  3. expressive-code-fullscreen` (全螢幕)
最後的效果大概就是這樣,如果想要更進一步了解,可以參考官網 Expressive-Code

程式碼語法高亮結果

※延伸閱讀


    Blogger Comment

0 意見: