diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
index 8a109cc837e..771a93dd60c 100755
--- a/src/pages/components/breadcrumb/usage.mdx
+++ b/src/pages/components/breadcrumb/usage.mdx
@@ -81,13 +81,15 @@ type used should be consistent across a product.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
-  >{`
+  >
+    {`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
   <BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="breadcrumb"
     links={{
@@ -99,13 +101,15 @@ type used should be consistent across a product.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}
-  >{`
+  >
+    {`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
   <BreadcrumbItem href="/">Breadcrumb 3</BreadcrumbItem>
 </Breadcrumb>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
index 20fd6f21a1d..b65668316a0 100755
--- a/src/pages/components/button/usage.mdx
+++ b/src/pages/components/button/usage.mdx
@@ -113,9 +113,11 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
-  >{`
+  >
+    {`
       <Button>Button</Button>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="button-with-icon"
     knobs={{
@@ -130,9 +132,11 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}
-  >{`
+  >
+    {`
       <Button renderIcon={Add}>Button</Button>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="icon-only"
     knobs={{}}
@@ -145,11 +149,13 @@ import { Add } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}
-  >{`
+  >
+    {`
      <IconButton align='top' label='Icon button' className='cds--btn--icon-only'>
        <Add size={16}/>
      </IconButton>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
index cb2abe854ad..df8cbe9f26f 100755
--- a/src/pages/components/checkbox/usage.mdx
+++ b/src/pages/components/checkbox/usage.mdx
@@ -109,13 +109,15 @@ set whereas radio buttons allow the user to select only one option.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}
-  >{`
+  >
+    {`
 <fieldset className="cds--fieldset">
   <legend className="cds--label">Checkbox heading</legend>
   <Checkbox labelText="Checkbox label" id="checked" />
   <Checkbox labelText="Checkbox label" id="checked-2" />
 </fieldset>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
index c61cd4355ef..bd96fff8581 100755
--- a/src/pages/components/code-snippet/code.mdx
+++ b/src/pages/components/code-snippet/code.mdx
@@ -113,11 +113,13 @@ import {
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
-  >{`
+  >
+    {`
       <CodeSnippet type="multi">
       {\`${codeSnippet}\`}
       </CodeSnippet>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-inline"
     knobs={{ CodeSnippet: ['disabled'] }}
diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
index 16b6a0ec0a7..f7a188344b7 100644
--- a/src/pages/components/code-snippet/usage.mdx
+++ b/src/pages/components/code-snippet/usage.mdx
@@ -89,9 +89,11 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="single">${codeSnippetSingle}</CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-multi"
     knobs={{ CodeSnippet: ['light'] }}
@@ -104,11 +106,13 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="multi">
     {\`${codeSnippet}\`}
     </CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="code-snippet-inline"
     knobs={{ CodeSnippet: ['light'] }}
@@ -121,9 +125,11 @@ length use cases—inline, single line, and multi-line.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}
-  >{`
+  >
+    {`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
index a5e172873a1..00e51db12e6 100755
--- a/src/pages/components/content-switcher/usage.mdx
+++ b/src/pages/components/content-switcher/usage.mdx
@@ -87,13 +87,15 @@ binary decision.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}
-  >{`
+  >
+    {`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />
   <Switch name={'second'} text='Second section' />
   <Switch name={'third'} text='Third section' />
 </ContentSwitcher>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 206e54aa1de..6c07312f562 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -86,7 +86,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="simple">
       <DatePickerInput
         id="date-picker-default-id"
@@ -95,7 +96,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="single-calendar"
     knobs={{
@@ -111,7 +113,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="single">
       <DatePickerInput
         id="date-picker-calendar-id"
@@ -120,7 +123,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="range-calendar"
     knobs={{
@@ -136,7 +140,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
     }}
-  >{`
+  >
+    {`
     <DatePicker dateFormat="m/d/Y" datePickerType="range">
       <DatePickerInput
         id="date-picker-range-start"
@@ -151,7 +156,8 @@ You can customize the time picker's format depending on location or need.
         type="text"
       />
     </DatePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="time-picker"
     knobs={{
@@ -166,7 +172,8 @@ You can customize the time picker's format depending on location or need.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
     }}
-  >{`
+  >
+    {`
     <TimePicker id="time-picker">
       <TimePickerSelect id="time-picker-select-1">
         <SelectItem value="AM" text="AM" />
@@ -177,7 +184,8 @@ You can customize the time picker's format depending on location or need.
         <SelectItem value="Time zone 2" text="Time zone 2" />
       </TimePickerSelect>
     </TimePicker>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx
index b8f272ff5e1..ae53d3f85bf 100755
--- a/src/pages/components/dropdown/code.mdx
+++ b/src/pages/components/dropdown/code.mdx
@@ -97,7 +97,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <Dropdown
           ariaLabel="Dropdown"
@@ -107,7 +108,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Dropdown title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="combo-box"
     knobs={{
@@ -122,7 +124,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <ComboBox
           ariaLabel="ComboBox"
@@ -132,7 +135,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Combo box title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="multiselect"
     knobs={{
@@ -147,7 +151,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <MultiSelect
           ariaLabel="MultiSelect"
@@ -157,7 +162,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Multiselect title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="filter-multiselect"
     knobs={{ FilterableMultiSelect: ['size', 'disabled', 'invalid', 'warn'] }}
@@ -170,7 +176,8 @@ documentation, see the Storybooks for each framework below.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <FilterableMultiSelect
           ariaLabel="Filterable MultiSelect"
@@ -180,7 +187,8 @@ documentation, see the Storybooks for each framework below.
           titleText="Filterable multiselect title"
         />
       </div>
- `}</ComponentVariant>
+ `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Sample data
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
index 08f639183a6..21ab0928fa7 100755
--- a/src/pages/components/dropdown/usage.mdx
+++ b/src/pages/components/dropdown/usage.mdx
@@ -104,7 +104,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <Dropdown
           ariaLabel="Dropdown"
@@ -114,7 +115,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Dropdown title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="combo-box"
     knobs={{
@@ -129,7 +131,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <ComboBox
           ariaLabel="ComboBox"
@@ -139,7 +142,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Combo box title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="multiselect"
     knobs={{
@@ -154,7 +158,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <MultiSelect
           ariaLabel="MultiSelect"
@@ -164,7 +169,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Multiselect title"
         />
       </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="filter-multiselect"
     knobs={{ FilterableMultiSelect: ['size', 'disabled', 'invalid', 'warn'] }}
@@ -177,7 +183,8 @@ functionality—dropdown, multiselect, and combo box.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
     }}
-  >{`
+  >
+    {`
       <div style={{width: '300px', height: '100px'}}>
         <FilterableMultiSelect
           ariaLabel="Filterable MultiSelect"
@@ -187,7 +194,8 @@ functionality—dropdown, multiselect, and combo box.
           titleText="Filterable multiselect title"
         />
       </div>
- `}</ComponentVariant>
+ `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index 89c2315e4f9..a287d12285e 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -84,7 +84,8 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <FileUploader
           accept={[
@@ -99,7 +100,8 @@ file uploader.
           labelTitle="Upload"
         />
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="drag-and-drop"
     knobs={{
@@ -114,7 +116,8 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <strong className='cds--file--label'>Account photo</strong>
         <p className='cds--label-description'>
@@ -129,7 +132,8 @@ file uploader.
           tabIndex={0}
         />
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
   <ComponentVariant
     id="upload-states"
     knobs={{
@@ -144,11 +148,13 @@ file uploader.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-file-uploader--default',
     }}
-  >{`
+  >
+    {`
       <div className="cds--file__container">
         <FileUploaderItem name='color.jpg' errorSubject='File size exceeds limits' errorBody='500 kb max file size. Select a new file and try again.'/>
       </div>
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index 56718a9f73d..07b5ea09a6e 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -63,7 +63,8 @@ do you gain by collecting this information?
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--form-item',
     }}
-  >{`
+  >
+    {`
   <Form>
   <Stack gap={7}>
     <TextInput
@@ -110,7 +111,8 @@ do you gain by collecting this information?
   </Button>
   </Stack>
 </Form>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/inline-loading/usage.mdx b/src/pages/components/inline-loading/usage.mdx
index 78f9fa37c7c..18b75d096b0 100755
--- a/src/pages/components/inline-loading/usage.mdx
+++ b/src/pages/components/inline-loading/usage.mdx
@@ -72,9 +72,11 @@ table, after a primary or secondary button click, or even in a modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-inline-loading--default',
     }}
-  >{`
+  >
+    {`
     <InlineLoading description="Loading..." />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/link/usage.mdx b/src/pages/components/link/usage.mdx
index 8ec18a013ef..1ac9c3b0036 100755
--- a/src/pages/components/link/usage.mdx
+++ b/src/pages/components/link/usage.mdx
@@ -79,9 +79,11 @@ be used for navigational actions.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-link--default',
     }}
-  >{`
+  >
+    {`
   <Link href="#">Link</Link>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/list/usage.mdx b/src/pages/components/list/usage.mdx
index 8ddff62b6bf..a51cee597e6 100755
--- a/src/pages/components/list/usage.mdx
+++ b/src/pages/components/list/usage.mdx
@@ -58,7 +58,8 @@ between list items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-list--ordered',
     }}
-  >{`
+  >
+    {`
     <OrderedList>
       <ListItem>
         Ordered list level 1
@@ -81,7 +82,8 @@ between list items.
         Ordered list level 1
       </ListItem>
     </OrderedList>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="unordered"
     links={{
@@ -93,7 +95,8 @@ between list items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-list--unordered',
     }}
-  >{`
+  >
+    {`
       <UnorderedList>
         <ListItem>
           Unordered list level 1
@@ -116,7 +119,8 @@ between list items.
           Unordered list level 1
         </ListItem>
       </UnorderedList>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/loading/usage.mdx b/src/pages/components/loading/usage.mdx
index dfce9ba2f03..0dd8530b2a4 100755
--- a/src/pages/components/loading/usage.mdx
+++ b/src/pages/components/loading/usage.mdx
@@ -54,11 +54,13 @@ three seconds.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-loading--default',
     }}
-  >{`
+  >
+    {`
     <Loading
       description="Active loading indicator" withOverlay={false}
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
index ec8259fef36..e16d0a02908 100755
--- a/src/pages/components/modal/usage.mdx
+++ b/src/pages/components/modal/usage.mdx
@@ -127,7 +127,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--default',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       hasScrollingContent
       size="sm"
@@ -162,7 +163,8 @@ destructive or irreversible then use a transactional danger modal.
         </p>
       </>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="with-one-button"
     links={{
@@ -174,7 +176,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--single-button',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       buttonTriggerText="Launch modal"
       modalHeading="Modal heading"
@@ -183,7 +186,8 @@ destructive or irreversible then use a transactional danger modal.
     >
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="with-three-buttons"
     links={{
@@ -195,7 +199,8 @@ destructive or irreversible then use a transactional danger modal.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-modal--three-buttons',
     }}
-  >{`
+  >
+    {`
     <ModalWrapper
       buttonTriggerText="Launch modal"
       modalHeading="Modal heading"
@@ -215,7 +220,8 @@ destructive or irreversible then use a transactional danger modal.
     >
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor. </p>
     </ModalWrapper>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx
index fda61f5df87..66c15179f3f 100755
--- a/src/pages/components/notification/usage.mdx
+++ b/src/pages/components/notification/usage.mdx
@@ -91,7 +91,8 @@ although some product teams also support banners and notification centers.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--toast',
     }}
-  >{`
+  >
+    {`
     <div>
       <ToastNotification
         caption="00:00:00 AM"
@@ -101,7 +102,8 @@ although some product teams also support banners and notification centers.
         title="Notification title"
       />
     </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
   <ComponentVariant
     id="inline"
     knobs={{
@@ -116,7 +118,8 @@ although some product teams also support banners and notification centers.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-notifications--inline',
     }}
-  >{`
+  >
+    {`
   <div>
     <InlineNotification
       kind="info"
@@ -126,7 +129,8 @@ although some product teams also support banners and notification centers.
       title="Notification title"
     />
   </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx
index b7b96e909ef..96d5b8e9eb4 100755
--- a/src/pages/components/number-input/usage.mdx
+++ b/src/pages/components/number-input/usage.mdx
@@ -52,7 +52,8 @@ or decrease an incremental value.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
-  >{`
+  >
+    {`
     <NumberInput
       helperText="Optional helper text"
       id="tj-input"
@@ -63,7 +64,8 @@ or decrease an incremental value.
       step={10}
       value={50}
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="mobile-number-input"
     links={{
@@ -75,7 +77,8 @@ or decrease an incremental value.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-number-input--default',
     }}
-  >{`
+  >
+    {`
         <NumberInput
           isMobile
           helperText="Optional helper text"
@@ -87,7 +90,8 @@ or decrease an incremental value.
           step={10}
           value={50}
         />
-    `}</ComponentVariant>
+    `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx
index a0ca4d90771..59435d60661 100755
--- a/src/pages/components/overflow-menu/usage.mdx
+++ b/src/pages/components/overflow-menu/usage.mdx
@@ -51,7 +51,8 @@ there is a space constraint.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-overflow-menu--default',
     }}
-  >{`
+  >
+    {`
     <OverflowMenu
       data-floating-menu-container
       selectorPrimaryFocus={'.optionOne'}
@@ -68,7 +69,8 @@ there is a space constraint.
       <OverflowMenuItem itemText="Option 3" />
       <OverflowMenuItem itemText="Option 4" hasDivider/>
     </OverflowMenu>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx
index 7ec6b273edf..0a69391daf7 100755
--- a/src/pages/components/pagination/usage.mdx
+++ b/src/pages/components/pagination/usage.mdx
@@ -58,7 +58,8 @@ The default number displayed will vary depending on the context.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-pagination--default',
     }}
-  >{`
+  >
+    {`
   <div style={{width: '800px'}}>
     <Pagination
       backwardText="Previous page"
@@ -77,7 +78,8 @@ The default number displayed will vary depending on the context.
       totalItems={103}
     />
   </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Best practices
diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx
index f3700eb5f33..aec8baca524 100755
--- a/src/pages/components/progress-indicator/usage.mdx
+++ b/src/pages/components/progress-indicator/usage.mdx
@@ -52,7 +52,8 @@ percentage of completeness as each task is completed.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-progress-indicator--default',
     }}
-  >{`
+  >
+    {`
     <div className="some-container">
       <ProgressIndicator>
         <ProgressStep
@@ -83,7 +84,8 @@ percentage of completeness as each task is completed.
         />
       </ProgressIndicator>
     </div>
-`}</ComponentVariant>
+`}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Best practices
diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx
index 9034deb5c5c..e022c0bfef8 100755
--- a/src/pages/components/radio-button/usage.mdx
+++ b/src/pages/components/radio-button/usage.mdx
@@ -95,7 +95,8 @@ checkboxes allow the user to select multiple items.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-radio-button--default',
     }}
-  >{`
+  >
+    {`
   <FormGroup
   legendText="Radio button heading"
 >
@@ -122,7 +123,8 @@ checkboxes allow the user to select multiple items.
     />
   </RadioButtonGroup>
 </FormGroup>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx
index 4145ef5a1ff..72faeb498a4 100755
--- a/src/pages/components/search/usage.mdx
+++ b/src/pages/components/search/usage.mdx
@@ -51,12 +51,14 @@ to aid the user in finding content.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-search--default',
     }}
-  >{`
+  >
+    {`
 <Search
   id="search-1"
   placeHolderText="Search"
 />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx
index 79f9e94298f..f466fef61b7 100755
--- a/src/pages/components/select/usage.mdx
+++ b/src/pages/components/select/usage.mdx
@@ -68,7 +68,8 @@ while the dropdown component can be styled as needed.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
     }}
-  >{`
+  >
+    {`
 <Select
   defaultValue="placeholder-item"
   helperText="Optional helper text"
@@ -105,7 +106,8 @@ while the dropdown component can be styled as needed.
     />
   </SelectItemGroup>
 </Select>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Variants
diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx
index 82d2d6f8ba6..2c589426e61 100755
--- a/src/pages/components/slider/usage.mdx
+++ b/src/pages/components/slider/usage.mdx
@@ -67,7 +67,8 @@ value range.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-slider--default',
     }}
-  >{`
+  >
+    {`
   <div className="some-container">
 <Slider
   ariaLabelInput="Label for slider value"
@@ -80,7 +81,8 @@ value range.
   value={50}
 />
 </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Interactions
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
index 922ce23f5f8..e311b4df684 100755
--- a/src/pages/components/structured-list/usage.mdx
+++ b/src/pages/components/structured-list/usage.mdx
@@ -81,7 +81,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
-  >{`
+  >
+    {`
     <StructuredListWrapper ariaLabel="Structured list">
       <StructuredListHead>
         <StructuredListRow
@@ -124,7 +125,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
         </StructuredListRow>
       </StructuredListBody>
     </StructuredListWrapper>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="select-structured-list"
     links={{
@@ -136,7 +138,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-structured-list--default',
     }}
-  >{`
+  >
+    {`
     <StructuredListWrapper selection ariaLabel="Structured list">
       <StructuredListHead>
         <StructuredListRow
@@ -231,7 +234,8 @@ import { CheckmarkFilled } from '@carbon/icons-react';
         </StructuredListRow>
       </StructuredListBody>
     </StructuredListWrapper>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx
index 19962a8ec8c..cfadb9b5f77 100755
--- a/src/pages/components/tabs/usage.mdx
+++ b/src/pages/components/tabs/usage.mdx
@@ -130,7 +130,8 @@ such as modals, cards, or side panels.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tabs--default',
     }}
-  >{`
+  >
+    {`
 <div style={{ width: '50%' }}>
   <Tabs>
     <TabList aria-label="List of tabs" contained>
@@ -153,7 +154,8 @@ such as modals, cards, or side panels.
     </TabPanels>
   </Tabs>
 </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx
index 894fa1b0bf1..5a4dbdcb53a 100755
--- a/src/pages/components/tag/usage.mdx
+++ b/src/pages/components/tag/usage.mdx
@@ -74,7 +74,8 @@ that particular category.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tag--default',
     }}
-  >{`
+  >
+    {`
   <>
 <Tag type="red" title="Clear Filter"> Red </Tag>
 <Tag type="magenta" title="Clear Filter"> Magenta </Tag>
@@ -87,7 +88,8 @@ that particular category.
 <Tag type="cool-gray" title="Clear Filter"> Cool gray </Tag>
 <Tag type="warm-gray" title="Clear Filter"> Warm gray </Tag>
 </>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Feedback
diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx
index c91f5767bc7..35afd10264c 100755
--- a/src/pages/components/text-input/usage.mdx
+++ b/src/pages/components/text-input/usage.mdx
@@ -86,7 +86,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
-  >{`
+  >
+    {`
     <div>
       <TextInput
         helperText="Optional helper text"
@@ -96,7 +97,8 @@ longer, multi-line entries.
         placeholder="Placeholder text"
       />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="password-input"
     links={{
@@ -108,7 +110,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-input--default',
     }}
-  >{`
+  >
+    {`
     <div>
     <TextInput.PasswordInput
       helperText="Optional helper text"
@@ -120,7 +123,8 @@ longer, multi-line entries.
       showPasswordLabel="Show password"
     />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="text-area"
     knobs={{
@@ -135,7 +139,8 @@ longer, multi-line entries.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-textarea--default',
     }}
-  >{`
+  >
+    {`
     <div>
     <TextArea
       cols={50}
@@ -147,7 +152,8 @@ longer, multi-line entries.
       rows={4}
     />
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
index c860a09d97a..36c05d5094a 100755
--- a/src/pages/components/tile/usage.mdx
+++ b/src/pages/components/tile/usage.mdx
@@ -108,11 +108,13 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--default',
     }}
-  >{`
+  >
+    {`
     <Tile>
       Default tile
     </Tile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="clickable-tile"
     knobs={{
@@ -127,13 +129,15 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--clickable',
     }}
-  >{`
+  >
+    {`
     <ClickableTile
       href="#"
     >
       Clickable tile
     </ClickableTile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="radio-tile"
     knobs={{
@@ -148,7 +152,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
-  >{`
+  >
+    {`
     <TileGroup
       defaultSelected="default-selected"
       legend="Radio tile group"
@@ -179,7 +184,8 @@ modules. Here are some common use cases for when to use tiles:
         Radio tile
       </RadioTile>
     </TileGroup>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="selectable-tile"
     knobs={{
@@ -194,7 +200,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--single-selectable',
     }}
-  >{`
+  >
+    {`
     <div
       aria-label="selectable tiles"
       role="group"
@@ -227,7 +234,8 @@ modules. Here are some common use cases for when to use tiles:
         Multiselect tile
       </SelectableTile>
     </div>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="expandable-tile"
     knobs={{
@@ -242,7 +250,8 @@ modules. Here are some common use cases for when to use tiles:
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tile--expandable',
     }}
-  >{`
+  >
+    {`
     <ExpandableTile
       tabIndex={0}
       tileCollapsedIconText="Interact to Expand tile"
@@ -261,7 +270,8 @@ modules. Here are some common use cases for when to use tiles:
         </div>
       </TileBelowTheFoldContent>
     </ExpandableTile>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Tile variants
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
index ee2ae078db4..aedd383b1fe 100755
--- a/src/pages/components/toggle/usage.mdx
+++ b/src/pages/components/toggle/usage.mdx
@@ -62,14 +62,16 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
-  >{`
+  >
+    {`
     <Toggle
       aria-label="toggle button"
       defaultToggled
       id="toggle-1"
       labelText="Label text"
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="small-toggle"
     links={{
@@ -81,14 +83,16 @@ user “flips the switch”. They are commonly used for “on/off” switches.
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-toggle--default',
     }}
-  >{`
+  >
+    {`
     <ToggleSmall
       aria-label="toggle button"
       defaultToggled
       id="toggle-2"
       labelText="Label text"
     />
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Content
diff --git a/src/pages/components/toggletip/usage.mdx b/src/pages/components/toggletip/usage.mdx
index abb9e6eca72..cb0e0a8067e 100644
--- a/src/pages/components/toggletip/usage.mdx
+++ b/src/pages/components/toggletip/usage.mdx
@@ -117,7 +117,8 @@ import { Information } from '@carbon/icons-react';
       React:
         'https://react.carbondesignsystem.com/?path=/story/components-toggletip--default',
     }}
-  >{`
+  >
+    {`
     <Toggletip>
       <ToggletipButton label="Additional information">
         <Information />
@@ -126,7 +127,8 @@ import { Information } from '@carbon/icons-react';
         <p>Custom content here</p>
       </ToggletipContent>
     </Toggletip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ### Anatomy
diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx
index 2b97da17e0d..82ab582f9e9 100755
--- a/src/pages/components/tooltip/usage.mdx
+++ b/src/pages/components/tooltip/usage.mdx
@@ -179,7 +179,8 @@ import { Information } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--default',
     }}
-  >{`
+  >
+    {`
     <Tooltip
       align="bottom"
       label="This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead."
@@ -190,7 +191,8 @@ import { Information } from '@carbon/react/icons';
         <Information />
       </button>
     </Tooltip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
   <ComponentVariant
     id="definition-tooltip"
     knobs={{
@@ -205,13 +207,15 @@ import { Information } from '@carbon/react/icons';
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition',
     }}
-  >{`
+  >
+    {`
     <DefinitionTooltip
       definition="Brief description of the dotted, underlined word above."
     >
       Definition Tooltip
     </DefinitionTooltip>
-  `}</ComponentVariant>
+  `}
+  </ComponentVariant>
 </ComponentDemo>
 
 ## Formatting