How to get Gatsby-Remark-Prismjs to work With WordPress Posts

[ShawnHosea]

Summary

Hello,
I'm having a hard time trying to figure out why the syntax on my site won't update after installing Gatsby-Remark-Prism. I've installed the dependencies and added the plugin to the gatsby-config.js file.
Also required the the theme in my layout.js file. I suspect that it's not working because this plugin transforms markdown files and the data that gets queried inthe gatsby-source-wordpress plugin are not .md files.

Any help in the right direction would be appreciated. Thank you.

Repo:

https://github.com/CraftAtoms/swizecblog

Gatsby Prism Plugin:

https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/

Environment

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews ",
  "dependencies": {
    "babel-plugin-styled-components": "0.0.3-0",
    "gatsby": "next",
    "gatsby-image": "^1.0.54",
    "gatsby-paginate": "^1.0.16",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-sharp": "^1.6.48",
    "gatsby-plugin-styled-components": "^3.0.0-beta.2",
    "gatsby-remark-prismjs": "^2.0.5",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-source-wordpress": "^2.0.93",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-transformer-sharp": "^1.6.27",
    "prismjs": "^1.15.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-fontawesome": "^1.6.1",
    "react-helmet": "^5.2.0",
    "react-instagram-embed": "^1.4.0",
    "styled-components": "^3.3.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  },
  "devDependencies": {
    "gh-pages": "^1.2.0",
    "prettier": "^1.12.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

File contents

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Swizec Blog',
    subtitle: `Fetch Data From Local WP Install`,
    
  },
  pathPrefix: `/swizecblog`,
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    `gatsby-transformer-remark`,
    `gatsby-plugin-styled-components`,
    
    {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
         * Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'
         */
        baseUrl: "swizec.com/blog",
        // The protocol. This can be http or https.
        protocol: "https",
        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the assumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        // If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
        // This feature is untested for sites hosted on Wordpress.com.
        // Defaults to true.
        useACF: true,
        auth: {
          // If auth.user and auth.pass are filled, then the source plugin will be allowed
          // to access endpoints that are protected with .htaccess.
          htaccess_user: "your-htaccess-username",
          htaccess_pass: "your-htaccess-password",
          htaccess_sendImmediately: false,
  
          // If hostingWPCOM is true then you will need to communicate with wordpress.com API
          // in order to do that you need to create an app (of type Web) at https://developer.wordpress.com/apps/
          // then add your clientId, clientSecret, username, and password here
          wpcom_app_clientSecret:
            "NMPnXYFtj2gKas7V1kZyMxr7oLry9V5ZxIyBQGu2txjVHg0GhFz6RYcKopkHICYg",
          wpcom_app_clientId: "54793",
          wpcom_user: "gatsbyjswpexample@gmail.com",
          wpcom_pass: "very-secured-password",
        },
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems.
        verboseOutput: false,
        // Set how many pages are retrieved per API request.
        perPage: 100,
        // Search and Replace Urls across WordPress content.
        searchAndReplaceContentUrls: {
          sourceUrl: "https://source-url.com",
          replacementUrl: "https://replacement-url.com",
        },
        // Set how many simultaneous requests are sent at once.
        concurrentRequests: 10,
        // Exclude specific routes using glob parameters
        // See: https://github.com/isaacs/minimatch
        // Example:  `["/*/*/comments", "/yoast/**"]` will exclude routes ending in `comments` and
        // all routes that begin with `yoast` from fetch.
        excludedRoutes: ["/*/*/comments", "/yoast/**"],
        // use a custom normalizer which is applied after the built-in ones.
        normalizer: function({ entities }) {
          return entities;
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              // Class prefix for 
 tags containing syntax highlighting;
              // defaults to 'language-' (eg 
).
              // If your site loads Prism into the browser at runtime,
              // (eg for use with libraries like react-live),
              // you may use this to prevent Prism from re-processing syntax.
              // This is an uncommon use-case though;
              // If you're unsure, it's best to use the default value.
              classPrefix: "language-",
              // This is used to allow setting a language for inline code
              // (i.e. single backticks) by creating a separator.
              // This separator is a string and will do no white-space
              // stripping.
              // A suggested value for English speakers is the non-ascii
              // character '›'.
              inlineCodeMarker: null,
              // This lets you set up language aliases.  For example,
              // setting this to '{ sh: "bash" }' will let you use
              // the language "sh" which will highlight using the
              // bash highlighter.
              aliases: {},
            },
          },
        ],
      },
    },
    
  
  ],
}

[pieh]

I suspect that it's not working because this plugin transforms markdown files and the data that gets queried inthe gatsby-source-wordpress plugin are not .md files.

This is correct. Currently we have no way to apply transformation like that to wordpress fields. This is similiar issue (just about transforming images instead of code blocks) - #3733

[ShawnHosea]

Ahh thanks a lot @pieh . This actually clears up a few other issues for me.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!