Add code title

gatsby-config.js

@@ -13,6 +13,7 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          "gatsby-remark-code-name",
           {
             resolve: `gatsby-remark-prismjs`,
           },

index.css

@@ -1,4 +1,14 @@
 body {
   margin: 0px;
   --theme-color: hsl(209, 47%, 35%);
-}
+}
+
+.gatsby-remark-code-name {
+  margin: 0px 0px -0.5em 0.5em;
+}
+
+.gatsby-remark-code-name span {
+  background: gray;
+  color: white;
+  padding: 0.25em;
+}

plugins/gatsby-remark-code-name/index.js

@@ -0,0 +1,30 @@
+"use strict"
+const visit = require("unist-util-visit")
+
+module.exports = ({ markdownAST }) => {
+  // copy children to prevent infinity roop when splice node
+  const children = [...markdownAST.children]
+  let insertCount = 0
+  visit(markdownAST, "code", (node, index) => {
+    const { lang } = node
+    if (!lang) return
+    const [name, extension] = lang.split(".")
+    const title = name && extension ? lang : null
+    if (title) {
+      const className = "gatsby-remark-code-name"
+      const titleNode = {
+        type: "html",
+        value: `
+          <div class=${className}>
+            <span>${title}</span>
+          </div>
+        `.trim(),
+      }
+      children.splice(index + insertCount, 0, titleNode)
+      insertCount += 1
+    }
+    node.lang = extension || name
+  })
+  markdownAST.children = children
+  return markdownAST
+}

plugins/gatsby-remark-code-name/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "gatsby-remark-code-name",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}