Prism.js plugin

[aileen]

Problem description

Prism.js doesn't work "out of the box" for Ghost posts currently. There is a workaround to use Prism.js, which is used in the Ghost Docs repository here:

class Post extends React.Component {
    componentDidMount() {
        Prism.highlightAll()
    }
   ...
}

This solution only supports basic languages, which handlebars, yaml, and json for example are not being considered as.

Proposal

Similar to the gatsby-remark-prismjs plugin, we can create a plugin for Ghost that does the same for Ghost posts.

Maybe there are other solutions for this. This needs to be investigated further.

Todos

• [ ] investigate do-ability further
• [ ] write up tech spec and agree on solution with core team
• [ ] implement solution
• [ ] publish plugin

[nehalist]

What about installing babel-preset-gatsby and babel-plugin-prismjs and creating a custom .babelrc file which specifies used languages:

{
  "presets": [
    [
      "babel-preset-gatsby"
    ]
  ],
  "plugins": [
    [
      "prismjs",
      {
        "languages": [
          "javascript",
          "css",
          "markup",
          "json",
          "handlebars",
          "yaml"
        ],
        "theme": "okaidia",
        "css": true
      }
    ]
  ]
}

[aileen]

Thanks @nehalist ❤️

This absolutely works for now! Will add this to the starter soon 👍

[ScreamZ]

Any news on this ?