andrewbranch / gatsby-remark-vscode

Gatsby plugin to provide VS Code’s syntax highlighting to Markdown code fences

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

gatsby-remark-vscode not displaying correct color theme

jon424 opened this issue · comments

commented

I'm trying to format code blocks in markdown files for posts to a website with Gatsby.

I would like the code blocks to be displayed in one of VSCode's color themes (Dark +, for instance). I have npm installed gatsby-remark-vscode, and put the plugin in my gatsby-config.js file:

plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [{
          resolve: 'gatsby-remark-vscode',
          options: {
            colorTheme: 'Dark+ (default dark)',
            injectStyles: true,
            extensions: [{
              identifier: 'sdras.night-owl',
              version: '1.1.3'
            }],
            extensionDataDirectory:
              path.resolve('extensions'),
            logLevel: 'error'
          }
        }]
      }
    },
]

I have required 'path' at the top of my gatsby-config.js file:

const path = require('path');

I have imported the stylesheet in my gatsby-browser.js file:

import 'gatsby-remark-vscode/styles.css';

I have used back-ticks to format in my markdown file (the file that contains the blog post) like this: ```js (CODE EXAMPLE) ```

When I npm run develop, I do not see the correct VSCode formatting for the code block, just a code block similar to what we see on StackOverflow code blocks. I would greatly appreciate any advice on how to render the correct theme in my code blocks.

You’re using plugin options from v1. Make sure you've installed v2 and have a look at the README for the current configuration options.

commented

Thanks so much - I updated the version and edited the gatsby-config.js as stated in the README, and that fixes it.