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%',