Remove back-ticks from inline code blocks (#4925)

* local nav and heading collection init

* styles for TOC

* remove hardcoded export and meta prop instantiation

* node insertion over node augmentation

* cleaning up code

* remove plugin, use React to coerce a heading list instead

* fix types

* typescript types

* fix ref issues

* remove logs

* Apply suggestions from code review

Fighting prettier

* remove unist-utils-visit dep

* inline-code-block

* update inline code

* add types

* add monospaced fonts and a background color to inline code blocks

* changeset

* fix dependency issue

.changeset/odd-seas-glow.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/website': patch
+---
+
+Removed backticks from inline code blocks in mdx, and made minor styling changes.

docs-next/components/Code.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx, css } from '@keystone-ui/core';
 import Highlight, { Language, Prism } from 'prism-react-renderer';
 import theme from '../lib/prism-theme';
 
@@ -32,3 +34,24 @@ export const Code = ({ children, className }: { children: string; className: any
     </Highlight>
   );
 };
+
+export const InlineCode = ({ children }: { children: ReactNode }) => {
+  return (
+    <code
+      className="bg-gray-100 py-1 px-1.5 m-0 rounded-sm"
+      css={css`
+        &::before {
+          display: none;
+        }
+        &::after {
+          display: none;
+        }
+        font-size: 85% !important;
+        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+        color: #24292e !important;
+      `}
+    >
+      {children}
+    </code>
+  );
+};

docs-next/components/Page.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { useRef, useState } from 'react';
 import { getHeadings, Heading } from '../lib/getHeadings';
 import { jsx } from '@keystone-ui/core';
-import { Code } from '../components/Code';
+import { Code, InlineCode } from '../components/Code';
 import { H1, H2, H3, H4, H5, H6 } from '../components/Heading';
 import { MDXProvider } from '@mdx-js/react';
 import cx from 'classnames';
@@ -128,6 +128,7 @@ export const components = {
   h4: H4,
   h5: H5,
   h6: H6,
+  inlineCode: InlineCode,
 };
 
 export const Markdown = ({ children }: { children: ReactNode }) => {