Code highlighting

gatsby-config.js

@@ -34,7 +34,34 @@ module.exports = {
               wrapperStyle: `left:0; width: 100%;`,
             },
           },
-          "gatsby-remark-prismjs",
+          {
+            resolve: "gatsby-remark-prismjs",
+            options: {
+              additionalStyles: {
+                ".gatsby-highlight": {
+                  fontSize: "50px", // Set the desired font size
+                },
+              },
+              // Customize Prism options here
+              classPrefix: "language-", // Prefix for CSS classes added to code blocks
+              inlineCodeMarker: "`", // Marker for inline code snippets
+              showLineNumbers: true, // Whether to show line numbers
+              languageExtensions: [
+                {
+                  language: "superscript",
+                  extend: "javascript",
+                  definition: {
+                    superscript_types: /(SuperType)/,
+                  },
+                  insertBefore: {
+                    function: {
+                      superscript_keywords: /(superif|superelse)/,
+                    },
+                  },
+                },
+              ],
+            },
+          },
           "gatsby-remark-copy-linked-files",
           "gatsby-remark-autolink-headers",
         ],

package.json

@@ -98,4 +98,4 @@
       "remark-preset-lint-recommended"
     ]
   }
-}
+}

src/components/modules/ModuleCard.jsx

@@ -10,6 +10,7 @@ import {
 } from "reactstrap";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import Tags from "../common/Tags";
+import "prismjs/themes/prism.css";
 
 function ModuleCard({ title, cover, tags, description, url }) {
   return (

src/templates/Blog.jsx

@@ -22,6 +22,12 @@ export default class Blog extends React.Component {
     const { date } = postNode.fields;
     return (
       <Layout title={post.title}>
+        <style jsx>{`
+          .gatsby-highlight {
+            font-size: 15px;
+            color: red;
+          }
+        `}</style>
         <div>
           <div>
             <div className="title">