Add code formatting to markdown viewer (kubeflow#935)

* add code formatting to markdown viewer * tests
alibaba · Mar 8, 2019 · 9b0e0cd · 9b0e0cd
1 parent 434ee60
commit 9b0e0cd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/frontend/src/CSSReset.tsx b/frontend/src/CSSReset.tsx
@@ -34,6 +34,7 @@ menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   border: 0;
   /* Consider adding flex-shrink: 0; */
+  font-size: 100%;
   margin: 0;
   padding: 0;
   vertical-align: baseline;

diff --git a/frontend/src/components/viewers/MarkdownViewer.tsx b/frontend/src/components/viewers/MarkdownViewer.tsx
@@ -16,9 +16,44 @@
 
 import * as React from 'react';
 import Viewer, { ViewerConfig } from './Viewer';
+import { cssRaw } from 'typestyle';
 // tslint:disable-next-line:no-var-requires
 const markdownIt = require('markdown-it');
 
+cssRaw(`
+.markdown-viewer h1,
+.markdown-viewer h2,
+.markdown-viewer h3,
+.markdown-viewer h4,
+.markdown-viewer h5,
+.markdown-viewer h6 {
+position: relative;
+  margin-top: 1em;
+  margin-bottom: 16px;
+  font-size: initial;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.markdown-viewer h1,
+.markdown-viewer h2 {
+  padding-bottom: .3em;
+  border-bottom: 1px solid #eee;
+}
+
+.markdown-viewer code,
+.markdown-viewer pre {
+  background-color: #f8f8f8;
+  border-radius: 5px;
+}
+
+.markdown-viewer pre {
+  border: solid 1px #eee;
+  margin: 7px 0;
+  padding: 7px;
+}
+`);
+
 export interface MarkdownViewerConfig extends ViewerConfig {
   markdownContent: string;
 }
@@ -44,7 +79,7 @@ class MarkdownViewer extends Viewer<MarkdownViewerProps, any> {
       return null;
     }
     const html = markdownIt().render(this._config.markdownContent);
-    return <div dangerouslySetInnerHTML={{ __html: html }} />;
+    return <div className='markdown-viewer' dangerouslySetInnerHTML={{ __html: html }} />;
   }
 }
 

diff --git a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`MarkdownViewer renders some basic markdown 1`] = `
   }
 >
   <div
+    className="markdown-viewer"
     dangerouslySetInnerHTML={
       Object {
         "__html": "<h1>Title</h1>
@@ -45,6 +46,7 @@ exports[`MarkdownViewer sanitizes the markdown to remove XSS 1`] = `
   }
 >
   <div
+    className="markdown-viewer"
     dangerouslySetInnerHTML={
       Object {
         "__html": "<pre><code>  lower[click me](javascript&amp;#x3a;...)lower