diff --git a/src/components/CodeSnippets.js b/src/components/CodeSnippets.js
index 28d08692..62dceddc 100644
--- a/src/components/CodeSnippets.js
+++ b/src/components/CodeSnippets.js
@@ -29,7 +29,7 @@ const StyledHighlight = styled(Highlight)`
   && pre[class*='language-'] {
     background-color: transparent;
     padding: 15px 1rem;
-    padding-right: 4rem;
+    padding-right: 5rem;
     margin: 0;
   }
 `;
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index bddedcc1..33022ded 100644
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -14,9 +14,10 @@ if (typeof document !== 'undefined') {
   require('prismjs/components/prism-json');
   require('prismjs/components/prism-css');
   require('prismjs/components/prism-yaml');
+  require('prismjs/components/prism-markdown');
 }
 
-const languages = ['bash', 'javascript', 'typescript', 'json', 'css', 'yaml'];
+const languages = ['bash', 'javascript', 'typescript', 'json', 'css', 'yaml', 'markdown'];
 
 // Prism theme copied from 'prismjs/themes/prism.css.' -- without Webpack, the CSS
 // cannot be imported easily and any app which pulls in the design system will
@@ -52,8 +53,20 @@ const HighlightBlock = styled.div`
     color: ${color.darkest};
     background: none;
   }
+
+  .language-markdown .token.title {
+    color: #dd4a68;
+  }
+
+  .language-markdown .token.table-header {
+    color: #07a;
+  }
 `;
 
+const languageMap = {
+  mdx: 'markdown',
+};
+
 export class Highlight extends React.Component {
   componentDidMount() {
     this.highlightCode();
@@ -69,7 +82,8 @@ export class Highlight extends React.Component {
   }
 
   render() {
-    const { children, language, withHTMLChildren, ...rest } = this.props;
+    const { children, language: inputLanguage, withHTMLChildren, ...rest } = this.props;
+    const language = languageMap[inputLanguage] || inputLanguage;
     const codeBlock = withHTMLChildren ? (
       <div dangerouslySetInnerHTML={{ __html: children }} />
     ) : (
diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js
index 8f267c91..333407f5 100644
--- a/src/components/Highlight.stories.js
+++ b/src/components/Highlight.stories.js
@@ -70,6 +70,29 @@ jobs:
 
 const yamlCodeWithWrappers = `<pre class="language-yaml"><code class="language-yaml">${yamlCode}</code></pre>`;
 
+const markdownCode = `import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+&#x3C;Meta title="MDX/Checkbox" component={Checkbox} />
+
+# This is a level 1 heading
+
+## This is a level 2 heading
+
+### This is a level 3 heading
+
+#### This is a level 4 heading
+
+This is a paragraph
+
+| Table | Heading |
+|-------|---------|
+| row   | value   |
+
+export const test = () => &#x3C;Derp prop="test" />
+`;
+
+const markdownCodeWithWrappers = `<pre class="language-markdown"><code class="language-markdown">${markdownCode}</code></pre>`;
+
 export default {
   title: 'Design System/Highlight',
   component: Highlight,
@@ -133,6 +156,17 @@ export const YAML = () => (
   </>
 );
 
+export const Markdown = () => (
+  <>
+    <strong>Autoformat</strong>
+    <Highlight language="markdown">{markdownCode}</Highlight>
+    <strong>Autoformat w/ MDX Language</strong>
+    <Highlight language="mdx">{markdownCode}</Highlight>
+    <strong>Pre-formatted</strong>
+    <Highlight>{markdownCodeWithWrappers}</Highlight>
+  </>
+);
+
 const SmallContainer = styled.div`
   max-width: 300px;
 `;