Gatsby: 代码高亮

原创

谛听

修改于 2023-09-20 19:29:46

1.4K0

安装插件

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-highlight-code/