Add Prismjs for syntax highlighting.

farmOS · May 5, 2021 · 6dd6f7c · 6dd6f7c
1 parent 239b411
commit 6dd6f7c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 1 deletion.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -47,7 +47,8 @@ module.exports = {
               prefix: "/farmos/docs",
             },
           },
-          'gatsby-remark-autolink-headers',
+          'gatsby-remark-autolink-headers', // must precede prismjs!
+          'gatsby-remark-prismjs',
         ],
       },
     },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,11 +24,13 @@
     "gatsby-plugin-react-helmet": "^4.4.0",
     "gatsby-plugin-sharp": "^3.4.1",
     "gatsby-remark-autolink-headers": "^4.1.0",
+    "gatsby-remark-prismjs": "^5.1.0",
     "gatsby-source-filesystem": "^3.4.0",
     "gatsby-source-git": "^1.1.0",
     "gatsby-theme-material-ui": "^1.0.13",
     "gatsby-transformer-remark": "^3.2.0",
     "gatsby-transformer-sharp": "^3.4.0",
+    "prismjs": "^1.23.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0"

diff --git a/src/templates/docs-page.js b/src/templates/docs-page.js
@@ -3,6 +3,7 @@ import { graphql } from "gatsby"
 import { ThemeProvider } from '@material-ui/styles'
 import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
+import 'prismjs/themes/prism.css'
 import markdownStyles from './docs-markdown.css'
 import Layout from "../components/layout"
 import theme from '../theme'