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

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