How to use

Contentfulのマークダウンエディタで執筆した記事を、Zenn風に出力してプレビューできるContentful Appです。
zenn-editorのパッケージをベースに作っており、Zenn独自記法を含むZennのスタイリングが適用されます。
Contentful上で動作するため、フロントエンドのフレームワークの影響は受けません。

screen-recording.mp4

使い方

ローカルでAppを起動する場合

1. リポジトリのcrone
2. npm install
3. npm run dev
4. ローカルの App URL (例: http://localhost:3000)をContentful Appに登録する

Cloudflare PagesにAppをデプロイする場合

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/

書き方

ZennのMarkdown記法一覧 を使えます。

なお、本Appで利用されている zenn-markdown-to-html は、現時点で <br> 以外のHTMLタグの埋め込みには対応していません。
（Contentfulのマークダウンエディタ自体には各種HTMLタグの入力が可能ですが、zenn側でプレビューできません）

関連パッケージ

• zenn-editor - Zenn独自記法をHTMLに変換するパーサー
• Forma 36 – ContentfulのUIキット
• Create Contentful App - Contentful Appの作成