Fix css syntax highlighting conflict with bulma title

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -29,6 +29,7 @@ import parser from "gitdiff-parser";
 import simpleDiff from "../__resources__/Diff.simple";
 import hunksDiff from "../__resources__/Diff.hunks";
 import binaryDiff from "../__resources__/Diff.binary";
+import markdownDiff from "../__resources__/Diff.markdown";
 import { DiffEventContext, File, FileControlFactory } from "./DiffTypes";
 import Toast from "../toast/Toast";
 import { getPath } from "./diffs";
@@ -151,6 +152,10 @@ storiesOf("Diff", module)
     });
     return <Diff diff={filesWithLanguage} />;
   })
+  .add("SyntaxHighlighting (Markdown)", () => {
+    // @ts-ignore
+    return <Diff diff={markdownDiff.files} />;
+  })
   .add("CollapsingWithFunction", () => (
     <Diff diff={diffFiles} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
   ))

scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx

@@ -112,6 +112,52 @@ const source: AnnotatedSource = {
   ]
 };
 
+const markdownSource: AnnotatedSource = {
+  language: "markdown",
+  lines: [
+    {
+      lineNumber: 1,
+      code: "# Title",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 2,
+      code: "",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 3,
+      code: "This is a short Markdown text.",
+      ...commitFixedMissingImport
+    },
+    {
+      lineNumber: 4,
+      code: "",
+      ...commitFixedMissingImport
+    },
+    {
+      lineNumber: 5,
+      code: "With **bold** and __italic__ words.",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 6,
+      code: "",
+      ...commitImplementMain
+    },
+    {
+      lineNumber: 7,
+      code: "> This should be a quote",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 8,
+      code: "",
+      ...commitCreateNewApp
+    }
+  ]
+};
+
 const Robohash: FC = ({ children }) => {
   const binder = new Binder("robohash");
   binder.bind("avatar.factory", (person: Person) => `https://robohash.org/${person.mail}.png`);
@@ -124,6 +170,9 @@ storiesOf("Annotate", module)
   .add("Default", () => (
     <Annotate source={source} repository={repository} baseDate={new Date("2020-04-16T09:22:42Z")} />
   ))
+  .add("Markdown", () => (
+    <Annotate source={markdownSource} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />
+  ))
   .add("With Avatars", () => (
     <Robohash>
       <Annotate source={source} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />