Merge pull request #14495 from TheMightyPenguin/fix-description-md-code-snippets-styling

Addon-docs: Fix MD code snippet format inside Description

lib/components/src/blocks/Description.stories.tsx

@@ -29,7 +29,27 @@ const markdownWithLinksCaption = `
 He stared at the clinic, [Molly](https://storybook.js.org/) took him to the *[Tank War](https://storybook.js.org/)*, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon.
 `;
 
-const Template = (args) => <Description {...args} />;
+const markdownWithCodeSnippets = `
+# My Example Markdown
+
+An \`inline\` codeblock
+
+\`\`\`tsx
+// TypeScript React code block
+export const MyStory = () => {
+  return <Button>Click me</Button>;
+};
+\`\`\`
+
+\`\`\`
+code block with with no language
+const a = fn({
+  b: 2,
+});
+\`\`\`
+`;
+
+const Template = (args: React.ComponentProps<typeof Description>) => <Description {...args} />;
 
 export const Text = Template.bind({});
 Text.args = {
@@ -45,3 +65,8 @@ export const MarkdownLinks = Template.bind({});
 MarkdownLinks.args = {
   markdown: markdownWithLinksCaption,
 };
+
+export const MarkdownCodeSnippets = Template.bind({});
+MarkdownCodeSnippets.args = {
+  markdown: markdownWithCodeSnippets,
+};

lib/components/src/blocks/Source.tsx

@@ -71,4 +71,4 @@ const Source: FunctionComponent<SourceProps> = (props) => {
 Source.defaultProps = {
   format: false,
 };
-export { Source };
+export { Source, StyledSyntaxHighlighter };

lib/components/src/typography/DocumentFormatting.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { styled, CSSObject } from '@storybook/theming';
 import { withReset, withMargin, headerCommon, codeCommon } from './shared';
-import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter';
+import { StyledSyntaxHighlighter } from '../blocks/Source';
 
 export const H1 = styled.h1<{}>(withReset, headerCommon, ({ theme }) => ({
   fontSize: `${theme.typography.size.l1}px`,
@@ -330,14 +330,33 @@ const DefaultCodeBlock = styled.code<{}>(
   codeCommon
 );
 
-export const Code = ({ className, ...props }: React.ComponentProps<typeof DefaultCodeBlock>) => {
+export const Code = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DefaultCodeBlock>) => {
   const language = (className || '').match(/lang-(\S+)/);
+  const isInlineCode = !(children as string).match(/[\n\r]/g);
 
-  if (!language) {
-    return <DefaultCodeBlock {...props} className={className} />;
+  if (isInlineCode) {
+    return (
+      <DefaultCodeBlock {...props} className={className}>
+        {children}
+      </DefaultCodeBlock>
+    );
   }
 
-  return <SyntaxHighlighter bordered copyable language={language[1]} format={false} {...props} />;
+  return (
+    <StyledSyntaxHighlighter
+      bordered
+      copyable
+      language={language?.[1] ?? 'plaintext'}
+      format={false}
+      {...props}
+    >
+      {children}
+    </StyledSyntaxHighlighter>
+  );
 };
 
 export const TT = styled.title<{}>(codeCommon);