zenn-editor

このリポジトリは、主に Zenn の Markdown に関するパッケージをまとめて管理しています。 これらのパッケージを利用することで、Zenn CLI や Zenn の VSCode 拡張 のような周辺システムを作ることができます。

[!WARNING] このプロジェクトは厳密なセマンティックバージョニングに従っていません。現状、破壊的な変更を含むバージョンアップはマイナーバージョンアップで対応しています。変更内容はリリースページをご覧ください。

パッケージ一覧

パッケージ名	説明
zenn-cli	ローカルの記事・本を表示するための CLI
zenn-content-css	Markdown のプレビュー時のスタイル
zenn-embed-elements	ブラウザ上で動作してほしい埋め込み要素( Web Components で実装)
zenn-markdown-html	Markdown を HTML に変換する
zenn-model	記事や本のデータを扱う

Zenn と同じ Markdown スタイルを使用する

Zenn と同じ Markdown を使用するには複数のパッケージを組み合わせる必要があります。

1. zenn-markdown-html により Markdown を HTML に変換する

import markdownHtml from 'zenn-markdown-html';

以下のように Markdown を HTML に変換します。この処理は、Node.js でのみ実行できます。ブラウザで実行するとエラーになることにご注意ください。

const html = markdownHtml(markdown);

取得した HTML を埋め込み親要素のクラス名にはzncという文字列を指定する必要があります。これは後述の CSS を適用するために必要です。

// Reactの場合
<div
  // "znc"というクラス名を指定する
  className="znc"
  // htmlを渡す
  dangerouslySetInnerHTML={{
    __html: html,
  }}
/>

2. CSS を読み込む

import 'zenn-content-css';

3. 埋め込みコンテンツを有効にするため script を読み込む

以下のスクリプトを読み込むことで、Tweet や Mermaid などの埋め込み記法が使用できるようになります。

<script src="https://embed.zenn.studio/js/listen-embed-event.js"></script>

このスクリプトは<head>タグ内で読み込みます。また、defer 属性や async 属性を指定すると SPA 等でのページ遷移時に正しく埋め込みが行われない可能性があることにご注意ください。

4. （KaTeX 記法を使う場合のみ）zenn-embed-elementsを読み込む

zenn-embed-elementsは SSR に対応していないため、クライアント側で読み込む必要があります。

// React で使う場合の例
import 'zenn-content-css';

export default function App(props) {
  useEffect(() => {
    import('zenn-embed-elements');
  }, []);

  return (
    <div
      className="znc"
      dangerouslySetInnerHTML={{
        __html: props.html, // markdownから変換されたHTMLを渡す
      }}
    />
  );
}

AI エージェント向けスキルを取り込む

zenn-cli スキルには、Zenn CLI による Scrap 操作、セットアップ、環境変数、安全確認の手順をまとめています。利用するプロジェクトのディレクトリで、次のいずれかの方法で取り込めます。Zenn CLI 本体のセットアップはスキル内の案内に従ってください。

npx skills を使う

npx skills add zenn-dev/zenn-editor --skill zenn-cli

対話形式で取り込み先の AI エージェントを選択します。詳細は Skills のドキュメントを参照してください。

npx rulesync を使う

npx rulesync fetch zenn-dev/zenn-editor --skills zenn-cli
npx rulesync generate --targets claudecode --features skills

スキルを .rulesync/skills/zenn-cli/ に取得し、AI エージェント向けの配置を生成します。上記は Claude Code 向けの例です。--targets は利用するツールに合わせて指定してください。既存の rulesync.jsonc に対象ツールを設定済みの場合は、npx rulesync generate --features skills でその設定を使えます。詳細は Rulesync のドキュメントを参照してください。

開発者向けドキュメント

https://zenn-dev.github.io/zenn-docs-for-developers/

License

MIT