Add syntax highlighting.

Author: rmariuzzo

gatsby-browser.js

@@ -6,3 +6,11 @@ import(`@fontsource/source-sans-pro/${theme.fontWeight.light}.css`)
 import(`@fontsource/source-sans-pro/${theme.fontWeight.regular}.css`)
 import(`@fontsource/source-sans-pro/${theme.fontWeight.semiBold}.css`)
 import(`@fontsource/source-sans-pro/${theme.fontWeight.black}.css`)
+
+import(`@fontsource/source-code-pro/${theme.fontWeight.regular}.css`)
+import(`@fontsource/source-code-pro/${theme.fontWeight.semiBold}.css`)
+
+import 'prismjs'
+
+import 'prismjs/themes/prism.css'
+import 'prismjs/themes/prism-okaidia.css'

gatsby-config.js

@@ -17,7 +17,30 @@ module.exports = {
         path: `${__dirname}/src/markdown`
       }
     },
-    { resolve: `gatsby-transformer-remark` },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: `language-`,
+              inlineCodeMarker: null,
+              aliases: {},
+              showLineNumbers: false,
+              noInlineHighlight: false,
+              languageExtensions: [],
+              prompt: {
+                user: `root`,
+                host: `localhost`,
+                global: false
+              },
+              escapeEntities: {}
+            }
+          }
+        ]
+      }
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
@@ -41,7 +64,6 @@ module.exports = {
       resolve: `gatsby-plugin-google-gtag`,
       options: {
         trackingIds: ['G-BVNP5VG5EZ'],
-        // This object is used for configuration specific to this plugin
         pluginConfig: {
           head: true,
           respectDNT: true

package-lock.json

@@ -24,14 +24,17 @@
     "new-post": "ts-node ./scripts/new-post.ts"
   },
   "dependencies": {
+    "@fontsource/source-code-pro": "^4.5.0",
     "@fontsource/source-sans-pro": "^4.5.0",
     "date-fns": "^2.23.0",
     "gatsby": "^3.12.0",
     "gatsby-plugin-google-gtag": "^3.12.0",
     "gatsby-plugin-manifest": "^3.12.0",
+    "gatsby-remark-prismjs": "^5.9.0",
     "gatsby-source-filesystem": "^3.12.0",
     "gatsby-transformer-remark": "^4.9.0",
     "normalize.css": "^8.0.1",
+    "prismjs": "^1.24.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",

package.json

@@ -58,12 +58,25 @@ export const TextBlock = styled.div`
   }
 
   pre {
-    overflow-x: auto;
+    border-radius: 0.2em;
+  }
+
+  code {
+    font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono',
+      'Ubuntu Mono', monospace;
+    font-size: 0.85em;
   }
 
   *:not(pre) > code {
-    background-color: ${$theme.color.copyLight}22;
     border-radius: 0.2em;
     padding: 0.1em 0.5em;
+    background-color: #27282288;
+  }
+
+  blockquote {
+    font-style: italic;
+    margin: 1em;
+    padding: 0 1em;
+    border-left: ${$theme.color.copyLight} solid 2px;
   }
 `

src/components/Typography.ts

@@ -32,7 +32,7 @@ The [npm.js docs](https://docs.npmjs.com/files/package.json#bin) and popular Nod
 
 Similar as other shell script, we want to make our JavaScript file executable by the locally installed node program. We do that adding a [shebang character sequence](<https://en.wikipedia.org/wiki/Shebang_(Unix)>) at the very top of our JavaScript file that look as follow:
 
-```
+```shell
 #!/usr/bin/env node
 ```