From 85719515481fe7f24ddd6b4ff50178ccfe1bfa98 Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Fri, 14 Oct 2022 11:25:27 -0400
Subject: [PATCH] =?UTF-8?q?*=20feat:=20=F0=9F=8E=B8=20Add=20handlebars=20r?=
 =?UTF-8?q?egistration=20for=20syntax=20highlighting=20(#1378)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Add handlebars registration for syntax highlighting

* style: 💄 Use handlebars format

* style: 💄 Reformat mdx files

* style: 💄 Fix broken formatting from merge
---
 addons/rose/.storybook/preview.js             |  5 +
 .../rose/anonymous/index.stories.mdx          |  2 +-
 .../components/rose/badge/index.stories.mdx   |  9 +-
 .../components/rose/button/index.stories.mdx  |  2 +-
 .../rose/card/link/index.stories.mdx          | 12 +--
 .../components/rose/cards/index.stories.mdx   |  2 +-
 .../rose/code-editor/index.stories.mdx        |  4 +-
 .../rose/dialog/cover/index.stories.mdx       |  2 +-
 .../components/rose/dialog/index.stories.mdx  |  2 +-
 .../rose/dropdown/index.stories.mdx           | 91 +++++++++----------
 .../components/rose/footer/index.stories.mdx  |  8 +-
 .../rose/form/actions/index.stories.mdx       | 13 ++-
 .../form/checkbox/group/index.stories.mdx     |  4 +-
 .../rose/form/checkbox/index.stories.mdx      |  4 +-
 .../rose/form/errors/index.stories.mdx        |  2 +-
 .../form/errors/message/index.stories.mdx     |  2 +-
 .../rose/form/fieldset/index.stories.mdx      |  2 +-
 .../rose/form/helper-text/index.stories.mdx   |  8 +-
 .../components/rose/form/index.stories.mdx    |  2 +-
 .../rose/form/input/index.stories.mdx         |  4 +-
 .../rose/form/label/index.stories.mdx         |  2 +-
 .../rose/form/radio/card/index.stories.mdx    |  4 +-
 .../rose/form/radio/group/index.stories.mdx   |  6 +-
 .../rose/form/radio/radio/index.stories.mdx   |  4 +-
 .../rose/form/select/index.stories.mdx        |  2 +-
 .../rose/form/textarea/index.stories.mdx      |  2 +-
 .../components/rose/frame/index.stories.mdx   |  2 +-
 .../components/rose/header/index.stories.mdx  |  2 +-
 .../components/rose/icon/index.stories.mdx    |  2 +-
 .../rose/layout/centered/index.stories.mdx    |  2 +-
 .../rose/layout/global/index.stories.mdx      |  2 +-
 .../rose/layout/page/index.stories.mdx        |  2 +-
 .../rose/layout/sidebar/index.stories.mdx     |  2 +-
 .../rose/link-button/index.stories.mdx        | 16 ++--
 .../rose/list/key-value/index.stories.mdx     | 21 ++---
 .../components/rose/message/index.stories.mdx | 21 ++---
 .../rose/nav/breadcrumbs/index.stories.mdx    |  6 +-
 .../rose/nav/link/index.stories.mdx           |  4 +-
 .../rose/nav/sidebar/sidebar.stories.mdx      |  2 +-
 .../rose/nav/tabs/index.stories.mdx           |  8 +-
 .../rose/notification/index.stories.mdx       |  2 +-
 .../rose/separator/index.stories.mdx          |  2 +-
 .../components/rose/table/index.stories.mdx   | 20 ++--
 .../components/rose/toolbar/index.stories.mdx |  2 +-
 .../rose/toolbar/info/index.stories.mdx       |  2 +-
 addons/rose/package.json                      |  2 +
 yarn.lock                                     | 48 +++++++---
 47 files changed, 196 insertions(+), 174 deletions(-)
 create mode 100644 addons/rose/.storybook/preview.js

diff --git a/addons/rose/.storybook/preview.js b/addons/rose/.storybook/preview.js
new file mode 100644
index 000000000..e4fa8bfa0
--- /dev/null
+++ b/addons/rose/.storybook/preview.js
@@ -0,0 +1,5 @@
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
+
+// Registers and enables handlebars language support
+SyntaxHighlighter.registerLanguage('handlebars', handlebars);
diff --git a/addons/rose/addon/components/rose/anonymous/index.stories.mdx b/addons/rose/addon/components/rose/anonymous/index.stories.mdx
index dafcc180a..a8836c0a8 100644
--- a/addons/rose/addon/components/rose/anonymous/index.stories.mdx
+++ b/addons/rose/addon/components/rose/anonymous/index.stories.mdx
@@ -14,7 +14,7 @@ This component should not be instantiated directly.
 For example, layout components may yield an anonymous component to configure
 various layout regions:
 
-```htmlbars
+```handlebars
 <div ...attributes class='rose-layout-global'>
   {{yield
     (hash
diff --git a/addons/rose/addon/components/rose/badge/index.stories.mdx b/addons/rose/addon/components/rose/badge/index.stories.mdx
index e96f7a213..5fcf69329 100644
--- a/addons/rose/addon/components/rose/badge/index.stories.mdx
+++ b/addons/rose/addon/components/rose/badge/index.stories.mdx
@@ -12,10 +12,11 @@ When style definition isn't supplied, a default style will be supplied.
 
 Styles: outline, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline
 
-```html
-<Rose::Badge @style="outline" @icon="flight-icons/svg/org-16"
-  >Badge</Rose::Badge
->
+```handlebars
+<Rose::Badge
+  @style='outline'
+  @icon='flight-icons/svg/org-16'
+>Badge</Rose::Badge>
 ```
 
 <Preview>
diff --git a/addons/rose/addon/components/rose/button/index.stories.mdx b/addons/rose/addon/components/rose/button/index.stories.mdx
index 52dd04714..3af770a01 100644
--- a/addons/rose/addon/components/rose/button/index.stories.mdx
+++ b/addons/rose/addon/components/rose/button/index.stories.mdx
@@ -11,7 +11,7 @@ A simple button component that renders an HTML `<button>` element. May be used
 to trigger actions or to submit forms. Avoid using buttons as simple links to
 other routes. For accessibility, use links instead.
 
-```htmlbars
+```handlebars
 <Rose::Button @style='primary' @iconRight='flight-icons/svg/entry-point-16'>
   Action
 </Rose::Button>
diff --git a/addons/rose/addon/components/rose/card/link/index.stories.mdx b/addons/rose/addon/components/rose/card/link/index.stories.mdx
index 558184c45..03b63420c 100644
--- a/addons/rose/addon/components/rose/card/link/index.stories.mdx
+++ b/addons/rose/addon/components/rose/card/link/index.stories.mdx
@@ -8,13 +8,13 @@ import { text, select } from '@storybook/addon-knobs';
 
 Card link component wraps content with `LinkTo` component. Supports title and description.
 
-```html
+```handlebars
 <Rose::Card::Link
-  @title="Card title"
-  @description="Card description"
-  @id="resource_id_1234"
-  @icon="flight-icons/svg/org-16"
-  @route="about"
+  @title='Card title'
+  @description='Card description'
+  @id='resource_id_1234'
+  @icon='flight-icons/svg/org-16'
+  @route='about'
 />
 ```
 
diff --git a/addons/rose/addon/components/rose/cards/index.stories.mdx b/addons/rose/addon/components/rose/cards/index.stories.mdx
index 6ee6322e6..12c7688bb 100644
--- a/addons/rose/addon/components/rose/cards/index.stories.mdx
+++ b/addons/rose/addon/components/rose/cards/index.stories.mdx
@@ -56,7 +56,7 @@ A set of cards arranged side-by-side.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Cards as |cards|>
   <cards.link
     @route='index'
diff --git a/addons/rose/addon/components/rose/code-editor/index.stories.mdx b/addons/rose/addon/components/rose/code-editor/index.stories.mdx
index 74e5b6098..f3c5cf34b 100644
--- a/addons/rose/addon/components/rose/code-editor/index.stories.mdx
+++ b/addons/rose/addon/components/rose/code-editor/index.stories.mdx
@@ -9,8 +9,8 @@ import { hbs } from 'ember-cli-htmlbars';
 CodeEditor::fieldEditor is where the provided code is displayed with syntax highlighting.
 CodeEditor::toolbar is intended to go on top of the fieldEditor and provides a 'Copy code' button as well as other optional user-provided actions.
 
-```html
-<CodeEditor @codeValue="{{this.codeIWantToSee}}" as |c|>
+```handlebars
+<CodeEditor @codeValue={{this.codeIWantToSee}} as |c|>
   <c.toolbar />
   <c.fieldEditor />
 </CodeEditor>
diff --git a/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx
index 6be610c56..8f19dac38 100644
--- a/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dialog/cover/index.stories.mdx
@@ -30,7 +30,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Dialog::Cover>
   <:header>
     <h2>Cover Header</h2>
diff --git a/addons/rose/addon/components/rose/dialog/index.stories.mdx b/addons/rose/addon/components/rose/dialog/index.stories.mdx
index cce8fe2d9..4cc1ab027 100644
--- a/addons/rose/addon/components/rose/dialog/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dialog/index.stories.mdx
@@ -53,7 +53,7 @@ A dialog component with optional modal capabilities.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Dialog
   @modal={{true}}
   @dismiss={{@dismissFn}}
diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index c231cc15e..61be50ded 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -91,33 +91,32 @@ A simple dropdown component with support for links and buttons.
   </Story>
 </Preview>
 
-```html
-<Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
-  <dropdown.link @route="index">Menu item</dropdown.link>
-  <dropdown.link @route="about">Menu item</dropdown.link>
+```handlebars
+<Rose::Dropdown @text='Choose One&hellip;' as |dropdown|>
+  <dropdown.link @route='index'>Menu item</dropdown.link>
+  <dropdown.link @route='about'>Menu item</dropdown.link>
   <dropdown.button>Button menu item</dropdown.button>
   <dropdown.separator />
   <dropdown.section
-    @title="Dropdown Section Title"
-    @icon="flight-icons/svg/tag-16"
+    @title='Dropdown Section Title'
+    @icon='flight-icons/svg/tag-16'
   >
-    <dropdown.link @route="index">Menu item</dropdown.link>
+    <dropdown.link @route='index'>Menu item</dropdown.link>
   </dropdown.section>
 </Rose::Dropdown>
 ```
 
 Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
 
-```html
+```handlebars
 <Rose::Dropdown
-  @text="Choose One&hellip;"
-  style="float: right"
-  @dropdownRight="{{true}}"
-  as
-  |dropdown|
+  @text='Choose One&hellip;'
+  style='float: right'
+  @dropdownRight={{true}}
+  as |dropdown|
 >
-  <dropdown.link @route="index">Menu item</dropdown.link>
-  <dropdown.link @route="about">Menu item</dropdown.link>
+  <dropdown.link @route='index'>Menu item</dropdown.link>
+  <dropdown.link @route='about'>Menu item</dropdown.link>
   <dropdown.separator />
   <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
@@ -125,23 +124,22 @@ Dropdown content can be aligned to right edge of the component instead of the de
 
 Dropdown supports `danger` styling through `style` attribute.
 
-```html
-<Rose::Dropdown @text="Dropdown" as |dropdown|>
-  <dropdown.link @style="danger">Link - danger</dropdown.link>
-  <dropdown.button @style="danger">Button - danger</dropdown.button>
+```handlebars
+<Rose::Dropdown @text='Dropdown' as |dropdown|>
+  <dropdown.link @style='danger'>Link - danger</dropdown.link>
+  <dropdown.button @style='danger'>Button - danger</dropdown.button>
 </Rose::Dropdown>
 ```
 
 Dropdown indicator can be hidden using `showCaret` attribute.
 
-```html
+```handlebars
 <Rose::Dropdown
-  @showCaret="{{true}}"
-  @icon="flight-icons/svg/more-horizontal-16"
-  as
-  |dropdown|
+  @showCaret={{true}}
+  @icon='flight-icons/svg/more-horizontal-16'
+  as |dropdown|
 >
-  <dropdown.link @route="index">Menu item</dropdown.link>
+  <dropdown.link @route='index'>Menu item</dropdown.link>
   <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
 ```
@@ -149,43 +147,39 @@ Dropdown indicator can be hidden using `showCaret` attribute.
 Dropdowns also support radio buttons and checkboxes. Currently, radio buttons and checkboxes are the only supported
 form fields.
 
-```html
+```handlebars
 <Rose::Form as |form|>
-  <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
-    <Rose::Dropdown @text="Color" as |dropdown|>
+  <form.radioGroup @name='color' @selectedValue='red' as |radioGroup|>
+    <Rose::Dropdown @text='Color' as |dropdown|>
       <dropdown.item>
-        <radioGroup.radio @label="Red" @value="red" />
+        <radioGroup.radio @label='Red' @value='red' />
       </dropdown.item>
       <dropdown.item>
-        <radioGroup.radio @label="Green" @value="green" />
+        <radioGroup.radio @label='Green' @value='green' />
       </dropdown.item>
       <dropdown.item>
-        <radioGroup.radio @label="Blue" @value="blue" />
+        <radioGroup.radio @label='Blue' @value='blue' />
       </dropdown.item>
     </Rose::Dropdown>
   </form.radioGroup>
 </Rose::Form>
 ```
 
-```html
+```handlebars
 <Rose::Form as |form|>
-  <Rose::Dropdown @text="Items" @ignoreClickInside="{{true}}" as |dropdown|>
+  <Rose::Dropdown @text='Items' @ignoreClickInside={{true}} as |dropdown|>
     <Rose::Form::Checkbox::Group
-      @name="checkbox-group"
-      @items="{{this.items}}"
-      @selectedItems="{{this.selectedItems}}"
-      @onChange="{{fn"
-      this.onChange}}
-      as
-      |group|
+      @name='checkbox-group'
+      @items={{this.items}}
+      @selectedItems={{this.selectedItems}}
+      @onChange={{fn this.onChange}}
+      as |group|
     >
       <dropdown.item>
-        <group.checkbox
-          @label="{{group.item.name}}"
-          value="{{group.item.id}}"
-        />
+        <group.checkbox @label={{group.item.name}} value={{group.item.id}} />
       </dropdown.item>
     </Rose::Form::Checkbox::Group>
+
   </Rose::Dropdown>
 </Rose::Form>
 ```
@@ -230,8 +224,13 @@ form fields.
 
 Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
 
-```html
-<Rose::Dropdown @text="View details" @showCaret={{true}} @ignoreClickInside={{true}} as |dropdown|>
+```handlebars
+<Rose::Dropdown
+  @text='View details'
+  @showCaret={{true}}
+  @ignoreClickInside={{true}}
+  as |dropdown|
+>
   <dropdown.key-value>
     <:key>ID</:key>
     <:value>cl_nbv9375hLHs</:value>
diff --git a/addons/rose/addon/components/rose/footer/index.stories.mdx b/addons/rose/addon/components/rose/footer/index.stories.mdx
index 46f73c51a..541b860ca 100644
--- a/addons/rose/addon/components/rose/footer/index.stories.mdx
+++ b/addons/rose/addon/components/rose/footer/index.stories.mdx
@@ -9,13 +9,13 @@ import { text } from '@storybook/addon-knobs';
 
 A footer component that allows four distinct sections to be configured: brand, nav, and text.
 
-```html
+```handlebars
 <Rose::Footer as |footer|>
-  <footer.brand @logo="logo" @text="Product Name" />
+  <footer.brand @logo='logo' @text='Product Name' />
   <footer.text>Text</footer.text>
   <footer.nav as |nav|>
-    <nav.link @route="index">Section</nav.link>
-    <nav.link @href="index">Section</nav.link>
+    <nav.link @route='index'>Section</nav.link>
+    <nav.link @href='index'>Section</nav.link>
   </footer.nav>
 </Rose::Footer>
 ```
diff --git a/addons/rose/addon/components/rose/form/actions/index.stories.mdx b/addons/rose/addon/components/rose/form/actions/index.stories.mdx
index d2ea8c3a2..e6fa7099f 100644
--- a/addons/rose/addon/components/rose/form/actions/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/actions/index.stories.mdx
@@ -12,14 +12,13 @@ and cancel. Form actions should always be used in the context of a form element
 where the form has a submit action handler. The submit button does not directly
 support actions. The cancel button supports a cancel action.
 
-```html
+```handlebars
 <Rose::Form::Actions
-  @submitText="Save"
-  @cancelText="Cancel"
-  @showCancel="{{true}}"
-  @submitDisabled="{{false}}"
-  @cancel="(fn"
-  @cancel)
+  @submitText='Save'
+  @cancelText='Cancel'
+  @showCancel={{true}}
+  @submitDisabled={{false}}
+  @cancel={{@cancel}}
 />
 ```
 
diff --git a/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx
index adadfdf75..e0cff83e8 100644
--- a/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select, object } from '@storybook/addon-knobs';
 
 Renders a form checkboxfield group.
 
-```htmlbars
+```handlebars
 <Rose::Form::Checkbox::Group
   @name='checkbox-group'
   @items={{this.items}}
@@ -54,7 +54,7 @@ Renders a form checkboxfield group.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form::Checkbox::Group
   @name='checkbox-group'
   @items={{this.items}}
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
index eaed60356..fea017516 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a form input checkbox.
 
-```htmlbars
+```handlebars
 <Rose::Form::Checkbox
   @name='boolean-value'
   @label='Yes?'
@@ -73,7 +73,7 @@ Renders a form input checkbox.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form::Checkbox
   @name='boolean-value'
   @label='Yes?'
diff --git a/addons/rose/addon/components/rose/form/errors/index.stories.mdx b/addons/rose/addon/components/rose/form/errors/index.stories.mdx
index 275535200..660d469dd 100644
--- a/addons/rose/addon/components/rose/form/errors/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/errors/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 
 Use this component to display one or more error messages.
 
-```html
+```handlebars
 <Rose::Form::Errors as |errors|>
   <errors.message>An error message goes here.</errors.message>
   <errors.message>Another message goes here.</errors.message>
diff --git a/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx b/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
index 982a0b270..5da1b4ce4 100644
--- a/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
@@ -11,7 +11,7 @@ This component accepts block content describing a single error to the user.
 Normally this component would not be used directly, but rather in the context
 of the `Rose::Form::Errors` component.
 
-```html
+```handlebars
 <Rose::Form::Errors::Message>
   An error message goes here.
 </Rose::Form::Errors::Message>
diff --git a/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx b/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx
index c6e51cd94..1ff34c2e8 100644
--- a/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/fieldset/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a simple fieldset with title, description and body and an optional helperText
 
-```html
+```handlebars
 <Rose::Form::Fieldset @helperText={{helperText}}>
   <:title>Title</:title>
   <:description>Description</:description>
diff --git a/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx b/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
index 350e327bc..46b0dc0ce 100644
--- a/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
@@ -10,11 +10,11 @@ import { text, boolean } from '@storybook/addon-knobs';
 Displays helpful messages related to a form field. This component is used
 by form fields and should not be used directly.
 
-```html
+```handlebars
 <Rose::Form::HelperText
-  @id="helper-text-{{field.id}}"
-  @link="link"
-  @linkText="link text goes here"
+  @id='helper-text-{{field.id}}'
+  @link='link'
+  @linkText='link text goes here'
 >
   Helper text
 </Rose::Form::HelperText>
diff --git a/addons/rose/addon/components/rose/form/index.stories.mdx b/addons/rose/addon/components/rose/form/index.stories.mdx
index e9cf26d02..24ba72fec 100644
--- a/addons/rose/addon/components/rose/form/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/index.stories.mdx
@@ -79,7 +79,7 @@ and actions.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form
   @onSubmit={{this.submit}}
   @cancel={{this.cancel}}
diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx
index 526b01089..138078db9 100644
--- a/addons/rose/addon/components/rose/form/input/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a simple form input.
 
-```htmlbars
+```handlebars
 <Rose::Form::Input
   @type='email'
   @name='email'
@@ -27,7 +27,7 @@ Renders a simple form input.
 
 Or a fully contextual component without a wrapper, for maximum flexibility.
 
-```htmlbars
+```handlebars
 <Rose::Form::Input
   @contextual={{true}}
   @type='email'
diff --git a/addons/rose/addon/components/rose/form/label/index.stories.mdx b/addons/rose/addon/components/rose/form/label/index.stories.mdx
index c3b49e905..a673aa546 100644
--- a/addons/rose/addon/components/rose/form/label/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/label/index.stories.mdx
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 Renders a simple form label. This componet is used and yielded by form fields
 and should not be used directly.
 
-```htmlbars
+```handlebars
 <Rose::Form::Label @for='my-field-id'>
   Form Label
 </Rose::Form::Label>
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
index 04eea723c..9f7f4d008 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a form radiofield in a Wide format.
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Card
   @label='Yes'
   @error={{false}}
@@ -55,7 +55,7 @@ Renders a form radiofield in a Wide format.
 
 Renders a form radiofield in a tile format.
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Card
   @label='Yes'
   @error={{false}}
diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
index 8d7eff84c..a343ac1a5 100644
--- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a form radiofield group.
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Group
   @disabled={{false}}
   @name={{name}}
@@ -77,7 +77,7 @@ Renders a form radiofield group.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Group
   @disabled={{false}}
   @name={{name}}
@@ -181,7 +181,7 @@ Renders a form radiofield group.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Group
   @disabled={{false}}
   @name={{name}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 5fca3c42b..ba345a141 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
@@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a form radiofield.
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Radio
   @label='Yes'
   @error={{false}}
@@ -61,7 +61,7 @@ Renders a form radiofield.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Form::Radio::Radio
   @label='Yes'
   @error={{false}}
diff --git a/addons/rose/addon/components/rose/form/select/index.stories.mdx b/addons/rose/addon/components/rose/form/select/index.stories.mdx
index 1fbd2bc23..94370f204 100644
--- a/addons/rose/addon/components/rose/form/select/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a form select element.
 
-```htmlbars
+```handlebars
 <Rose::Form::Select
   @name='select-name'
   @value='green'
diff --git a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
index 166e651c8..c399bde43 100644
--- a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a simple form textarea.
 
-```htmlbars
+```handlebars
 <Rose::Form::Textarea
   @name='field'
   @value='Descriptive content'
diff --git a/addons/rose/addon/components/rose/frame/index.stories.mdx b/addons/rose/addon/components/rose/frame/index.stories.mdx
index c89b91677..9550bb9e8 100644
--- a/addons/rose/addon/components/rose/frame/index.stories.mdx
+++ b/addons/rose/addon/components/rose/frame/index.stories.mdx
@@ -30,7 +30,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Frame>
   <:header>
     <h2>Frame Header</h2>
diff --git a/addons/rose/addon/components/rose/header/index.stories.mdx b/addons/rose/addon/components/rose/header/index.stories.mdx
index cfcee8a5d..73fb12955 100644
--- a/addons/rose/addon/components/rose/header/index.stories.mdx
+++ b/addons/rose/addon/components/rose/header/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 A header component that allows three distinct sections to be configured: brand, nav, and utilities.
 
-```htmlbars
+```handlebars
 <Rose::Header as |header|>
   <header.brand @logo='logo' @text='Product Name' />
 
diff --git a/addons/rose/addon/components/rose/icon/index.stories.mdx b/addons/rose/addon/components/rose/icon/index.stories.mdx
index 83594031b..5481d6177 100644
--- a/addons/rose/addon/components/rose/icon/index.stories.mdx
+++ b/addons/rose/addon/components/rose/icon/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Renders a simple icon.
 
-```htmlbars
+```handlebars
 <Rose::Icon @name={{name}} @size={{size}} />
 ```
 
diff --git a/addons/rose/addon/components/rose/layout/centered/index.stories.mdx b/addons/rose/addon/components/rose/layout/centered/index.stories.mdx
index 25708bfea..3b869a097 100644
--- a/addons/rose/addon/components/rose/layout/centered/index.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/centered/index.stories.mdx
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
 
 A left and right centered layout/positioning component.
 
-```htmlbars
+```handlebars
 <Rose::Layout::Centered>
   Centered
 </Rose::Layout::Centere>
diff --git a/addons/rose/addon/components/rose/layout/global/index.stories.mdx b/addons/rose/addon/components/rose/layout/global/index.stories.mdx
index 38d6c8681..8f1d2a036 100644
--- a/addons/rose/addon/components/rose/layout/global/index.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/global/index.stories.mdx
@@ -8,7 +8,7 @@ import { hbs } from 'ember-cli-htmlbars';
 A top-level layout/positioning component that allows three distinct sections to
 be configured: header, body, and footer.
 
-```html
+```handlebars
 <Rose::Layout::Global as |layout|>
   <layout.header />
   <layout.body />
diff --git a/addons/rose/addon/components/rose/layout/page/index.stories.mdx b/addons/rose/addon/components/rose/layout/page/index.stories.mdx
index 909d9fea3..d2e109382 100644
--- a/addons/rose/addon/components/rose/layout/page/index.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/page/index.stories.mdx
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
 
 A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body.
 
-```htmlbars
+```handlebars
 <Rose::Layout::Page as |page|>
   <page.breadcrumbs />
   <page.header />
diff --git a/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx b/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
index 820db9320..3683df6fd 100644
--- a/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A top-level layout/positioning component that allows two distinct sections to
 be configured: sidebar and body.
 
-```htmlbars
+```handlebars
 <Rose::Layout::Sidebar as |layout|>
   <layout.sidebar>
     sidebar content
diff --git a/addons/rose/addon/components/rose/link-button/index.stories.mdx b/addons/rose/addon/components/rose/link-button/index.stories.mdx
index ccb1b29a3..44412da2c 100644
--- a/addons/rose/addon/components/rose/link-button/index.stories.mdx
+++ b/addons/rose/addon/components/rose/link-button/index.stories.mdx
@@ -11,11 +11,11 @@ An achor element component styled to mimic `Rose::Button` component.
 Styles supported: primary, secondary, warning, and ghost.
 Disabling link button is not supported as it is an action on form components only.
 
-```html
+```handlebars
 <Rose::LinkButton
-  @route="index"
-  @style="primary"
-  @iconRight="flight-icons/svg/entry-point-16"
+  @route='index'
+  @style='primary'
+  @iconRight='flight-icons/svg/entry-point-16'
 >
   Content
 </Rose::LinkButton>
@@ -74,11 +74,11 @@ Disabling link button is not supported as it is an action on form components onl
 
 Similar to `Rose::Button`, icon only link button is supported.
 
-```html
+```handlebars
 <Rose::LinkButton
-  @route="index"
-  @style="primary"
-  @iconOnly="flight-icons/svg/help-16"
+  @route='index'
+  @style='primary'
+  @iconOnly='flight-icons/svg/help-16'
 />
 ```
 
diff --git a/addons/rose/addon/components/rose/list/key-value/index.stories.mdx b/addons/rose/addon/components/rose/list/key-value/index.stories.mdx
index fbd4f54be..f609d02cd 100644
--- a/addons/rose/addon/components/rose/list/key-value/index.stories.mdx
+++ b/addons/rose/addon/components/rose/list/key-value/index.stories.mdx
@@ -57,7 +57,7 @@ A simple key/value list with support for embedded form fields and buttons.
   </Story>
 </Preview>
 
-```html
+```handlebars
 <Rose::List::KeyValue as |list|>
   <list.item as |item|>
     <item.key>Key</item.key>
@@ -72,9 +72,9 @@ A simple key/value list with support for embedded form fields and buttons.
     <item.cell>Value</item.cell>
   </list.item>
 
-  {{!-- In actual use, form fields should be yielded from an outer form
-  component --}}
-  <Rose::Form::Input @contextual="{{true}}" as |input|>
+  {{! In actual use, form fields should be yielded from an outer form
+  component }}
+  <Rose::Form::Input @contextual={{true}} as |input|>
     <list.item as |item|>
       <item.key>
         <input.label>Key</input.label>
@@ -83,12 +83,12 @@ A simple key/value list with support for embedded form fields and buttons.
         <input.field />
       </item.cell>
       <item.cell>
-        <Rose::Button @style="secondary">Add</Rose::Button>
+        <Rose::Button @style='secondary'>Add</Rose::Button>
       </item.cell>
     </list.item>
   </Rose::Form::Input>
 
-  <Rose::Form::Input @contextual="{{true}}" as |input|>
+  <Rose::Form::Input @contextual={{true}} as |input|>
     <list.item as |item|>
       <item.key>
         <input.label>Key</input.label>
@@ -98,11 +98,10 @@ A simple key/value list with support for embedded form fields and buttons.
       </item.cell>
       <item.cell>
         <Rose::Button
-          @style="secondary"
-          @iconOnly="flight-icons/svg/trash-16"
-          title="Remove"
-          >Remove</Rose::Button
-        >
+          @style='secondary'
+          @iconOnly='flight-icons/svg/trash-16'
+          title='Remove'
+        >Remove</Rose::Button>
       </item.cell>
     </list.item>
   </Rose::Form::Input>
diff --git a/addons/rose/addon/components/rose/message/index.stories.mdx b/addons/rose/addon/components/rose/message/index.stories.mdx
index f6e402310..6bb71161b 100644
--- a/addons/rose/addon/components/rose/message/index.stories.mdx
+++ b/addons/rose/addon/components/rose/message/index.stories.mdx
@@ -48,23 +48,22 @@ Title can be configured with optional icon and subtitle.
   </Story>
 </Preview>
 
-```html
+```handlebars
 <Rose::Message
-  @title="Page not found"
-  @subtitle="Error 404"
-  @icon="flight-icons/svg/alert-circle-16"
-  as
-  |message|
+  @title='Page not found'
+  @subtitle='Error 404'
+  @icon='flight-icons/svg/alert-circle-16'
+  as |message|
 >
   <message.description>
     You must be granted permissions to view this data. Ask your administrator if
     you think you should have access.
   </message.description>
-  <message.link @route="index">
-    <Rose::Icon @name="flight-icons/svg/chevron-left-16" />
+  <message.link @route='index'>
+    <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
     Go back
   </message.link>
-  <message.link @route="index">Need help?</message.link>
+  <message.link @route='index'>Need help?</message.link>
 </Rose::Message>
 ```
 
@@ -91,8 +90,8 @@ Message can be configured without icons and navigation links.
   </Story>
 </Preview>
 
-```html
-<Rose::Message @title="No logs received yet" as |message|>
+```handlebars
+<Rose::Message @title='No logs received yet' as |message|>
   <message.description> Description. </message.description>
 </Rose::Message>
 ```
diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx b/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
index e42b2e1b7..0216e2527 100644
--- a/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
+++ b/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
@@ -8,10 +8,10 @@ import { action } from '@storybook/addon-actions';
 
 A breadcrumbs component with links as crumbs.
 
-```html
+```handlebars
 <Rose::Nav::Breadcrumbs as |breadcrumbs|>
-  <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
-  <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+  <breadcrumbs.link @route='about'>Level 1</breadcrumbs.link>
+  <breadcrumbs.link @route='index'>Level 2</breadcrumbs.link>
 </Rose::Nav::Breadcrumbs>
 ```
 
diff --git a/addons/rose/addon/components/rose/nav/link/index.stories.mdx b/addons/rose/addon/components/rose/nav/link/index.stories.mdx
index 907c86500..3299e9227 100644
--- a/addons/rose/addon/components/rose/nav/link/index.stories.mdx
+++ b/addons/rose/addon/components/rose/nav/link/index.stories.mdx
@@ -9,8 +9,8 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`.
 
-```html
-<Rose::Nav::Link @route="index">Text</Rose::Nav::Link>
+```handlebars
+<Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>
 ```
 
 <Preview>
diff --git a/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx b/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
index 0bb8e9ef3..e2d3c5753 100644
--- a/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
+++ b/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
@@ -28,7 +28,7 @@ A simple navigation component intended for use in the sidebar layout region.
 _Note_: do not assign the `active` class directly. This is done by the link
 component automatically. We use it in this story for illustrative purposes.
 
-```htmlbars
+```handlebars
 <Rose::Nav::Sidebar @title='Title' as |nav|>
   <nav.link @route='index'>Item Name</nav.link>
   <nav.link @route='about'>Item Name</nav.link>
diff --git a/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx b/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
index d83ad1008..03589ebeb 100644
--- a/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
+++ b/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
@@ -9,11 +9,11 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 A simple tabbed navigation component.
 
-```html
+```handlebars
 <Rose::Nav::Tabs as |nav|>
-  <nav.link @route="index" class="active">Text</nav.link>
-  <nav.link @route="index">Text</nav.link>
-  <nav.link @route="index">Text</nav.link>
+  <nav.link @route='index' class='active'>Text</nav.link>
+  <nav.link @route='index'>Text</nav.link>
+  <nav.link @route='index'>Text</nav.link>
 </Rose::Nav::Tabs>
 ```
 
diff --git a/addons/rose/addon/components/rose/notification/index.stories.mdx b/addons/rose/addon/components/rose/notification/index.stories.mdx
index 3fffe6bb0..ea122bd94 100644
--- a/addons/rose/addon/components/rose/notification/index.stories.mdx
+++ b/addons/rose/addon/components/rose/notification/index.stories.mdx
@@ -16,7 +16,7 @@ the component. Dismissible notifications _must_ also have `@dismissText`.
 This component does not handle dismissal though. Be sure your `@dismiss`
 handler takes appropriate action and hides the notification.
 
-```htmlbars
+```handlebars
 <Rose::Notification
   @style='info'
   @heading='Alert Notification'
diff --git a/addons/rose/addon/components/rose/separator/index.stories.mdx b/addons/rose/addon/components/rose/separator/index.stories.mdx
index 7c16ab0ab..8cd5204b3 100644
--- a/addons/rose/addon/components/rose/separator/index.stories.mdx
+++ b/addons/rose/addon/components/rose/separator/index.stories.mdx
@@ -20,6 +20,6 @@ A simple styled `<hr>` element.
   </Story>
 </Preview>
 
-```htmlbars
+```handlebars
 <Rose::Separator />
 ```
diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx
index f53d1d318..c8ed3f917 100644
--- a/addons/rose/addon/components/rose/table/index.stories.mdx
+++ b/addons/rose/addon/components/rose/table/index.stories.mdx
@@ -10,35 +10,33 @@ A table component to display data in structure of rows and columns. It supports
 
 Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
 
-```html
-<Rose::Table @style="{{style}}" as |table|>
+```handlebars
+<Rose::Table @style={{style}} as |table|>
   <table.header as |header|>
-    <header.row @hidden="{{hideHeaderRow}}" as |row|>
+    <header.row @hidden={{hideHeaderRow}} as |row|>
       <row.headerCell>Address</row.headerCell>
       <row.headerCell>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
-      <row.headerCell @alignCenter="{{true}}">Description</row.headerCell>
+      <row.headerCell @alignCenter={{true}}>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
       <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell @shrink="{{true}}">optional name</row.cell>
-      <row.cell @alignCenter="{{true}}">description</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
+      <row.cell @alignCenter={{true}}>description</row.cell>
     </body.row>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
       <row.cell>host-set-2</row.cell>
-      <row.cell @shrink="{{true}}" @alignCenter="{{true}}"
-        >optional name</row.cell
-      >
-      <row.cell @alignRight="{{true}}">description</row.cell>
+      <row.cell @shrink={{true}} @alignCenter={{true}}>optional name</row.cell>
+      <row.cell @alignRight={{true}}>description</row.cell>
     </body.row>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
       <row.cell>host-set-1</row.cell>
-      <row.cell @shrink="{{true}}">optional name</row.cell>
+      <row.cell @shrink={{true}}>optional name</row.cell>
       <row.cell>description</row.cell>
     </body.row>
   </table.body>
diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
index 0ef461bd5..2445021d2 100644
--- a/addons/rose/addon/components/rose/toolbar/index.stories.mdx
+++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
@@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions';
 Renders a toolbar. Items may be added directly into the toolbar, or within
 predefined "regions" for left and right alignment, respectively.
 
-```htmlbars
+```handlebars
 <Rose::Toolbar as |toolbar|>
   // place items here
   <toolbar.primary>
diff --git a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
index 1aa4874b5..cff5f97e0 100644
--- a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
+++ b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
 
 Used to display non-interactive information in a toolbar.
 
-```htmlbars
+```handlebars
 <Rose::Toolbar>
   <Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
 </Rose::Toolbar>
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 17644b12c..241562a92 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -20,6 +20,7 @@
     "format": "npm-run-all format:*",
     "format:hbs": "prettier --write '{addon,tests}/**/*.hbs'",
     "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
+    "format:mdx": "prettier --write 'addon/**/*.mdx'",
     "format:sass": "prettier --write addon/**/*.scss",
     "start": "ember serve",
     "test": "ember test",
@@ -99,6 +100,7 @@
     "qunit-dom": "^2.0.0",
     "react": "^16",
     "react-dom": "^16",
+    "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.41.0",
     "sass-lint": "^1.13.1",
     "webpack": "^5.59.1"
diff --git a/yarn.lock b/yarn.lock
index c54f6d232..47e7c1c4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9696,9 +9696,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001400:
-  version "1.0.30001414"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz#5f1715e506e71860b4b07c50060ea6462217611e"
-  integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==
+  version "1.0.30001419"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001419.tgz#3542722d57d567c8210d5e4d0f9f17336b776457"
+  integrity sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -18832,7 +18832,7 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lowlight@^1.14.0:
+lowlight@^1.14.0, lowlight@^1.17.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
   integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@@ -21761,7 +21761,7 @@ printf@^0.6.1:
   resolved "https://registry.yarnpkg.com/printf/-/printf-0.6.1.tgz#b9afa3d3b55b7f2e8b1715272479fc756ed88650"
   integrity sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==
 
-prismjs@^1.21.0, prismjs@^1.27.0, prismjs@~1.24.0:
+prismjs@^1.21.0, prismjs@^1.27.0, prismjs@~1.24.0, prismjs@~1.27.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
@@ -22381,6 +22381,17 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
+react-syntax-highlighter@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -22678,6 +22689,15 @@ refractor@^3.1.0:
     parse-entities "^2.0.0"
     prismjs "~1.24.0"
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -23775,9 +23795,9 @@ shebang-regex@^3.0.0:
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shell-quote@1.7.2, shell-quote@^1.6.1, shell-quote@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
-  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.4.tgz#33fe15dee71ab2a81fcbd3a52106c5cfb9fb75d8"
+  integrity sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==
 
 shelljs@^0.6.0, shelljs@^0.8.4, shelljs@^0.8.5:
   version "0.8.5"
@@ -24003,9 +24023,9 @@ socks-proxy-agent@^6.0.0:
     socks "^2.6.2"
 
 socks@^2.3.3:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.0.tgz#f9225acdb841e874dca25f870e9130990f3913d0"
-  integrity sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
+  integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
   dependencies:
     ip "^2.0.0"
     smart-buffer "^4.2.0"
@@ -25083,9 +25103,9 @@ terser-webpack-plugin@^5.1.3:
     terser "^5.7.2"
 
 terser@^4.1.2, terser@^4.6.3, terser@^5.14.2, terser@^5.3.0, terser@^5.3.4, terser@^5.7.2:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.0.tgz#e16967894eeba6e1091509ec83f0c60e179f2425"
-  integrity sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.1.tgz#8561af6e0fd6d839669c73b92bdd5777d870ed6c"
+  integrity sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"