- ガイド
- コンセプト
マークダウンエディタ
Table of contents
Newtでは、モデルにマークダウンフィールドを指定することで、マークダウンエディタを利用することができます。
マークダウンエディタで利用可能な記法の一覧について紹介します。
1. 見出し
マークダウンエディタでの記載
# 見出し
## 見出し2
### 見出し3
#### 見出し4管理画面での表示
出力されるHTML
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>2. テキストのスタイル
マークダウンエディタでの記載
**太字**
*斜体*
~~取り消し線~~管理画面での表示
出力されるHTML
<strong>太字</strong>
<em>斜体</em>
<s>取り消し線</s>3. 順序なしリスト
マークダウンエディタでの記載
- または * を使って記載してください。ネストすることも可能です。
- 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. 順序付きリスト
マークダウンエディタでの記載
1. aaa
2. bbb管理画面での表示
出力されるHTML
<ol>
<li>aaa</li>
<li>bbb</li>
</ol>5. 引用
マークダウンエディタでの記載
> 引用
> 引用管理画面での表示
出力されるHTML
<blockquote>
<p>
引用<br>
引用
</p>
</blockquote>6. 区切り線
マークダウンエディタでの記載
---管理画面での表示
出力されるHTML
<hr />7. インラインコード
マークダウンエディタでの記載
`インラインコード`管理画面での表示
出力されるHTML
<code>インラインコード</code>8. コードブロック
言語識別子を追加して、コードブロックの構文を強調表示することも可能です。
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. テーブル
マークダウンエディタでの記載
| 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. 画像
マークダウンエディタでの記載
管理画面での表示
出力されるHTML
<img
src="https://画像のURL"
alt="altテキスト"
>11. リンク
マークダウンエディタでの記載
[リンクテキスト](https://リンクのURL)管理画面での表示
出力されるHTML
<a href="https://リンクのURL">リンクテキスト</a>12. 埋め込み
埋め込みボタンから、外部サービスの埋め込みカードを挿入できます。
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>