#34 Add syntax highlighting

gatsby-config.js

@@ -7,7 +7,14 @@ module.exports = {
     'gatsby-plugin-react-next',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
-    'gatsby-transformer-remark',
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          'gatsby-remark-prismjs',
+        ],
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {

package.json

@@ -12,10 +12,12 @@
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-plugin-react-next": "^1.0.5",
     "gatsby-plugin-sharp": "^1.6.48",
+    "gatsby-remark-prismjs": "^2.0.5",
     "gatsby-source-filesystem": "^1.5.36",
     "gatsby-transformer-remark": "^1.7.42",
     "gatsby-transformer-sharp": "^1.6.24",
     "netlify-cms": "2.0.5",
+    "prismjs": "^1.15.0",
     "prop-types": "^15.6.0",
     "react-animated-number": "^0.4.3",
     "react-circular-progressbar": "^0.5.0",

src/assets/styles/global.css

@@ -38,7 +38,6 @@
 
 * {
   box-sizing: border-box;
-  font-family: 'Nunito', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -50,6 +49,7 @@ body {
   margin: 0;
   color: color(var(--text) tint(20%));
   font-size: 1.8rem;
+  font-family: 'Nunito', Helvetica, Arial, sans-serif;
 }
 
 h1 {

src/layouts/index.js

@@ -1,4 +1,6 @@
 import '../assets/styles/global.css';
+// import 'prismjs/themes/prism.css';
+import './prism.css';
 
 import React from 'react';
 import PropTypes from 'prop-types';

src/templates/WorkSingle.module.css

@@ -18,16 +18,47 @@
 
 .postBody {
   & h1 {
-    font-size: 3rem;
+    font-size: 2rem;
     color: color(var(--text) tint(20%));
     text-transform: none;
     border-bottom: none;
-    padding-bottom: 1rem;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    padding-bottom: 0;
+    margin-top: 3rem;
+    margin-bottom: 2rem;
   }
 
   & h2 {
-    font-size: 2.5rem;
+    font-size: 1.75rem;
+  }
+
+  & h3 {
+    font-size: 1.5rem;
+    text-transform: none;
+    font-weight: 700;
+  }
+
+  & a {
+    color: var(--blue);
+    text-decoration: none;
+
+    &:hover {
+      color: color(var(--blue) shade(20%));
+    }
+  }
+}
+
+@media (--tiny-viewport) {
+  .postBody {
+    & h1 {
+      font-size: 3rem;
+    }
+
+    & h2 {
+      font-size: 2.5rem;
+    }
+
+    & h3 {
+      font-size: 2rem;
+    }
   }
 }

src/works/work1.md

@@ -10,10 +10,41 @@ images:
   - image: /assets/img3-thumb.jpg
 ---
 
-Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
+# This is a heading h1
 
-Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, [Google](www.google.com) nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
 
-Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis.
+## This is heading 2 and little ipsum
 
-Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+
+Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+### This is heading 3 and little ipsum
+
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo.
+
+```javascript
+const fn = () => console.log('log');
+
+class Coise extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isOpen: true };
+  }
+
+  render() {
+    return (
+      <div>Lorem Ipsum</div>
+    )
+  }
+}
+```
+
+```html
+<!-- Include library -->
+<link rel="stylesheet" href="/path/to/styles/default.css">
+<script src="/path/to/highlight.pack.js"></script>
+<!-- Initialize highlight -->
+<script>hljs.initHighlightingOnLoad();</script>
+```