zenn-dev/zenn-editor

zenn-dev-Profil

Letzte erfasste Quellaktivität: 28. Juli 2026 um 04:51

SkillsMP-Katalog aktualisiert: 17. Oktober 2026 um 00:09

gesammelte Skills: 1

GitHub-Stars: 748
GitHub-Forks: 88

README des Repositorys

README-Quelldatei: README.md

README-Quelldatei lesen

Vollständige README anzeigen

<a href="https://flatt.tech/oss/gmo/trampoline" target="_blank"><img src="https://flatt.tech/assets/images/badges/gmo-oss.svg" height="24px"/></a> ![Zenn Editor](https://user-images.githubusercontent.com/34590683/91540859-60e06780-e956-11ea-9762-0acac2b7c4c5.png) このリポジトリは、主に Zenn の Markdown に関するパッケージをまとめて管理しています。これらのパッケージを利用することで、[Zenn CLI](https://zenn.dev/zenn/articles/install-zenn-cli) や Zenn の [VSCode 拡張](https://marketplace.visualstudio.com/items?itemName=zenn.zenn-preview) のような周辺システムを作ることができます。 > [!WARNING] > このプロジェクトは厳密なセマンティックバージョニングに従っていません。現状、破壊的な変更を含むバージョンアップはマイナーバージョンアップで対応しています。変更内容は[リリースページ](https://github.com/zenn-dev/zenn-editor/releases)をご覧ください。 ## パッケージ一覧 | パッケージ名 | 説明 | | ------------------- | -------------------------------------------------------------- | | 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 に変換する ```tsx import markdownHtml from 'zenn-markdown-html'; ``` 以下のように Markdown を HTML に変換します。この処理は、Node.js でのみ実行できます。ブラウザで実行するとエラーになることにご注意ください。 ```ts const html = markdownHtml(markdown); ``` 取得した HTML を埋め込み親要素のクラス名には`znc`という文字列を指定する必要があります。これは後述の CSS を適用するために必要です。 ```tsx // Reactの場合 <div // "znc"というクラス名を指定する className="znc" // htmlを渡す dangerouslySetInnerHTML={{ __html: html, }} /> ``` ### 2. CSS を読み込む ```ts import 'zenn-content-css'; ``` ### 3. 埋め込みコンテンツを有効にするため script を読み込む以下のスクリプトを読み込むことで、Tweet や Mermaid などの埋め込み記法が使用できるようになります。 ```html <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 に対応していないため、クライアント側で読み込む必要があります。 ```ts // 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 スキル](skills/zenn-cli/SKILL.md)には、Zenn CLI による Scrap 操作、セットアップ、環境変数、安全確認の手順をまとめています。利用するプロジェクトのディレクトリで、次のいずれかの方法で取り込めます。Zenn CLI 本体のセットアップはスキル内の案内に従ってください。 ### npx skills を使う ```bash npx skills add zenn-dev/zenn-editor --skill zenn-cli ``` 対話形式で取り込み先の AI エージェントを選択します。詳細は [Skills のドキュメント](https://github.com/vercel-labs/skills#readme)を参照してください。 ### npx rulesync を使う ```bash 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://rulesync.dyoshikawa.com/reference/cli-commands.html)を参照してください。 ## 開発者向けドキュメント https://zenn-dev.github.io/zenn-docs-for-developers/ ## License [MIT](LICENSE)

README des Repositorys wird geladen…

Skills in diesem Repository

Softwareentwickler

1 Berufskategorien · 100% klassifiziert

Skill

Beruf

Beschreibung

Aktualisiert

release-pr

Softwareentwickler

zenn-editor の最新リリースから次の patch バージョンを決定し、前回のリリースPR以降にマージされたPRを列挙して canary から main へのリリースPRを作成する。リリースPR作成の依頼で使用する。

Quellsprache: Japanisch

2026-07-28

Es werden 1 von 1 gesammelten Skills angezeigt.

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/zenn-dev/zenn-editor.