diff --git a/.changeset/3157.md b/.changeset/3157.md
index ba6eb8314f..f15d05c46a 100644
--- a/.changeset/3157.md
+++ b/.changeset/3157.md
@@ -1,15 +1,16 @@
---
-'@backstage/core': minor
+'@backstage/core': patch
---
-Adds the MarkdownContent component to render and display markdown input.
+Adds the MarkdownContent component to render and display Markdown content with the default
+[GFM](https://github.github.com/gfm/) (Github flavored Markdown) dialect.
```
-
+
```
-Render and display the github flavored markdown [GFM](https://github.github.com/gfm/) input:
+To render the Markdown content with plain [CommonMark](https://commonmark.org/), set the dialect to `common-mark`
```
-
+ (
-
+
);
export const MarkdownContentGithubFlavoredCommonMark = () => (
-
+
);
diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
index 2fb40d2f4f..dcbe421dcb 100644
--- a/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
+++ b/packages/core/src/components/MarkdownContent/MarkdownContent.test.tsx
@@ -19,7 +19,7 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
import { MarkdownContent } from './MarkdownContent';
describe('', () => {
- it('render MarkdownContent component with common mark', async () => {
+ it('render MarkdownContent component', async () => {
const rendered = await renderWithEffects(
wrapInTestApp(
,
@@ -30,17 +30,26 @@ describe('', () => {
expect(rendered.getByText('H3', { selector: 'h3' })).toBeInTheDocument();
});
- it('render MarkdownContent component with common mark github flavored', async () => {
+ it('render MarkdownContent component with GitHub flavored Markdown dialect', async () => {
const rendered = await renderWithEffects(
- wrapInTestApp(
- ,
- ),
+ 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(),
diff --git a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
index 4f234565d2..0000e54a5f 100644
--- a/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
+++ b/packages/core/src/components/MarkdownContent/MarkdownContent.tsx
@@ -59,12 +59,9 @@ const useStyles = makeStyles(theme => ({
},
}));
-/**
- * MarkdownContent. Renders markdown (CommonMark, optionally with [GFM](https://github.com/remarkjs/remark-gfm)) to formatted HTML.
- */
type Props = {
content: string;
- enableGfm?: boolean;
+ dialect?: 'gfm' | 'common-mark';
};
const renderers = {
@@ -73,11 +70,17 @@ const renderers = {
},
};
-export const MarkdownContent = ({ content, enableGfm = false }: Props) => {
+/**
+ * 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 (