Qiita/Zennに直接投稿できて、最高に書きやすいMarkdown Editorを作った

技術記事を投稿しよう！
そう思っていざ書いてみてもなかなかうまくいかないですよね
特に面倒なのが、markdownです。

markdownを使ってるとこんなことがよく起こります。

• Readme くらいは書くんだけどイマイチ苦手
• Tableがむちゃくちゃ不便
• どれがどのmarkdownか覚えてない。

そこで作ったのが、リアルタイムプレビュー付きの Markdown エディタ No Markdown(Not Only Markdown) です。
Markdownに慣れている人にも慣れていない人にも優しいツールを目指しました。

No Markdown

目次

1. 主な機能

1. editorからmarkdownとして編集する
2. previewから見た目どおり編集する
3. qiitaもしくはzennに投稿する

2. 対応しているmarkdown

1. 太字 斜体 打ち消し
2. リンク
3. 画像
4. リスト 番号付きリスト チェックボックス
5. 見出し
6. テーブル
7. 引用
8. 折りたたみ詳細
9. コード
10. 水平線

3. 使用技術
4. 追加したい機能
5. まとめ

1. 主な機能

1. editorからmarkdownとして編集する

最もシンプルな使い方は、左側のediotrから直接編集することです。
上部にあるツールバーから直接markdownを挿入できるので、markdownを覚える必要がありません。
また / を使うことによりマウス操作せずともコマンドを呼び出せます。

ツールバーの例

スラッシュコマンドの例

2. previewから見た目どおり編集する

見た目から直接編集したい方には、previewから編集がおすすめです。
ダブルクリックで行を編集したり、範囲選択で一部分だけ太字にできたりします。
また、空白行を押して画像や表の挿入もできます。

preview編集の例

範囲選択の例

3. qiitaもしくはzennに投稿する

書いた記事を直接、qiita、zennに投稿することも可能です。
qiita、zenn(github連携)のアカウントがあれば直接投稿できます。
セキュリティが不安な方はmarkdownをコピーやDLすることも可能です。

qiita投稿の例

対応しているmarkdown

1. 太字 斜体 打ち消し

太字は /bold、斜体は /italic、打ち消しは /strike で入力できます。
また、htmlタグの <b>(<strong>)、<i>、<s> も使用可能です。
htmlタグは投稿やコピーの際には、markdownに変換されます。

2. リンク

リンクは/linkまたは/urlで入力できます。
htmlタグの<a>も使用可能です。

3. 画像

画像は /image で入力できます。
htmlタグの</img>も使用可能です。
editor側、preview側から画像をアップロードでき、Altや大きさの変更も可能です。
ただし、コピー、DLの際は適応されません。
また直接qiitaに投稿する際は、ローカル画像は
catbox
にアップロードされるので、プライベートな画像の際はコピーをお試しください。

画像編集の例

4. リスト 番号付きリスト チェックボックス

リストは /list、番号付きリストは /olist、チェックボックスは/checkboxで入力できます。
editorでは次のリスト要素(-、や2.)が自動挿入されます。
解除の際は Enter を二回押すか、そのまま消してください
チェックボックスはpreviewから直接チェックすることもできます。

5. 見出し

それぞれ/h1~/h6で入力できます。
htmlタグの <h1>~<h6> も使用可能です。

6. テーブル

/tableで入力できます。
preview側で直接tableの操作が可能です。
テーブル要素はmarkdownでも使いにくい要素のため、previewでの編集をおすすめします
preview側のテーブルをクリックすると編集できます。

previewでのテーブル編集の例

7. 引用

/quote で入力できます。
> >で二重引用以上にできますが、markdownの形式によっては対応していない場合があるので注意が必要です。

8. 折りたたみ詳細

/details で入力できます。
一行空行が必要です。
zennは独自のdetailsを採用しているため、<details open>と書いても、openが無効化されます。

details.html

<details open><summary>詳細</summary>　<!-- openはzennでは無効です。 -->
<!-- 一行空行が必要です。 -->
内容

</details>

9. コード

インラインコードは /inlinecode、コードブロックは /codeblock で入力可能です。
htmlタグの code、<pre><code> も使用可能です。
コードブロックでは、言語名:ファイル名 例 js:app.js のように入力すると、
qiitaとzennではシンタックスハイライトが適用されます。
ハイライトされるかどうかは、qiitaとzennのシンタックスハイライターに依存しているため、投稿時にはハイライトされない場合もあります。

コードブロックの例

シンタックスハイライトの例

10. 水平線

/hr で入力できます。
htmlタグの<hr>も使用可能です。

3. 使用技術

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Editor: Code Mirror
• Styling: Tailwind CSS
• Code Highlight: Shiki
• Auth: NextAuth.js
• Database: Supabase
• Test: Vitest, Playwright

4. 追加したい機能

• モバイルのUI改善
• qiita、zenn独自の記法の拡張

5. まとめ

自分で書いていても使いやすいmarkdown editorができたと感じます。
スマートフォン対応はまだ気に入ってませんが、よければ使ってみてください。