Skip to content
This repository has been archived by the owner on Oct 17, 2022. It is now read-only.

Commit

Permalink
Make syntax highlighting work with PrismJS
Browse files Browse the repository at this point in the history 
[1] TryGhost/gatsby-starter-ghost#25

[2] https://ghost.mwallinger.com/blog/gatsbysyntaxhighlight/
  • Loading branch information
@rm3l
rm3l committed Jul 5, 2020
1 parent 29f2385 commit ed08f0a
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 89 deletions.
33 changes: 33 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"presets": [
[
"babel-preset-gatsby"
]
],
"plugins": [
[
"prismjs",
{
"languages": [
"javascript",
"css",
"markup",
"json",
"handlebars",
"yaml",
"java",
"dart",
"xml",
"kotlin",
"go",
"bash",
"docker",
"dockerfile",
"groovy"
],
"theme": "okaidia",
"css": true
}
]
]
}
12 changes: 8 additions & 4 deletions gatsby-browser.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* eslint-disable */
require("prismjs/themes/prism-okaidia.css");

/**
* Trust All Scripts
*
Expand All @@ -10,20 +12,22 @@
*
*/
var trustAllScripts = function () {
var scriptNodes = document.querySelectorAll('.load-external-scripts script');
var scriptNodes = document.querySelectorAll(
".load-external-scripts script"
);

for (var i = 0; i < scriptNodes.length; i += 1) {
var node = scriptNodes[i];
var s = document.createElement('script');
s.type = node.type || 'text/javascript';
var s = document.createElement("script");
s.type = node.type || "text/javascript";

if (node.attributes.src) {
s.src = node.attributes.src.value;
} else {
s.innerHTML = node.innerHTML;
}

document.getElementsByTagName('head')[0].appendChild(s);
document.getElementsByTagName("head")[0].appendChild(s);
}
};

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"@tryghost/helpers": "1.1.27",
"@tryghost/helpers-gatsby": "1.0.31",
"babel-plugin-prismjs": "^2.0.1",
"babel-preset-gatsby": "^0.4.0",
"babel-preset-gatsby": "^0.5.1",
"cheerio": "1.0.0-rc.3",
"dotenv": "^8.2.0",
"gatsby": "2.23.20",
Expand Down
129 changes: 76 additions & 53 deletions src/templates/post.js
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,85 @@
import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import { Helmet } from 'react-helmet'
import React from "react";
import PropTypes from "prop-types";
import { graphql } from "gatsby";
import { Helmet } from "react-helmet";

import { Layout } from '../components/common'
import { MetaData } from '../components/common/meta'
import { Layout } from "../components/common";
import { MetaData } from "../components/common/meta";

import { Disqus } from 'gatsby-plugin-disqus'
import { Disqus } from "gatsby-plugin-disqus";

const config = require(`../utils/siteConfig`)
import Prism from "prismjs";
import "prismjs/plugins/line-numbers/prism-line-numbers.js";

const config = require(`../utils/siteConfig`);

/**
* Single post view (/:slug)
*
* This file renders a single post and loads all the content.
*
*/
const Post = ({ data, location }) => {
const post = data.ghostPost
* Single post view (/:slug)
*
* This file renders a single post and loads all the content.
*
*/
class Post extends React.Component {
constructor(props) {
super(props);
}

let disqusConfig = {
url: `${config.siteUrl + location.pathname}`,
identifier: post.id,
title: post.title,
componentDidMount() {
Prism.highlightAll();
}

return (
<>
<MetaData
data={data}
location={location}
type="article"
/>
<Helmet>
<style type="text/css">{`${post.codeinjection_styles}`}</style>
</Helmet>
<Layout>
<div className="container">
<article className="content">
{ post.feature_image ?
<figure className="post-feature-image">
<img src={ post.feature_image } alt={ post.title } />
</figure> : null }
<section className="post-full-content">
<h1 className="content-title">{post.title}</h1>
render() {
const data = this.props.data;
const location = this.props.location;

const post = data.ghostPost;

let disqusConfig = {
url: `${config.siteUrl + location.pathname}`,
identifier: post.id,
title: post.title,
};

{/* The main post content */ }
<section
className="content-body load-external-scripts"
dangerouslySetInnerHTML={{ __html: post.html }}
/>
<Disqus config={disqusConfig} />
</section>
</article>
</div>
</Layout>
</>
)
post.html = post.html.replace(
new RegExp("<pre><code", "g"),
'<pre class="line-numbers"><code'
);

return (
<>
<MetaData data={data} location={location} type="article" />
<Helmet>
<style type="text/css">{`${post.codeinjection_styles}`}</style>
</Helmet>
<Layout>
<div className="container">
<article className="content">
{post.feature_image ? (
<figure className="post-feature-image">
<img
src={post.feature_image}
alt={post.title}
/>
</figure>
) : null}
<section className="post-full-content">
<h1 className="content-title">{post.title}</h1>

{/* The main post content */}
<section
className="content-body load-external-scripts"
dangerouslySetInnerHTML={{
__html: post.html,
}}
/>
<Disqus config={disqusConfig} />
</section>
</article>
</div>
</Layout>
</>
);
}
}

Post.propTypes = {
Expand All @@ -69,14 +92,14 @@ Post.propTypes = {
}).isRequired,
}).isRequired,
location: PropTypes.object.isRequired,
}
};

export default Post
export default Post;

export const postQuery = graphql`
query($slug: String!) {
ghostPost(slug: { eq: $slug }) {
...GhostPostFields
}
}
`
`;
32 changes: 1 addition & 31 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3436,6 +3436,7 @@ babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
babel-plugin-prismjs@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/babel-plugin-prismjs/-/babel-plugin-prismjs-2.0.1.tgz#b56095f423926662259de8f5ee50a7afbcf0fd92"
integrity sha512-GqQGa3xX3Z2ft97oDbGvEFoxD8nKqb3ZVszrOc5H7icnEUA56BIjVYm86hfZZA82uuHLwTIfCXbEKzKG1BzKzg==

babel-plugin-remove-graphql-queries@^2.9.12:
version "2.9.12"
Expand All @@ -3461,25 +3462,6 @@ babel-plugin-transform-react-remove-prop-types@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"

babel-preset-gatsby@^0.4.0:
version "0.4.12"
resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.4.12.tgz#f69cbcb5e212761a6a11cd2d7a6032bfc672d22b"
integrity sha512-qsrIrZmwFhXyThBopqkhKqLLeKuNwjUA4CGRbW1ZXLdQhkbIcdOhbfmUfVibP1Nxao+l64XkeADdrLIFwfiZOw==
dependencies:
"@babel/plugin-proposal-class-properties" "^7.10.1"
"@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
"@babel/plugin-proposal-optional-chaining" "^7.10.3"
"@babel/plugin-syntax-dynamic-import" "^7.8.3"
"@babel/plugin-transform-runtime" "^7.10.3"
"@babel/plugin-transform-spread" "^7.10.1"
"@babel/preset-env" "^7.10.3"
"@babel/preset-react" "^7.10.1"
"@babel/runtime" "^7.10.3"
babel-plugin-dynamic-import-node "^2.3.3"
babel-plugin-macros "^2.8.0"
babel-plugin-transform-react-remove-prop-types "^0.4.24"
gatsby-core-utils "^1.3.8"

babel-preset-gatsby@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.5.1.tgz#c5847a2121a2670f2c84d4b82b82cff8e23c44d1"
Expand Down Expand Up @@ -7119,18 +7101,6 @@ gatsby-core-utils@^1.3.11:
proper-lockfile "^4.1.1"
xdg-basedir "^4.0.0"

gatsby-core-utils@^1.3.8:
version "1.3.10"
resolved "https://registry.yarnpkg.com/gatsby-core-utils/-/gatsby-core-utils-1.3.10.tgz#f283b9c0c5281e678d3b8b77cf46ef3992971d3f"
integrity sha512-JtGP7lrbJanatO1j04mECRP7CHlnlexhS3KYUROQdcwxBvyIikkHYOt4FqS4FAQ6y6MqOvM1/uvpkbQbBx154Q==
dependencies:
ci-info "2.0.0"
configstore "^5.0.1"
fs-extra "^8.1.0"
node-object-hash "^2.0.0"
proper-lockfile "^4.1.1"
xdg-basedir "^4.0.0"

gatsby-graphiql-explorer@^0.4.10:
version "0.4.10"
resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-0.4.10.tgz#20357c444798fb694555c6b01981ba980abd8c4e"
Expand Down

0 comments on commit ed08f0a

Please sign in to comment.