開発したサービスの概要

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

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

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

お試し用に Web 版も用意しています。

始め方

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

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

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

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

機能紹介

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

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 のようにスラッシュコマンドによるノードの作成に対応しています。

段落の先頭で「/」と入力すると、コマンド一覧が出るためそこから選択してください。

マークダウン記法を忘れた時などに便利です。

最後に

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

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

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

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

Discussion