diff --git a/.changeset/3157.md b/.changeset/3157.md
new file mode 100644
index 0000000000..f15d05c46a
--- /dev/null
+++ b/.changeset/3157.md
@@ -0,0 +1,16 @@
+---
+'@backstage/core': patch
+---
+
+Adds the MarkdownContent component to render and display Markdown content with the default
+[GFM](https://github.github.com/gfm/) (Github flavored Markdown) dialect.
+
+```
+
+```
+
+To render the Markdown content with plain [CommonMark](https://commonmark.org/), set the dialect to `common-mark`
+
+```
+ Promissas ulterius senectae Desinet his ait pedum! Libet *sublime* vibrantia\n' +
+ '> si *dicta quod* pectora cupidine hastam dominoque.\n' +
+ '\n' +
+ 'Pedis hic, est bis quod, adhaeret et reditum. Fixa sic vel pugnare **forte est**\n' +
+ 'parte in quaerite generisque repugnat; de quod, creatos.';
+export const MarkdownContentCommonMark = () => (
+
+);
+
+export const MarkdownContentGithubFlavoredCommonMark = () => (
+
+);
diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
new file mode 100644
index 0000000000..dcbe421dcb
--- /dev/null
+++ b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { MarkdownContent } from './MarkdownContent';
+
+describe('', () => {
+ it('render MarkdownContent component', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(
+ ,
+ ),
+ );
+ expect(rendered.getByText('H1', { selector: 'h1' })).toBeInTheDocument();
+ expect(rendered.getByText('H2', { selector: 'h2' })).toBeInTheDocument();
+ expect(rendered.getByText('H3', { selector: 'h3' })).toBeInTheDocument();
+ });
+
+ it('render MarkdownContent component with GitHub flavored Markdown dialect', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(),
+ );
+ expect(
+ rendered.getByText('https://example.com', { selector: 'a' }),
+ ).toBeInTheDocument();
+ });
+
+ it('Render MarkdownContent component with common mark dialect', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(
+ ,
+ ),
+ );
+ expect(
+ rendered.getByText('https://example.com', { selector: 'p' }),
+ ).toBeInTheDocument();
+ });
+
+ it('render MarkdownContent component with CodeSnippet for code blocks', async () => {
+ const rendered = await renderWithEffects(
+ wrapInTestApp(),
+ );
+ const fp1 = rendered.getByText('jest', { selector: 'span' });
+ expect(fp1).toBeInTheDocument();
+ expect(fp1.className).toEqual('hljs-function');
+ const fp2 = rendered.getByText('(test: string)', { selector: 'span' });
+ expect(fp2).toBeInTheDocument();
+ expect(fp2.className).toEqual('hljs-function');
+ expect(rendered.getByText(';', { selector: 'span' })).toBeInTheDocument();
+ });
+});
diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
new file mode 100644
index 0000000000..0000e54a5f
--- /dev/null
+++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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';
+import { CodeSnippet } from '../CodeSnippet';
+
+const useStyles = makeStyles(theme => ({
+ markdown: {
+ '& table': {
+ borderCollapse: 'collapse',
+ border: `1px solid ${theme.palette.border}`,
+ },
+ '& th, & td': {
+ 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: theme.palette.background.paper,
+ },
+ '& tr:nth-child(odd)': {
+ backgroundColor: theme.palette.background.default,
+ },
+
+ '& a': {
+ color: theme.palette.link,
+ },
+ '& img': {
+ maxWidth: '100%',
+ },
+ },
+}));
+
+type Props = {
+ content: string;
+ dialect?: 'gfm' | 'common-mark';
+};
+
+const renderers = {
+ code: ({ language, value }: { language: string; value: string }) => {
+ return ;
+ },
+};
+
+/**
+ * MarkdownContent
+ * --
+ * Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML.
+ * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'`
+ */
+export const MarkdownContent = ({ content, dialect = 'gfm' }: Props) => {
+ const classes = useStyles();
+ return (
+
+ );
+};
diff --git a/packages/core/src/components/MarkdownContent/index.ts b/packages/core/src/components/MarkdownContent/index.ts
new file mode 100644
index 0000000000..7267ff191c
--- /dev/null
+++ b/packages/core/src/components/MarkdownContent/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { MarkdownContent } from './MarkdownContent';
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 4f085ffd6a..40c4ef0c11 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -35,3 +35,4 @@ export * from './Tabs';
export * from './TrendLine';
export * from './WarningPanel';
export * from './EmptyState';
+export * from './MarkdownContent';
diff --git a/yarn.lock b/yarn.lock
index 5db78343b7..962f95f0fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19833,7 +19833,7 @@ react-markdown@^4.3.1:
unist-util-visit "^1.3.0"
xtend "^4.0.1"
-react-markdown@^5.0.0:
+react-markdown@^5.0.0, react-markdown@^5.0.2:
version "5.0.2"
resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.2.tgz#d15a8beb37b4ec34fc23dd892e7755eb7040b8db"
integrity sha512-kmkB4JbV7LqkDAjvaKRKtodB3n3Id76/DalaDun1U8FuLB0SenPfvH+jAQ5Pcpo54cACRQc1LB1yXmuuuIVecw==