diff --git a/components/Article/ArticleContent.tsx b/components/Article/ArticleContent.tsx
index 892e1be68..a7df9d9af 100644
--- a/components/Article/ArticleContent.tsx
+++ b/components/Article/ArticleContent.tsx
@@ -1,3 +1,4 @@
+import MDXComponents from '@components/MDX';
import { Ease } from '@components/Motion';
import type { Post } from '@types';
import { MDXRemote } from 'next-mdx-remote';
@@ -8,7 +9,7 @@ interface Props {
const ArticleContent = ({ source }: Props): JSX.Element => {
return (
-
+
);
};
diff --git a/components/Article/__snapshots__/Article.test.tsx.snap b/components/Article/__snapshots__/Article.test.tsx.snap
index f7b319637..617b104ca 100644
--- a/components/Article/__snapshots__/Article.test.tsx.snap
+++ b/components/Article/__snapshots__/Article.test.tsx.snap
@@ -165,7 +165,9 @@ exports[`Article should render correctly (snapshot) 1`] = `
-
+
1 Basic Notes
@@ -585,7 +587,9 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
data-projection-id="2"
style="opacity: 0;"
>
-
+
1 Basic Notes
diff --git a/components/MDX/Anchor.tsx b/components/MDX/Anchor.tsx
new file mode 100644
index 000000000..ea95d1d10
--- /dev/null
+++ b/components/MDX/Anchor.tsx
@@ -0,0 +1,7 @@
+import { Typography } from 'antd';
+
+interface Props {}
+
+const Anchor = (props: Props): JSX.Element => ;
+
+export default Anchor;
diff --git a/components/MDX/Headings.tsx b/components/MDX/Headings.tsx
new file mode 100644
index 000000000..19b80e277
--- /dev/null
+++ b/components/MDX/Headings.tsx
@@ -0,0 +1,29 @@
+import { Typography } from 'antd';
+import type { TitleProps } from 'antd/lib/typography/Title';
+
+interface Props {}
+
+const Heading = (props: TitleProps): JSX.Element => (
+
+);
+
+const H1 = (props: Props): JSX.Element => ;
+
+const H2 = (props: Props): JSX.Element => ;
+
+const H3 = (props: Props): JSX.Element => ;
+
+const H4 = (props: Props): JSX.Element => ;
+
+const H5 = (props: Props): JSX.Element => ;
+
+const Headings = {
+ h1: H1,
+ h2: H2,
+ h3: H3,
+ h4: H4,
+ h5: H5,
+ h6: H5,
+};
+
+export default Headings;
diff --git a/components/MDX/MDX.test.tsx b/components/MDX/MDX.test.tsx
new file mode 100644
index 000000000..9af5d9c91
--- /dev/null
+++ b/components/MDX/MDX.test.tsx
@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react';
+import Anchor from './Anchor';
+import Headings from './Headings';
+import Paragraph from './Paragraph';
+import Texts from './Texts';
+
+describe('Anchor', () => {
+ test('should render correctly (snapshot)', () => {
+ const { container } = render();
+
+ expect(container).toMatchSnapshot();
+ });
+});
+
+describe('Paragraph', () => {
+ test('should render correctly (snapshot)', () => {
+ const { container } = render();
+
+ expect(container).toMatchSnapshot();
+ });
+});
+
+describe('Headings', () => {
+ test.each(Object.values(Headings))(
+ 'should render correctly (snapshot)',
+ Heading => {
+ const { container } = render();
+
+ expect(container).toMatchSnapshot();
+ }
+ );
+});
+
+describe('Texts', () => {
+ test.each(Object.values(Texts))(
+ 'should render correctly (snapshot)',
+ Text => {
+ const { container } = render();
+
+ expect(container).toMatchSnapshot();
+ }
+ );
+});
diff --git a/components/MDX/Paragraph.tsx b/components/MDX/Paragraph.tsx
new file mode 100644
index 000000000..22e6240d7
--- /dev/null
+++ b/components/MDX/Paragraph.tsx
@@ -0,0 +1,9 @@
+import { Typography } from 'antd';
+
+interface Props {}
+
+const Paragraph = (props: Props): JSX.Element => (
+
+);
+
+export default Paragraph;
diff --git a/components/MDX/Texts.tsx b/components/MDX/Texts.tsx
new file mode 100644
index 000000000..b049d18fb
--- /dev/null
+++ b/components/MDX/Texts.tsx
@@ -0,0 +1,20 @@
+import { Typography } from 'antd';
+import type { TextProps } from 'antd/lib/typography/Text';
+
+interface Props {}
+
+const Text = (props: TextProps): JSX.Element => ;
+
+const Strong = (props: Props): JSX.Element => ;
+
+const Emphasis = (props: Props): JSX.Element => ;
+
+const Delete = (props: Props): JSX.Element => ;
+
+const Texts = {
+ strong: Strong,
+ em: Emphasis,
+ del: Delete,
+};
+
+export default Texts;
diff --git a/components/MDX/__snapshots__/MDX.test.tsx.snap b/components/MDX/__snapshots__/MDX.test.tsx.snap
new file mode 100644
index 000000000..21287b03f
--- /dev/null
+++ b/components/MDX/__snapshots__/MDX.test.tsx.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Anchor should render correctly (snapshot) 1`] = `
+
+`;
+
+exports[`Headings should render correctly (snapshot) 1`] = `
+
+
+
+`;
+
+exports[`Headings should render correctly (snapshot) 2`] = `
+
+
+
+`;
+
+exports[`Headings should render correctly (snapshot) 3`] = `
+
+
+
+`;
+
+exports[`Headings should render correctly (snapshot) 4`] = `
+
+
+
+`;
+
+exports[`Headings should render correctly (snapshot) 5`] = `
+
+
+
+`;
+
+exports[`Headings should render correctly (snapshot) 6`] = `
+
+
+
+`;
+
+exports[`Paragraph should render correctly (snapshot) 1`] = `
+
+`;
+
+exports[`Texts should render correctly (snapshot) 1`] = `
+
+
+
+
+
+`;
+
+exports[`Texts should render correctly (snapshot) 2`] = `
+
+
+
+
+
+`;
+
+exports[`Texts should render correctly (snapshot) 3`] = `
+
+
+
+`;
diff --git a/components/MDX/index.ts b/components/MDX/index.ts
new file mode 100644
index 000000000..9feaf6e34
--- /dev/null
+++ b/components/MDX/index.ts
@@ -0,0 +1,13 @@
+import Anchor from './Anchor';
+import Headings from './Headings';
+import Paragraph from './Paragraph';
+import Texts from './Texts';
+
+const MDXComponents = {
+ a: Anchor,
+ p: Paragraph,
+ ...Headings,
+ ...Texts,
+};
+
+export default MDXComponents;
diff --git a/contents/implementFancyMDX.mdx b/contents/implementFancyMDX.mdx
index 0809451a7..5fae15fef 100644
--- a/contents/implementFancyMDX.mdx
+++ b/contents/implementFancyMDX.mdx
@@ -69,6 +69,10 @@ _This is italic text_
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
+> Blockquotes can also be continued...
+> ...continued...
+> ...continued continued...
+
## Lists
Unordered