feat(fs.dev): Added syntax highlighting

package.json

@@ -114,8 +114,9 @@
   },
   "version": "0.0.0",
   "dependencies": {
+    "autoprefixer": "^10.4.0",
     "jsonfile": "^6.1.0",
-    "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.1"
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.7"
   }
 }

packages/freesewing.dev/package.json

@@ -16,12 +16,14 @@
     "@mdx-js/mdx": "^2.0.0-rc.2",
     "@mdx-js/react": "^2.0.0-rc.2",
     "@mdx-js/runtime": "next",
+    "@tailwindcss/typography": "^0.5.0",
     "daisyui": "^1.16.2",
     "lodash.get": "^4.4.2",
     "lodash.orderby": "^4.6.0",
     "lodash.set": "^4.3.2",
     "next": "latest",
     "react-swipeable": "^6.2.0",
+    "rehype-highlight": "^5.0.1",
     "remark-gfm": "^3.0.1",
     "remark-jargon": "^2.19.5"
   },

packages/freesewing.dev/pages/[...mdxslug].js

@@ -35,6 +35,7 @@ import mdxLoader from 'shared/mdx/loader'
  */
 import MdxWrapper from 'shared/components/wrappers/mdx'
 
+import ThemePicker from 'shared/components/theme-picker.js'
 
 /*
  * The NextJS page object
@@ -55,6 +56,7 @@ const MdxPage = props => {
    */
   return (
     <Page app={app} {...props.page}>
+      <ThemePicker app={app} />
       <MdxWrapper mdx={props.mdx} />
     </Page>
   )

packages/freesewing.shared/components/mdx/highlight.js

@@ -0,0 +1,26 @@
+const names = {
+  js: 'javascript'
+}
+
+const Highlight = ({
+  children=[],
+  className='language-js',
+  lang='js'
+}) => {
+
+  const language = lang
+    ? lang
+    : (className === '') ? 'js' : className.split('-').pop()
+
+  return (
+    <div className="hljs my-4 not-prose">
+      <div className={`text-xs uppercase font-bold text-info mt-1 text-center border-b border-info border-opacity-20 py-1 mb-2 lg:text-sm`}>
+        {names[language] ? names[language] : language}
+      </div>
+      <pre className="language-js hljs text-base lg:text-lg">{children}</pre>
+    </div>
+  )
+}
+
+export default Highlight
+

packages/freesewing.shared/components/mdx/youtube.js

@@ -0,0 +1,31 @@
+const YouTube = (props) => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        paddingBottom: '56.25%' /* 16:9 */,
+        paddingTop: 25,
+        height: 0,
+      }}
+    >
+      <iframe
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+        }}
+        src={
+          props.playlist
+            ? `https://www.youtube.com/embed/videoseries?list=${props.id}`
+            : `https://www.youtube.com/embed/${props.id}?${props.params || ''}`
+        }
+        frameBorder="0"
+      />
+    </div>
+  )
+}
+
+export default YouTube
+

packages/freesewing.shared/components/popout.js

@@ -0,0 +1,35 @@
+import Icon from "shared/components/icon"
+import { translator } from 'shared/lib/i18n'
+
+const colors = {
+  note: 'accent',
+  tip: 'secondary',
+  warning: 'error',
+  fixme: 'warning',
+  link: 'info',
+  related: 'info',
+  none: '',
+}
+
+const Popout = (props) => {
+  const t = translator(props.t)
+  let type = 'none'
+  for (const t in colors) {
+    if (props[t]) type = t
+  }
+  const color = colors[type]
+
+  return (
+    <div className="relative my-4">
+      <div className={`
+        border-l-4 px-8 py-2 prose lg:prose-lg bg-opacity-5 shadow border-${color} bg-${color}`}>
+        <div className={`font-bold opacity-50 uppercase`}>
+          {t(type)}
+        </div>
+        <div className="py-1 first:mt-0 popout-content">{props.children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default Popout

packages/freesewing.shared/components/wrappers/mdx.js

@@ -10,7 +10,25 @@ import { run } from '@mdx-js/mdx'
 import * as runtime from 'react/jsx-runtime.js'
 
 // Components that are available in all MDX
-import * as dfltComponents from 'shared/components/elements/in-mdx'
+import { list as designs } from '@freesewing/pattern-info'
+import Popout from '../popout'
+import Highlight from '../mdx/highlight'
+import YouTube from '../mdx/youtube'
+//import * as dfltComponents from 'shared/components/elements/in-mdx'
+
+const DesignIterator = props => {
+  const Component = props.component
+  return designs.map(design => <Component design={design} />)
+}
+
+const Figure = props => (
+  <figure>
+    <img src={props?.src} alt={props?.alt || ''} title={props?.title || ''} className="shadow-md"/>
+    <figcaption className="text-center italic">{props.title || 'FIXME: No title property set on this image'}</figcaption>
+  </figure>
+)
+
+const Example = props => <p>FIXME: Example still todo</p>
 
 const MdxWrapper = ({mdx, components={}}) => {
 
@@ -22,6 +40,24 @@ const MdxWrapper = ({mdx, components={}}) => {
     })()
   }, [mdx])
 
+  const dfltComponents = {
+    Example,
+    Fixme: props => <Popout {...props} t={t} lang={lang} fixme />,
+    Note: props => <Popout {...props} t={t} lang={lang} note />,
+    Tip: props => <Popout {...props} t={t} lang={lang} tip />,
+    Related: props => <Popout {...props} t={t} lang={lang} related />,
+    Link: props => <Popout {...props} t={t} lang={lang} link />,
+    Warning: props => <Popout {...props} t={t} lang={lang} warning />,
+    YouTube,
+    // Tailwind typography plugin overrides
+    h5: props => <h5 className="font-bold my-2">{props.children}</h5>,
+    h6: props => <h6 className="font-bold my-2 text-sm">{props.children}</h6>,
+    pre: props => <Highlight {...props} />,
+    //code: props => <Highlight {...props} tag='code'/>,
+    DesignIterator,
+  }
+
+
   /*
    * We use some default components that are available
    * everywhere in MDX, but we also accept passing in
@@ -35,7 +71,11 @@ const MdxWrapper = ({mdx, components={}}) => {
   // React component for MDX content
   const MdxContent = mdxModule ? mdxModule.default : Fragment
 
-  return <MdxContent components={allComponents}/>
+  return (
+    <div className="prose lg:prose-xl prose-pre:bg-primary">
+      <MdxContent components={allComponents}/>
+    </div>
+  )
 }
 
 export default MdxWrapper

packages/freesewing.shared/config/tailwind.config.js

@@ -9,6 +9,10 @@ module.exports = {
     './pages/**/*.js',
     '../freesewing.shared/components/**/*.js',
   ],
+  plugins: [
+    require('daisyui'),
+    require('@tailwindcss/typography'),
+  ],
   daisyui: {
     styled: true,
     themes: [ themes ],
@@ -22,7 +26,4 @@ module.exports = {
       colors: require('daisyui/colors'),
     },
   },
-  plugins: [
-    require('daisyui'),
-  ],
 }

packages/freesewing.shared/lib/i18n.js

@@ -0,0 +1 @@
+export const translator = function(t) { return t ? t : (x) => x }

packages/freesewing.shared/mdx/loader.js

@@ -5,6 +5,12 @@ import path from 'path'
 // MDX compiler
 import { compile } from '@mdx-js/mdx'
 
+// Remark plugins we want to use
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+// Rehype plugins we want to use
+import rehypeHighlight from 'rehype-highlight'
+
 /*
  * Summary: Loads markdown from disk and compiles it as MDX.
  *
@@ -24,7 +30,16 @@ const mdxLoader = async (language, site, slug) => {
   )
 
   const mdx = String(
-    await compile(md, { outputFormat: 'function-body' })
+    await compile(md, {
+      outputFormat: 'function-body',
+      remarkPlugins: [
+        remarkFrontmatter,
+        remarkGfm,
+      ],
+      rehypePlugins: [
+        rehypeHighlight
+      ],
+    })
   )
 
   return mdx

packages/freesewing.shared/package.json

@@ -12,8 +12,10 @@
     "serve": "pm2 start npm --name 'freesewing.dev' -- run start"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.0",
     "daisyui": "^1.16.2",
     "lodash.orderby": "^4.6.0",
+    "rehype-highlight": "^5.0.1",
     "remark-extract-frontmatter": "^3.2.0",
     "remark-frontmatter": "^4.0.1",
     "to-vfile": "^7.2.2",

packages/freesewing.shared/styles/code.css

@@ -0,0 +1,135 @@
+/*
+ * CSS file for highlightjs, with support for (DaisyUI) themes
+ *
+ * Do not edit this file, edit the theme configuration instead
+ */
+
+/* The div wrapping the code block */
+div.hljs {
+  background: var(--code-background-color);
+  border-color: var(--code-border-color);
+  border-width: var(--code-border-width);
+  border-style: var(--code-border-style);
+  padding: var(--code-outer-padding);
+  color: var(--code-color);
+  border-radius: var(--code-border-radius);
+}
+
+/* The code block inside the wrapping div */
+div.hljs > pre {
+  background: var(--code-bg);
+  color: var(--code-color);
+  padding: var(--code-inner-padding);
+  font-family: var(--code-font-family);
+}
+
+/*
+ * Fix for the tailwind typography plugin (aka prose) that
+ * adds padding to code that makes it look like there's a
+ * extra space on the first line
+ */
+div.hljs > pre > code { padding: 0; }
+
+/*
+ * CSS for highlighted code: keyword
+ */
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--code-color-keyword);
+  font-weight: var(--code-font-weight-keyword);
+}
+
+/*
+ * CSS for highlighted code: entity
+ */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--code-color-entity);
+  font-weight: var(--code-font-weight-entity);
+}
+
+/*
+ * CSS for highlighted code: constant
+ */
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: var(--code-color-constant);
+}
+
+/*
+ * CSS for highlighted code: string
+ */
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  color: var(--code-color-string);
+  font-style: var(--code-font-style-string);
+}
+
+/*
+ * CSS for highlighted code: variable
+ */
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--code-color-variable);
+}
+
+/*
+ * CSS for highlighted code: comment
+ */
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  color: var(--code-color-comment);
+}
+
+/*
+ * CSS for highlighted code: tag
+ */
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: var(--code-color-tag);
+}
+
+/*
+ * CSS for highlighted code: property
+ */
+.hljs-property {
+  color: var(--code-color-property);
+  font-weight: var(--code-font-weight-property);
+}
+
+/*
+ * CSS for highlighted code: other
+ */
+.hljs-addition,
+.hljs-bullet,
+.hljs-char.escape_,
+.hljs-deletion,
+.hljs-emphasis,
+.hljs-link,
+.hljs-params,
+.hljs-punctuation,
+.hljs-section,
+.hljs-strong,
+.hljs-subst,
+.hljs-tag {
+  /* Currently not using these */
+}

packages/freesewing.shared/styles/globals.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import './code.css';
 
 details { user-select: none; }
 details > summary > svg.details-toggle {
@@ -21,3 +22,4 @@ summary::-webkit-details-marker {
   display: none;
 }
 
+

packages/freesewing.shared/themes/bureaucrats/index.js

@@ -34,6 +34,29 @@ module.exports = {
     '--rounded-box': '2px',
     '--rounded-btn': '2px',
 
+    '--code-background-color': colors.blue['800'],
+    '--code-border-color': colors.blue['900'],
+    '--code-color': colors.blue['100'],
+    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+    '--code-border-radius': '0',
+    '--code-border-style': 'solid',
+    '--code-border-width': 15,
+    '--code-outer-padding': '0 0.5rem',
+    '--code-inner-padding': '1rem',
+    '--code-color-keyword': colors.neutral['50'],
+    '--code-font-weight-keyword': 'bold',
+    '--code-color-entity': colors.neutral['50'],
+    '--code-font-weight-entity': 'bold',
+    '--code-color-constant': colors.blue['300'],
+    '--code-color-string': colors.sky['300'],
+    '--code-font-style-string': 'italic',
+    '--code-color-variable': colors.blue['300'],
+    '--code-color-comment': colors.blue['400'],
+    '--code-color-tag': colors.blue['100'],
+    '--code-color-property': colors.blue['300'],
+    '--code-font-weight-property': 'bold',
+
+
     '--pattern-fabric': colors.neutral['700'],
     '--pattern-lining': colors.emerald['500'],
     '--pattern-interfacing': colors.neutral['400'],
@@ -42,14 +65,5 @@ module.exports = {
     '--pattern-mark': colors.blue['500'],
     '--pattern-contrast': colors.pink['500'],
     '--pattern-note': colors.violet['500'],
-
-    ".mdx.prose a" : {
-      color: colors.blue['600'],
-      'text-decoration': 'underline',
-    },
-    ".mdx.prose a:hover" : {
-      color: colors.blue['500'],
-      'text-decoration': 'underline',
-    },
   }
 }

packages/freesewing.shared/themes/dark/index.js

@@ -31,6 +31,28 @@ module.exports = {
     'warning': colors.amber['500'],
     'error': colors.red['400'],
 
+    '--code-background-color': colors.neutral['900'],
+    '--code-border-color': colors.neutral['800'],
+    '--code-color': colors.neutral['300'],
+    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+    '--code-border-radius': '0.5rem',
+    '--code-border-style': 'solid',
+    '--code-border-width': 2,
+    '--code-outer-padding': '0 0.5rem',
+    '--code-inner-padding': '1rem',
+    '--code-color-keyword': colors.pink['400'],
+    '--code-font-weight-keyword': 'bold',
+    '--code-color-entity': colors.violet['400'],
+    '--code-font-weight-entity': 'bold',
+    '--code-color-constant': colors.lime['300'],
+    '--code-color-string': colors.sky['300'],
+    '--code-font-style-string': 'italic',
+    '--code-color-variable': colors.indigo['300'],
+    '--code-color-comment': colors.neutral['600'],
+    '--code-color-tag': colors.green['600'],
+    '--code-color-property': colors.yellow['200'],
+    '--code-font-weight-property': 'bold',
+
     '--pattern-fabric': colors.neutral['300'],
     '--pattern-lining': colors.emerald['700'],
     '--pattern-interfacing': colors.neutral['500'],
@@ -39,5 +61,6 @@ module.exports = {
     '--pattern-mark': colors.blue['700'],
     '--pattern-contrast': colors.pink['600'],
     '--pattern-note': colors.violet['600'],
+
   }
 }

packages/freesewing.shared/themes/hax0r/index.js

@@ -33,6 +33,36 @@ module.exports = {
 
     '--rounded-btn': '0',
 
+    '--code-background-color': '#002407',
+    '--code-border-color': colors.lime['900'],
+    '--code-color': colors.lime['600'],
+    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+    '--code-border-radius': 0,
+    '--code-border-style': 'solid',
+    '--code-border-width': 1,
+    '--code-outer-padding': '0 0.5rem',
+    '--code-inner-padding': '1rem',
+    '--code-color-keyword': colors.lime['400'],
+    '--code-font-weight-keyword': 'bold',
+    '--code-color-entity': colors.lime['400'],
+    '--code-font-weight-entity': 'bold',
+    '--code-color-constant': colors.lime['200'],
+    '--code-color-string': colors.lime['200'],
+    '--code-font-style-string': 'italic',
+    '--code-color-variable': colors.lime['400'],
+    '--code-color-comment': colors.lime['600'],
+    '--code-color-tag': colors.lime['400'],
+    '--code-color-property': colors.lime['200'],
+    '--code-font-weight-property': 'bold',
+
+    '--pattern-fabric': colors.neutral['700'],
+    '--pattern-lining': colors.emerald['500'],
+    '--pattern-interfacing': colors.neutral['400'],
+    '--pattern-canvas': colors.amber['600'],
+    '--pattern-various': colors.red['500'],
+    '--pattern-mark': colors.blue['500'],
+    '--pattern-contrast': colors.pink['500'],
+    '--pattern-note': colors.violet['500'],
     '--pattern-fabric': colors.neutral['700'],
     '--pattern-lining': colors.emerald['500'],
     '--pattern-interfacing': colors.neutral['400'],

packages/freesewing.shared/themes/kindergarten/index.js

@@ -33,6 +33,27 @@ module.exports = {
 
     '--rounded-btn': '10rem',
 
+    '--code-background-color': colors.emerald['900'],
+    '--code-border-color': colors.yellow['400'],
+    '--code-color': colors.neutral['200'],
+    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+    '--code-border-radius': '1.5rem',
+    '--code-border-style': 'dashed',
+    '--code-border-width': 4,
+    '--code-outer-padding': '0 0.5rem',
+    '--code-inner-padding': '1rem',
+    '--code-color-keyword': colors.yellow['400'],
+    '--code-font-weight-keyword': 'bold',
+    '--code-color-entity': colors.pink['300'],
+    '--code-font-weight-entity': 'bold',
+    '--code-color-constant': colors.lime['300'],
+    '--code-color-string': colors.sky['300'],
+    '--code-font-style-string': 'italic',
+    '--code-color-variable': colors.indigo['300'],
+    '--code-color-comment': colors.neutral['600'],
+    '--code-color-tag': colors.green['600'],
+    '--code-color-property': colors.yellow['200'],
+    '--code-font-weight-property': 'bold',
     '--pattern-fabric': colors.neutral['700'],
     '--pattern-lining': colors.emerald['500'],
     '--pattern-interfacing': colors.neutral['400'],

packages/freesewing.shared/themes/light/index.js

@@ -40,7 +40,7 @@ module.exports = {
     */
 
     // base-100: The default background color
-    'base-100': colors.neutral['100'],
+    'base-100': colors.neutral['50'],
     // base-200: A slightly different background color, used for hovers and so on
     'base-200': colors.neutral['200'],
     // base-300: A shade midway between dark and light
@@ -81,7 +81,7 @@ module.exports = {
 
     // info: Used rarely, can be another color best somewhat neutral looking
     // and should work with the default text color
-    'info': colors.amber['300'],
+    'info': colors.violet['400'],
     // success: Used rarely, but if it is it's in notifications indicating success
     // Typically some shade of green
     'success': colors.green['500'],
@@ -121,6 +121,39 @@ module.exports = {
     // focus ring offset size for button and inputs
     '--focus-ring-offset': '2px',
 
+    /* CODE HIGHLIGHTING COLORS
+    *
+    * These are variables to style highlighted code blocks.
+    *
+    * Specifically this first set applies to the wrapper around
+    * the highlighted code.
+    * The names should (hopefully) speak for themselves
+    */
+    '--code-background-color': colors.neutral['100'],
+    '--code-border-color': colors.neutral['300'],
+    '--code-color': colors.neutral['900'],
+    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+    '--code-border-radius': '0.5rem',
+    '--code-border-style': 'solid',
+    '--code-border-width': 1,
+    '--code-outer-padding': '0 0.5rem',
+    '--code-inner-padding': '1rem',
+    /*
+     * These variables are used to style the highlighted tokesn themselves
+     */
+    '--code-color-keyword': colors.pink['500'],
+    '--code-font-weight-keyword': 'bold',
+    '--code-color-entity': colors.violet['500'],
+    '--code-font-weight-entity': 'bold',
+    '--code-color-constant': colors.lime['600'],
+    '--code-color-string': colors.sky['600'],
+    '--code-font-style-string': 'italic',
+    '--code-color-variable': colors.indigo['600'],
+    '--code-color-comment': colors.neutral['600'],
+    '--code-color-tag': colors.green['600'],
+    '--code-color-property': 'inherit',
+    '--code-font-weight-property': 'bold',
+
     /* FREESEWING PATTERN COLORS
     *
     * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
@@ -143,20 +176,5 @@ module.exports = {
     // Color for noting things on a pattern
     '--pattern-note': colors.violet['500'],
 
-    /* ADVANCED
-    *
-    * You can override CSS this way, but ask yourself: why?
-    *
-    * One thing we do is take care of links in MDX content.
-    * Since this content is styled by the TailwindCSS Typography
-    * plugin, it won't follow the theme link styling.
-    */
-    ".mdx.prose a" : {
-      color: colors.violet['500'],
-      'text-decoration': 'none',
-    },
-    ".mdx.prose a:hover" : {
-      color: colors.violet['400'],
-    },
   }
 }

yarn.lock

@@ -3737,6 +3737,16 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tailwindcss/typography@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.0.tgz#47886ec46ac41e1211d24fea05301046d9b30906"
+  integrity sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    lodash.uniq "^4.5.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -10446,6 +10456,14 @@ hast-util-is-element@^1.1.0:
   resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz#3b3ed5159a2707c6137b48637fbfe068e175a425"
   integrity sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==
 
+hast-util-is-element@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-2.1.2.tgz#fc0b0dc7cef3895e839b8d66979d57b0338c68f3"
+  integrity sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+
 hast-util-sanitize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-3.0.0.tgz#4cdc26b2991b3bf90ee74b5c932e14d907549312"
@@ -10504,6 +10522,15 @@ hast-util-to-html@^7.0.0:
     unist-util-is "^4.0.0"
     xtend "^4.0.0"
 
+hast-util-to-text@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-3.1.1.tgz#b7699a75f7a61af6e0befb67660cd78460d96dc6"
+  integrity sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-is-element "^2.0.0"
+    unist-util-find-after "^4.0.0"
+
 hast-util-whitespace@^1.0.0, hast-util-whitespace@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz#e4fe77c4a9ae1cb2e6c25e02df0043d0164f6e41"
@@ -10529,6 +10556,11 @@ highlight.js@^10.4.1:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+highlight.js@~11.3.0:
+  version "11.3.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
+  integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -13283,6 +13315,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -13473,6 +13510,15 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+lowlight@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-2.4.1.tgz#59ea891967ec83395f2d61de8cbfe3fa9cd401c7"
+  integrity sha512-mQkAG0zGQ9lcYecEft+hl9uV1fD6HpURA83/TYrsxKvb8xX2mfyB+aaV/A/aWmhhEcWVzr9Cc+l/fvUYfEUumw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    fault "^2.0.0"
+    highlight.js "~11.3.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -17319,7 +17365,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.6:
+postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.7:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz#48404830a635113a71fd79397de8209ed05a66fc"
   integrity sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==
@@ -17414,6 +17460,15 @@ postcss@^8.1.6, postcss@^8.4.4:
     picocolors "^1.0.0"
     source-map-js "^1.0.1"
 
+postcss@^8.4.5:
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
+  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+  dependencies:
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.1"
+
 prebuild-install@^6.1.1:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-6.1.4.tgz#ae3c0142ad611d58570b89af4986088a4937e00f"
@@ -18790,6 +18845,17 @@ regjsparser@^0.7.0:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-highlight@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-highlight/-/rehype-highlight-5.0.1.tgz#86b4e1d77589cbd25fe7016319711bbfb412b033"
+  integrity sha512-OyKw8dFiZnuWhI+BnQCVD9LT8hDRqUszQPGtzMaVioWgGCR5UwhPn5CPyW1cs776VwQuA8rLrKTbPI/fKCpKHA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    hast-util-to-text "^3.0.0"
+    lowlight "^2.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
 rehype-minify-whitespace@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/rehype-minify-whitespace/-/rehype-minify-whitespace-4.0.5.tgz#5b4781786116216f6d5d7ceadf84e2489dd7b3cd"
@@ -21398,6 +21464,33 @@ tailwindcss@^3.0.1:
     resolve "^1.20.0"
     tmp "^0.2.1"
 
+tailwindcss@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.7.tgz#15936881f042a7eb8d6f2b6a454bac9f51181bbd"
+  integrity sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==
+  dependencies:
+    arg "^5.0.1"
+    chalk "^4.1.2"
+    chokidar "^3.5.2"
+    color-name "^1.1.4"
+    cosmiconfig "^7.0.1"
+    detective "^5.2.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.7"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    normalize-path "^3.0.0"
+    object-hash "^2.2.0"
+    postcss-js "^3.0.3"
+    postcss-load-config "^3.1.0"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.7"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.20.0"
+    tmp "^0.2.1"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -22251,6 +22344,14 @@ unist-builder@^3.0.0:
   dependencies:
     "@types/unist" "^2.0.0"
 
+unist-util-find-after@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz#1101cebf5fed88ae3c6f3fa676e86fd5772a4f32"
+  integrity sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
 unist-util-generated@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"