Using Custom Themes

[danvega]

Any idea of how to use a custom theme with this plugin? The Shiki docs say that you can use any vscode theme

const shiki = require('shiki')

const t = shiki.loadTheme('./solarized-dark.tmTheme')

shiki.getHighlighter({
  theme: t
})

I use Synthwave 84 but I'm not quite sure I can just drop it in my project and use it and therefore I am having a tough time. Any ideas?

[naiyerasif]

@danvega You can simply copy and paste synthwave-color-theme.json in say, static directory, and then use the following config in your gridsome.config.js:

const shiki = require('shiki');

const synthwave= shiki.loadTheme('./static/synthwave-color-theme.json');

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        remark: {
          plugins: [
            ['gridsome-plugin-remark-shiki', { theme: synthwave, skipInline: true }]
          ]
        }
      }
    }
  ]
}