Add prism syntax highlighter

gatsby-browser.js

@@ -0,0 +1 @@
+import "./static/theme/github-light.css";

gatsby-config.js

@@ -20,6 +20,13 @@ module.exports = {
             resolve: `gatsby-transformer-remark`,
             options: {
                 plugins: [
+                    {
+                        resolve: `gatsby-remark-prismjs`,
+                        options: {
+                          showLineNumbers: false,
+                          noInlineHighlight: false,
+                        },
+                    },
                     {
                         resolve: `gatsby-remark-images`,
                     },

package.json

@@ -34,8 +34,10 @@
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-plugin-typography": "^5.13.1",
     "gatsby-remark-images": "^7.13.1",
+    "gatsby-remark-prismjs": "^7.14.0",
     "gatsby-source-filesystem": "^5.13.1",
     "gatsby-transformer-remark": "^6.13.1",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

static/theme/github-light.css

@@ -0,0 +1,91 @@
+/*!
+* Based on GitHub Light v0.5.0
+* Copyright (c) 2012 - 2017 GitHub, Inc.
+* Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+*/
+
+/* Comments */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #6a737d;
+    font-style: italic;
+}
+
+/* Strings */
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+    color: #032f62;
+}
+
+/* Keywords and Controls */
+.token.keyword,
+.token.atrule,
+.token.attr-name {
+    color: #d73a49;
+}
+
+/* Constants and Built-ins */
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.url {
+    color: #005cc5;
+}
+
+/* Functions and Classes */
+.token.function,
+.token.class-name,
+.token.property {
+    color: #6f42c1;
+}
+
+/* Tags and Markup */
+.token.tag,
+.token.selector,
+.token.entity {
+    color: #22863a;
+}
+
+/* Basic Syntax */
+.token.punctuation,
+.token.operator {
+    color: #24292e;
+}
+
+/* Important Highlights */
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+/* Diff Highlights */
+.token.inserted {
+    color: #22863a;
+    background-color: #f0fff4;
+}
+
+.token.deleted {
+    color: #b31d28;
+    background-color: #ffeef0;
+}
+
+.token.changed {
+    color: #e36209;
+    background-color: #ffebda;
+}
+
+/* Namespace and Others */
+.token.namespace {
+    opacity: 0.7;
+}
+