Added code highlighting

Author: jacob-ebey

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "prismjs",
+      {
+        "languages": ["javascript", "jsx", "json", "html", "bash"]
+      }
+    ]
+  ]
+}

package.json

@@ -16,16 +16,19 @@
   "dependencies": {
     "buffer": "^5.5.0",
     "gray-matter": "^4.0.2",
+    "marksy": "^8.0.0",
     "next": "^9.3.3",
     "node-glob": "^1.2.0",
     "path-browserify": "^1.0.1",
+    "prism-themes": "^1.3.0",
+    "prismjs": "^1.19.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-markdown": "^4.3.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2"
   },
   "devDependencies": {
+    "babel-plugin-prismjs": "^2.0.1",
     "raw-loader": "^4.0.0",
     "sass": "^1.26.3"
   },

src/pages/_app.js

@@ -1,4 +1,6 @@
 import React from 'react';
+
+import 'prism-themes/themes/prism-vs.css';
 import 'semantic-ui-css/semantic.min.css';
 
 import '../styles/bootstrap.css';

src/pages/blog/[slug].js

@@ -1,26 +1,40 @@
 import * as React from 'react'
-import matter from "gray-matter";
-import ReactMarkdown from "react-markdown";
+import Prism from 'prismjs';
+import matter from 'gray-matter';
+import marksy from 'marksy/jsx';
+
+const compile = marksy({
+  createElement: React.createElement,
+  highlight(language, code) {
+    return Prism.highlight(code, Prism.languages[language], language);
+  },
+});
+
 
 import ArticlePage from '../../components/article-page';
 import navItems from '../../nav-items';
 
+// function reformatDate(fullDate) {
+//   const date = new Date(fullDate)
+//   return date.toDateString().slice(4);
+// }
+
 export default function BlogTemplate(props) {
-  // function reformatDate(fullDate) {
-  //   const date = new Date(fullDate)
-  //   return date.toDateString().slice(4);
-  // }
   const markdownBody = props.content
   const frontmatter = props.data
 
+  const body = compile(markdownBody);
+
   return (
     <ArticlePage
       menuItems={navItems.menuItems}
       secondaryMenuItems={navItems.secondaryMenuItems}
       title={frontmatter.title}
       secondaryTitle={frontmatter.secondary_title}
     >
-      <ReactMarkdown source={markdownBody} />
+      <article className="center-images">
+        {body.tree}
+      </article>
     </ArticlePage>
   );
 }

src/pages/get-started.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Router from 'next/router';
+
+export default function GetStartedRedirect() {
+  React.useEffect(() => {
+    Router.replace('/blog/get-started');
+  }, []);
+
+  return <p>Redirecting....</p>;
+}

src/styles/bootstrap.css

@@ -9,3 +9,10 @@ body,
     display: none !important;
   }
 }
+
+.center-images img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}