Minor updates to the syntax highlight documentation.

docs/snippets/common/my-component-with-global-syntax-highlight.mdx.mdx

@@ -0,0 +1,23 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="A storybook story with syntax highlight registered globally" />
+
+# SCSS example
+
+This is a sample Sass snippet example with Storybook docs
+
+<!-- Don't forget to replace (") with (```) when you copy the snippet to your own app -->
+
+"scss
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+font: 100% $font-stack;
+  color: $primary-color;
+}
+"
+```

docs/snippets/common/storybook-preview-register-language-globally.js.mdx

@@ -0,0 +1,19 @@
+```js
+// .storybook/preview.js
+
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+// Registers and enables scss language support
+SyntaxHighlighter.registerLanguage('scss', scss);
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+```

docs/writing-docs/mdx.md

@@ -187,6 +187,30 @@ When writing your documentation with Storybook and MDX, you get syntax highlight
 
 Once you've updated your documentation, you'll see the code block properly highlighted. You can also apply the same principle to other unsupported formats (i.e., `diff`, `hbs`).
 
+You can also update your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) and enable syntax highlighting globally. For example, to add support for SCSS, update your configuration to the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/storybook-preview-register-language-globally.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Write your documentation as you usually would, and your existing SCSS code blocks will automatically be highlighted when Storybook reloads. For example:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/my-component-with-global-syntax-highlight.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## Linking to other stories and pages
 
 When writing MDX, you may want to provide links to other stories or documentation pages and sections. You can use the `path` query string.