react-markdown、react-syntax-highlighterあたりを使用してマークダウンを表示できるよう対応したのでそのテスト用の記事です。

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

• リスト1
  • ネスト リスト1_1
    • ネスト リスト1_1_1
    • ネスト リスト1_1_2
  • ネスト リスト1_2
• リスト2
• リスト3

1. 番号付きリスト1
   1. 番号付きリスト1_1
   2. 番号付きリスト1_2
2. 番号付きリスト2
3. 番号付きリスト3

お世話になります。xxxです。

ご連絡いただいた、バグの件ですが、仕様です。

お世話になります。 yyyです。

あの新機能バグってるっすね

1# Tab
2class Hoge
3    def hoge
4        print 'hoge'
5    end
6end

---

1# Space
2class Hoge
3  def hoge
4    print 'hoge'
5  end
6end

normal italic normal normal italic normal

normal bold normal normal bold normal

normal bold normal normal bold normal

---

---

---

---

Google先生

こっちからgoogle その他の文章 こっちからもgoogle

https://www.google.co.jp/

取り消し線

　 　class Hoge 　 def hoge 　 print 'hoge' 　 end 　end 　

index.tsx
1import React from 'react';
2import { CodeComponent } from 'react-markdown/lib/ast-to-react';
3import SyntaxHighlighter from 'react-syntax-highlighter';
4import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
5import { css } from '@emotion/react';
6
7const CodeBlock: CodeComponent = ({ inline, className, children }) => {
8  if (inline) {
9    return <code className={className}>{children}</code>;
10  }
11
12  const codeComponentWrapper = css`
13    position: relative;
14    padding: 2rem;
15    background-color: #011627;
16    margin-top: 1rem;
17    font-size: 1.6rem;
18  `;
19  const codeComponentFileName = css`
20    display: inline-block;
21    position: absolute;
22    top: -0.8rem;
23    left: 1rem;
24    background-color: #ccc;
25    border-radius: 0.5rem;
26    margin-bottom: 1rem;
27    padding: 0.3rem 1rem;
28    color: #666;
29  `;
30
31  const match = /language-(\w+)(:.+)/.exec(className || '');
32  const lang = match && match[1] ? match[1] : '';
33  const name = match && match[2] ? match[2].slice(1) : '';
34
35  return (
36    <>
37      <div css={codeComponentWrapper}>
38        <div css={codeComponentFileName}>{name}</div>
39        <SyntaxHighlighter
40          style={nightOwl}
41          language={lang}
42          showLineNumbers={true}
43        >
44          {String(children).replace(/\n$/, '')}
45        </SyntaxHighlighter>
46      </div>
47    </>
48  );
49};
50
51export default CodeBlock;

header1	header2	header3
align left	align right	align center
a	b	c

1a
2aaa
3aaaa