- ガイド
- コンセプト
マークダウンエディタ
Table of contents
Newtでは、モデルにマークダウンフィールドを指定することで、マークダウンエディタを利用することができます。
マークダウンエディタで利用可能な記法の一覧について紹介します。
1. 見出し![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
# 見出し
## 見出し2
### 見出し3
#### 見出し4
管理画面での表示
出力されるHTML
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
2. テキストのスタイル![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
**太字**
*斜体*
~~取り消し線~~
管理画面での表示
出力されるHTML
<strong>太字</strong>
<em>斜体</em>
<s>取り消し線</s>
3. 順序なしリスト![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
-
または *
を使って記載してください。ネストすることも可能です。
- aaa
- bbb
- ccc
* xxx
* yyy
管理画面での表示
出力されるHTML
<ul>
<li>aaa</li>
<li>
bbb
<ul>
<li>ccc</li>
</ul>
</li>
</ul>
<ul>
<li>xxx</li>
<li>yyy</li>
</ul>
4. 順序付きリスト![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
1. aaa
2. bbb
管理画面での表示
出力されるHTML
<ol>
<li>aaa</li>
<li>bbb</li>
</ol>
5. 引用![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
> 引用
> 引用
管理画面での表示
出力されるHTML
<blockquote>
<p>
引用<br>
引用
</p>
</blockquote>
6. 区切り線![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
---
管理画面での表示
出力されるHTML
<hr />
7. インラインコード![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
`インラインコード`
管理画面での表示
出力されるHTML
<code>インラインコード</code>
8. コードブロック![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
言語識別子を追加して、コードブロックの構文を強調表示することも可能です。
highlight.jsでサポートされている言語 に対応しています。
マークダウンエディタでの記載
```ts
const hello = () => {
console.log('Hello!')
}
```
管理画面での表示
出力されるHTML
指定した言語は、code
のクラスに language-{言語名}
として追加されます。
<pre>
<code class="language-ts">
const hello = () => {
console.log('Hello!')
}
</code>
</pre>
言語識別子にファイル名等の情報も加えたい場合、
例えば、
:
を区切り文字として利用すると、管理画面では :
までの文字列を言語識別子として認識します。例えば、
ts:lib/newt.ts
と入力した場合、言語識別子は ts
と認識した上で、出力されるHTMLのクラス名は language-ts:lib/newt.ts
となります。
9. テーブル![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
| Head | Head | Head |
| --- | --- | --- |
| Data | Data | Data |
| Data | Data | Data |
管理画面での表示
出力されるHTML
<table>
<thead>
<tr>
<th>Head</th>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
10. 画像![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
![altテキスト](https://画像のURL)
管理画面での表示
出力されるHTML
<img
src="https://画像のURL"
alt="altテキスト"
>
11. リンク![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
マークダウンエディタでの記載
[リンクテキスト](https://リンクのURL)
管理画面での表示
出力されるHTML
<a href="https://リンクのURL">リンクテキスト</a>
12. 埋め込み![](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bGlua19ibGFja18yNGRwPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsaW5rX2JsYWNrXzI0ZHAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMTIuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApIHRyYW5zbGF0ZSgyLjAwMDAwMCwgNy4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMy4zNzE5MTAyOGUtMTUgTDExLDMuMzcxOTEwMjhlLTE1IEwxMSwyIEwxNSwyIEMxNi42NSwyIDE4LDMuMzUgMTgsNSBDMTgsNi42NSAxNi42NSw4IDE1LDggTDExLDggTDExLDEwIEwxNSwxMCBDMTcuNzYsMTAgMjAsNy43NiAyMCw1IEMyMCwyLjI0IDE3Ljc2LDMuMzcxOTEwMjhlLTE1IDE1LDMuMzcxOTEwMjhlLTE1IFogTTksOCBMNSw4IEMzLjM1LDggMiw2LjY1IDIsNSBDMiwzLjM1IDMuMzUsMiA1LDIgTDksMiBMOSwzLjM3MTkxMDI4ZS0xNSBMNSwzLjM3MTkxMDI4ZS0xNSBDMi4yNCwzLjM3MTkxMDI4ZS0xNSAtMS41ODU3OTc0MmUtMTQsMi4yNCAtMS41ODU3OTc0MmUtMTQsNSBDLTEuNTg1Nzk3NDJlLTE0LDcuNzYgMi4yNCwxMCA1LDEwIEw5LDEwIEw5LDggWiBNNiw0IEwxNCw0IEwxNCw2IEw2LDYgTDYsNCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
埋め込みボタンから、外部サービスの埋め込みカードを挿入できます。
Twitterを埋め込んだ場合は以下のようになります。
マークダウンエディタでの記載
<blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">本日より「Form App」の提供をスタートします🎉フォーム構築に必要不可欠なバックエンド機能を、エンドポイントを貼り付けるだけで簡単に利用できるヘッドレスフォームアプリです。無料でご利用いただける「Entryプラン」をご用意していますので、ぜひお試しください!<a href="https://t.co/AdmliPy6C7">https://t.co/AdmliPy6C7</a></p>— Newt | すべての人にとって使いやすいヘッドレスCMS (@newt_cms) <a href="https://twitter.com/newt_cms/status/1598113633124634624?ref_src=twsrc%5Etfw">December 1, 2022</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
管理画面での表示
出力されるHTML
<blockquote class="twitter-tweet" data-dnt="true" align="center">
<p lang="ja" dir="ltr">
本日より「Form App」の提供をスタートします🎉フォーム構築に必要不可欠なバックエンド機能を、エンドポイントを貼り付けるだけで簡単に利用できるヘッドレスフォームアプリです。無料でご利用いただける「Entryプラン」をご用意していますので、ぜひお試しください!
<a href="https://t.co/AdmliPy6C7">https://t.co/AdmliPy6C7</a>
</p>
— Newt | すべての人にとって使いやすいヘッドレスCMS (@newt_cms)
<a href="https://twitter.com/newt_cms/status/1598113633124634624?ref_src=twsrc%5Etfw">December 1, 2022</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>