frontend: improve Markdown CSS styling

Signed-off-by: Stephen Gutekanst <stephen@sourcegraph.com>

Author: Stephen Gutekanst

frontend/public/index.html

@@ -31,5 +31,74 @@
 
   <script src="/dist/elm.js"></script>
   <script> Elm.Main.init() </script>
+
+  <style>
+.markdown {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: 18px;
+  line-height: 1.3;
+  white-space: normal;
+}
+.markdown pre {
+  width: 100%;
+  white-space: pre-wrap;
+}
+.markdown code, .markdown pre {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 16px;
+  background: #e6e3e3;
+  padding: 1rem;
+}
+.markdown pre>code {
+  background: none;
+  padding: 0;
+}
+.markdown p + p, .markdown table + p {
+  margin-top: 1rem;
+}
+.markdown p {
+  margin: 0;
+}
+.markdown p code {
+  padding: 0.25rem;
+}
+.markdown table {
+    margin-top: 1rem;
+    border-collapse: collapse;
+    width: calc(100% - 2rem - 2rem);
+    margin-left: 2rem;
+}
+.markdown thead {
+    border-bottom: 1px solid gray;
+}
+.markdown td, th {
+    padding: 0.5rem;
+}
+.markdown tr:nth-child(even) {
+    background: #f0f0f0;
+}
+.markdown th {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    text-align: left;
+}
+.markdown table code {
+  background: 0;
+  padding: 0;
+}
+.markdown blockquote {
+  margin: 1rem;
+  margin-left: 0.5rem;
+  padding: 0.5rem;
+  border-left: 3px solid #d2d2d2;
+}
+.markdown hr {
+  height: 2px;
+  background: #b7b7b7;
+  border: 0;
+  width: 100%;
+}
+
+  </style>
 </body>
 </html>

frontend/src/Markdown.elm

@@ -27,7 +27,7 @@ render markdown =
                 |> Result.andThen (\ast -> Markdown.Renderer.render Markdown.Renderer.defaultHtmlRenderer ast)
         of
             Ok rendered ->
-                E.column [ E.htmlAttribute (Html.Attributes.style "white-space" "normal") ] (List.map (\e -> E.html e) rendered)
+                E.column [ E.htmlAttribute (Html.Attributes.class "markdown") ] (List.map (\e -> E.html e) rendered)
 
             Err errors ->
                 E.text errors