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：代码高亮
