diff --git a/packages/gatsby-recipes/package.json b/packages/gatsby-recipes/package.json
index 66784dff92d11..d2205ea1246eb 100644
--- a/packages/gatsby-recipes/package.json
+++ b/packages/gatsby-recipes/package.json
@@ -39,6 +39,7 @@
     "graphql-compose": "^6.3.8",
     "graphql-subscriptions": "^1.1.0",
     "graphql-type-json": "^0.3.1",
+    "hicat": "^0.7.0",
     "html-tag-names": "^1.1.5",
     "humanize-list": "^1.0.1",
     "import-jsx": "^4.0.0",
diff --git a/packages/gatsby-recipes/src/cli.js b/packages/gatsby-recipes/src/cli.js
index 694d867df39af..ad3110338f55b 100644
--- a/packages/gatsby-recipes/src/cli.js
+++ b/packages/gatsby-recipes/src/cli.js
@@ -7,6 +7,7 @@ const { render, Box, Text, Color, useInput, useApp, Static } = require(`ink`)
 const Spinner = require(`ink-spinner`).default
 const Link = require(`ink-link`)
 const MDX = require(`@mdx-js/runtime`)
+const hicat = require(`hicat`)
 import { trackCli } from "gatsby-telemetry"
 const {
   createClient,
@@ -196,6 +197,24 @@ function eliminateNewLines(children) {
 
 const components = {
   inlineCode: props => <Text {...props} />,
+  code: props => {
+    // eslint-disable-next-line
+    let language = "```"
+    if (props.className) {
+      // eslint-disable-next-line
+      language = props.className.split(`-`)[1]
+    }
+    const children = hicat(props.children.trim(), { lang: language })
+    const regex = /^/gm
+
+    const ansi = children.ansi.replace(regex, `··  `)
+
+    return (
+      <Div marginBottom={1}>
+        <Text>{ansi}</Text>
+      </Div>
+    )
+  },
   h1: props => (
     <Div marginBottom={1}>
       <Text bold underline {...props} />