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です。

1ご連絡いただいた、バグの件ですが、仕様です。
2
3
4> お世話になります。 yyyです。
5
6
7	あの新機能バグってるっすね

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

---

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

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

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

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

1a
2aaa
3aaaa
4