diff --git a/.changeset/3157.md b/.changeset/3157.md index d6c0120d8a..ba6eb8314f 100644 --- a/.changeset/3157.md +++ b/.changeset/3157.md @@ -7,3 +7,9 @@ Adds the MarkdownContent component to render and display markdown input. ``` ``` + +Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input: + +``` + +``` diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx index 1449c5b1be..baa3f45862 100644 --- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx @@ -18,35 +18,48 @@ import { makeStyles } from '@material-ui/core'; import ReactMarkdown from 'react-markdown'; import gfm from 'remark-gfm'; import React from 'react'; +import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ markdown: { '& table': { borderCollapse: 'collapse', - border: '1px solid #dfe2e5', - color: 'rgb(36, 41, 46)', + border: `1px solid ${theme.palette.border}`, }, '& th, & td': { - border: '1px solid #dfe2e5', + border: `1px solid ${theme.palette.border}`, padding: theme.spacing(1), }, + '& td': { + wordBreak: 'break-word', + overflow: 'hidden', + verticalAlign: 'middle', + lineHeight: '1', + margin: 0, + padding: theme.spacing(3, 2, 3, 2.5), + borderBottom: 0, + }, + '& th': { + backgroundColor: theme.palette.background.paper, + }, '& tr': { - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, }, - '& tr:nth-child(2n)': { - backgroundColor: '#f6f8fa', + '& tr:nth-child(odd)': { + backgroundColor: theme.palette.background.default, }, + '& pre': { padding: '16px', overflow: 'auto', fontSize: '85%', lineHeight: 1.45, - backgroundColor: '#f6f8fa', + backgroundColor: theme.palette.code.background, borderRadius: '6px', - color: 'rgba(0, 0, 0, 0.87)', + color: theme.palette.code.text, }, '& a': { - color: '#2E77D0', + color: theme.palette.link, }, '& img': { maxWidth: '100%',