Gatsby: 代碼高亮
- 2020 年 1 月 4 日
- 筆記
安裝插件
npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code
配置插件
在 gatsby-config.js 中添加：
// In your gatsby-config.js plugins: [ { resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: `gatsby-remark-highlight-code` }, ], }, }, ]
代碼運行時加載插件
對於 gatsby-starter-blog，在 src/templates/blog-post.js 的 BlogPostTemplate 類中添加如下代碼：
async componentDidMount() { try { const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader") await deckdeckgoHighlightCodeLoader.defineCustomElements(window); } catch (err) { console.error(err); } }
一般網站中在 index.js 中添加上述代碼。
效果：https://aping-dev.com/Gatsby：代碼高亮
