fix markdown code block without language attribute

scm-ui/ui-components/src/MarkdownView.stories.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { MemoryRouter } from "react-router-dom";
 
 import TestPage from "./__resources__/test-page.md";
+import MarkdownWithoutLang from "./__resources__/markdown-without-lang.md";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -16,4 +17,9 @@ storiesOf("MarkdownView", module)
     <Spacing>
       <MarkdownView content={TestPage} skipHtml={false} />
     </Spacing>
+  ))
+  .add("Code without Lang", () => (
+    <Spacing>
+      <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />
+    </Spacing>
   ));

scm-ui/ui-components/src/SyntaxHighlighter.tsx

@@ -5,14 +5,29 @@ import { LightAsync as ReactSyntaxHighlighter } from "react-syntax-highlighter";
 import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 type Props = {
-  language: string;
+  language?: string;
   value: string;
 };
 
+const defaultLanguage = "text";
+
 class SyntaxHighlighter extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    language: defaultLanguage
+  };
+
+  getLanguage = () => {
+    const { language } = this.props;
+    if (language) {
+      return language;
+    }
+    return defaultLanguage;
+  };
+
   render() {
+    const language = this.getLanguage();
     return (
-      <ReactSyntaxHighlighter showLineNumbers={false} language={this.props.language} style={arduinoLight}>
+      <ReactSyntaxHighlighter showLineNumbers={false} language={language} style={arduinoLight}>
         {this.props.value}
       </ReactSyntaxHighlighter>
     );

scm-ui/ui-components/src/__resources__/markdown-without-lang.md.ts

@@ -0,0 +1,7 @@
+export default `
+Here is markdown with code, but without Language.
+
+\`\`\`
+Code without Language!
+\`\`\`
+`;

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -484,6 +484,39 @@ exports[`Storyshots Logo Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots MarkdownView Code without Lang 1`] = `
+<div
+  className="sc-EHOje lbpDzp"
+>
+  <div
+    className="sc-ifAKCX frmxmY"
+  >
+    <div
+      className="content"
+    >
+      <p>
+        Here is markdown with code, but without Language.
+      </p>
+      <pre
+        style={
+          Object {
+            "background": "#FFFFFF",
+            "color": "#434f54",
+            "display": "block",
+            "overflowX": "auto",
+            "padding": "0.5em",
+          }
+        }
+      >
+        <code>
+          Code without Language!
+        </code>
+      </pre>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots MarkdownView Default 1`] = `
 <div
   className="sc-EHOje lbpDzp"