✏️

Zenn WYSIWYGエディタの使い方 (zenn-cli 対応)

に公開
Zenn
frontend
editor
WYSIWYG
Tiptap
idea

開発したサービスの概要

Zenn の記事を Notion のように、最終成果物をそのまま編集することが出来ます！！

zenn-cli と連携したことで、WYISWYG エディタへの書き込みがリアルタイムでマークダウンファイルに反映されます。（逆も然り）

エディタは使いたい時だけ ON にできるので、zenn-cli の感覚で執筆が可能です！

https://github.com/karintou8710/zenn-editor-wysiwyg

始め方

zenn-cli とほぼ同じです。
一点異なることは、インストールするパッケージが zenn-cli-wysiwyg になることです。

以下のコマンドを新しいプロジェクトで入力してください。

npm init -y
npm install zenn-cli-wysiwyg
npx zenn init
npx zenn

その後、編集したい記事画面のヘッダー右下にあるスイッチで編集モードを切り替えれます。

https://zenn.dev/zenn/articles/install-zenn-cli

機能紹介

ここから本エディタの機能紹介をします。

Zenn 記法の細かい仕様は公式ドキュメントをご確認ください。

段落

Enter で新たな段落を生成します。

Shift + Enterは段落内での改行を挿入します。
見た目は改行の方が余白が小さいです。

見出し

# の後にスペースを押すと見出しになります。
目次に自動で反映されます。

マークダウン記法
# 見出し1
## 見出し2
### 見出し3
#### 見出し4

キーボードショートカット

Command Windows/Linux macOS
h1 Control + Alt + 1 Cmd + Option + 1
h2 Control + Alt + 2 Cmd + Option + 2
h3 Control + Alt + 3 Cmd + Option + 3
h4 Control + Alt + 4 Cmd + Option + 4

リスト

- か * の後にスペースを押すとリストになります。
Tab で１段階ネスト、Shift + Tab で１段階の脱ネストをします。

マークダウン記法
- Hello!
- Hola!
  - Bonjour!
  * Hi!

番号付きリスト

マークダウン記法
1. Hello!
2. Hola!

キーボードショートカット

Command Windows/Linux macOS
箇条書きリスト Control + Shift + 8 Cmd + Shift + 8
番号付きリスト Control + Shift + 7 Cmd + Shift + 7

テキストリンク

URL をクリップボードにコピー後、テキストを範囲選択して貼り付けてください。

クリックすると別タブでリンクを開きます。
またカーソルを合わせるとリンクの編集メニューが表示されます。

テキストリンク

画像

画像ファイルのドラッグ＆ドロップと貼り付けが可能です。
その場合、 images/[slug]/<uuid>.(ext) のパスに画像が保存されます。
記事の [slug] が不正な場合はエラーになるためご注意ください。

対応している拡張子：png, jpg, jpeg, gif, webp

また、テキストの貼り付けも対応しています。

貼り付け対応
![alt](url)
対応した拡張子をパスの末尾に持つ URL

コードブロック

以下の形式で入力後、スペースを押すとコードブロックが生成されます。

マークダウン記法
```
```lang
```lang:filename

~~~
~~~lang
~~~lang:filename

選択した言語ででシンタックスハイライトされます。言語はコンボボックスで選択可能です。

ファイル名の編集も左上のボックスで出来ます。空の場合はマークダウンに出力されません。

差分モード

言語名に diff- の接頭辞をつけるか、差分モードのスイッチを ON にすると、差分のシンタックスハイライトをします。

先頭に+、-、>、<、半角スペースのいずれが入っていない行はハイライトされません。

引用

> の後にスペースを押すと、引用が生成されます。

マークダウン記法
> 引用文

区切り線

--- の後にスペースを押すと、区切り線が生成されます。

マークダウン記法
---

メッセージ

以下を入力後にスペースを押すと、メッセージが生成されます。

マークダウン記法
:::message

:::alert

アコーディオン

:::detailsの後にスペースを押すと、アコーディオンが生成されます。

マークダウン記法
:::details

脚注

文章内で以下の後にスペースを押すと、選択範囲に脚注参照が文書の下部に脚注が生成されます。

マークダウン記法
[^text]

脚注参照の番号割り当ては自動でされます。マークダウン記法で入力した text は関係ないです。

脚注を削除する場合は、文中に対応する脚注参照を削除してください。

その他の挙動

  • 脚注参照をクリックすると選択、ダブルクリックすると該当の脚注にスクロールする。

  • 脚注は改行不可です。リンクなどのマークは適用可。

テーブル

:::table[row]-[col] の後にスペースを押すと、テーブルが生成されます。

row と col は 1 ~ 20 までの数値です。

マークダウン記法
:::table2-3

数式

アップデートで追加予定です。

インライン要素

マーク適用可能なテキストを範囲選択すると、バブルメニューが表示されます。

マークダウン記法
**太字** __太字__
*斜体* _斜体_
~~取り消し線~~
`コード`

キーボードショートカット

  • 太字：Cmd + B

  • 斜体：Cmd + I

  • 取り消し線：Cmd + Shift + S

  • コード：Cmd + E

埋め込み

埋め込み要素は、Zenn で指定された URL を貼り付けると自動的に変換されます。

  • リンクカード

  • Xのポスト

  • GitHub（ファイルのURL）

  • Gist（ファイルのURL）

  • CodePen

  • JSFiddle

  • CodeSandbox

  • StackBlitz

  • Youtube（動画のURL）

  • SpeakerDeck（スライドページのURL）

  • Docswell（スライドページのURL）

  • Figma

  • SlideShare（貼り付け未対応）

  • blueprintUE

  • Mermaid

Mermaid はエディタ上の編集が未対応なため、マークダウンファイルに直接書き込んでください。

ドラッグハンドラ

ブロックノードをドラッグ&ドロップで移動させることが可能です。

該当要素の上にマウスをホバーさせると出現し、クリックをするとノードを選択できます。

最後に

最初は Notion みたいな雰囲気で書けないかな〜と思いつきでしたが、開発してみるといい感じに使いやすいものが出来たと思います。

Zenn 記事のスタイルが公開されていたおかげで、初めから素晴らしい UI でエディタ開発できたのが、モチベが続く一番大きい要素でした。

記事執筆の候補として選んでいただけると、開発者としてもモチベーションが上がります！

それでは良い執筆ライフを！

Discussion