diff --git a/frontend/src/CSSReset.tsx b/frontend/src/CSSReset.tsx index 173ae2f3457..50a7d6ba71a 100644 --- 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 index fb2a22cbd7b..c52023ac761 100644 --- 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 { return null; } const html = markdownIt().render(this._config.markdownContent); - return
; + return
; } } diff --git a/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap b/frontend/src/components/viewers/__snapshots__/MarkdownViewer.test.tsx.snap index 68de71e0911..7a8416d1222 100644 --- 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`] = ` } >
Title @@ -45,6 +46,7 @@ exports[`MarkdownViewer sanitizes the markdown to remove XSS 1`] = ` } >
lower[click me](javascript:...)lower