fix(gatsby-recipes): support code blocks on cli (#23996)

* fix(gatsby-recipes): support code blocks on cli

* Squashed commit of the following:

commit 9bd54be
Author: Hashim Warren <hashim@gatsbyjs.com>
Date:   Mon May 11 16:31:31 2020 -0400

    (chore)Update Incremental Builds blog post with list (#23981)

    * Update steps with ordered list

    * Update docs/blog/2020-04-22-announcing-incremental-builds/index.md

    Co-authored-by: Matt Kane <matt@gatsbyjs.com>

    * Update docs/blog/2020-04-22-announcing-incremental-builds/index.md

    Co-authored-by: Matt Kane <matt@gatsbyjs.com>

    * Update link and SEO title

    * chore: format

    Co-authored-by: Matt Kane <matt@gatsbyjs.com>
    Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

commit e8b6eea
Author: shannonbux <32467162+shannonbux@users.noreply.github.com>
Date:   Mon May 11 10:37:30 2020 -0700

    fixed capitalization

commit f457912
Author: Diogo Capela <diogocapela@gmail.com>
Date:   Mon May 11 18:04:08 2020 +0100

    chore(showcase): Add Zona Digital to Gatsby Showcase (#23980)

    Co-authored-by: Capela <diogo.capela@mindera.com>
    Co-authored-by: Matt Kane <matt@gatsbyjs.com>

commit eb0f0d8
Author: Mike Dane <mikedane94@gmail.com>
Date:   Tue May 12 02:42:34 2020 +1000

    removed space on bootstrap finished time (#23925)

    Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

commit c7e952b
Author: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Date:   Mon May 11 17:39:08 2020 +0100

    chore: update www (#23971)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>

commit 224e84e
Author: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Date:   Mon May 11 17:38:30 2020 +0100

    fix: update starters and examples (#23972)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>

commit 7b74535
Author: Raz Lifshitz <30860151+razrez@users.noreply.github.com>
Date:   Mon May 11 19:13:43 2020 +0300

    Update sites.yml (#23938)

    * Update sites.yml

    Added ofrilifshitz.com to sites.yml

    * chore: format

    Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

commit e5a2461
Author: Matt Kane <matt@gatsbyjs.com>
Date:   Mon May 11 17:11:20 2020 +0100

    Add redirect for Vercel docs (#23979)

commit 441f32a
Author: Christian Rackerseder <git@echooff.de>
Date:   Mon May 11 17:27:38 2020 +0200

    Rename ZEIT Now to Vercel (#23961)

commit 7a23392
Author: Dede Hamzah <dehamzah@users.noreply.github.com>
Date:   Mon May 11 21:45:23 2020 +0700

    fix: handle nullish announcementRef to fix client side redirect error (#23956)

commit 49dfc6f
Author: Gabriel Ramos <gabriel.luiz.ramos@gmail.com>
Date:   Mon May 11 10:42:17 2020 -0300

    chore(gatsby): Convert jobsV2 reducer to TS (#23708)

    * chore(ts): convert jobsv2 reducer to TS

    * Update packages/gatsby/src/redux/reducers/jobsv2.ts

    Co-authored-by: Ward Peeters <ward@coding-tech.com>

    * refactor(pr): refactor based on PR comments

    * Update packages/gatsby/src/redux/reducers/jobsv2.ts

    Co-authored-by: Ward Peeters <ward@coding-tech.com>

    * fix(lint): fix lint error

    * add result typing to jobs-manager

    Co-authored-by: Ward Peeters <ward@coding-tech.com>

commit c5144ea
Author: Rajeesh C V <cvrajeesh@gmail.com>
Date:   Mon May 11 18:53:21 2020 +0530

    chore(docs): add Clodui deployment guide (#23587)

    * chore(docs): add Clodui deployment guide

    * update Clodui deployment doc with review comments

    * Update docs/docs/deploying-to-clodui.md

    * Update docs/docs/deploying-to-clodui.md

    * Update docs/docs/deploying-to-clodui.md

    * Update docs/docs/deploying-to-clodui.md

    * chore: format

    Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com>
    Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

commit c34bd66
Author: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date:   Mon May 11 12:54:24 2020 +0200

    chore(release): Publish

     - gatsby-admin@0.1.22
     - gatsby-cli@2.12.16
     - gatsby-recipes@0.1.15
     - gatsby-theme-blog-core@1.4.22
     - gatsby-theme-blog@1.5.22
     - gatsby-theme-notes@1.3.22
     - gatsby-theme-ui-preset@0.0.12
     - gatsby@2.21.22

commit f7dc43f
Author: Albert Lash <31164347+albertlincoln@users.noreply.github.com>
Date:   Mon May 11 11:52:59 2020 +0100

    fix(gatsby-cli): don't fail when using `--log-pages` and/or `--write-to-file` (#23951)

    * Adding new cli options for page optimization

    * prettier

    * make them hidden, add some description as well as comment about why they are hidden

    Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

commit 88056f0
Author: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date:   Mon May 11 01:17:47 2020 +0200

    fix(www): allow to tree shake lodash-es (#23967)

commit e267ca0
Author: Andrés Bedoya <Angelfire@users.noreply.github.com>
Date:   Sat May 9 15:51:42 2020 -0500

    Update deploying-to-zeit-now.md (#23946)

* Add hicat to do syntax highlighting

* fix

* Fix

* Add hicat

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",

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} />