repository·canary·Indexed 20 days ago
https://github.com/zenn-dev/zenn-editorA collection of packages to replicate the Zenn Markdown ecosystem. It includes zenn-cli for local previewing, zenn-markdown-html for Node.js Markdown-to-HTML conversion, zenn-content-css for Zenn-style styling, zenn-embed-elements for React-based web components (such as KaTeX), and zenn-model for handling Zenn-specific data structures and metadata.
zenn-model package provides utility types and functions for handling Zenn-specific data structures, such as article and book filenames and metadata (frontmatter). It serves as the core data model layer for the Zenn ecosystem.zenn-cli is a command-line interface designed for managing and previewing Zenn article content locally. It allows developers to work with Zenn's specific Markdown style and content structure on their own machines before publishing.The zenn-editor repository manages a collection of packages used to implement the Zenn Markdown style. These packages can be used to build tools similar to Zenn CLI or the Zenn VSCode extension.
| Package Name | Description |
|---|---|
zenn-cli | CLI for displaying local articles and books |
zenn-content-css | Styles for Markdown previews |
zenn-embed-elements | Web Components for embedded elements (e.g., Tweets, Mermaid) |
zenn-markdown-html | Converts Markdown to HTML |
zenn-model | Handles article and book data |
Use zenn-markdown-html to convert Markdown content into HTML that supports Zenn's unique syntax. This package provides two main interfaces depending on the level of decoration required:
markdownToHtml: Full support for Zenn articles, books, and comments. This is the standard choice for rich content.markdownToSimpleHtml: Limited support for simple decorations, suitable for fixed messages in publications.Refer to the Zenn Markdown Guide for a complete list of supported syntax.
import markdownToHtml from 'zenn-markdown-html';
const html = markdownToHtml(markdown);
// Or for limited decoration:
import { markdownToSimpleHtml } from 'zenn-markdown-html';
const simpleHtml = markdownToSimpleHtml(markdown);The package provides different SCSS files for syntax highlighting depending on the engine used:
_shiki.scss: Current standard styles for Shiki._prism.scss: Legacy styles for Prism.js. This is kept for backward compatibility with existing articles that use Prism.js but is deprecated and may be removed in the future.zenn-cli tool allows you to preview your content by reading Markdown files and configuration files from the ./books directory located at your project root.To embed a YouTube video, place the video URL on its own line with newlines before and after. The explicit @[youtube](ID) syntax is no longer required; simply pasting the URL is sufficient.
https://www.youtube.com/watch?v=WRVsOCh907oCreate headings using # symbols. For accessibility, it is recommended to start with ## (Heading 2) rather than # (Heading 1).
# Heading 1
## Heading 2
### Heading 3
#### Heading 4Wrap code in triple backticks (```). You can specify the language for syntax highlighting (powered by Prism.js). To display a filename above the block, use the format language:filename.
```js:fooBar.js
const great = () => {
console.log("Awesome")
}@@ -4,6 +4,5 @@
+ const foo = bar.baz([1, 2, 3]) + 1;
- let foo = bar.baz([1, 2, 3]);The Zenn Markdown style automatically converts standalone URLs into rich Link Cards. This behavior depends on the context of the URL within the document.
When a URL is placed on its own line, it is converted into a Link Card.
URLs pointing to GitHub repositories (e.g., https://github.com/user/repo) are specifically recognized and rendered as GitHub repository cards.
- https://example.com) are not converted to Link Cards; they remain as plain text or standard Markdown links.[text](https://url.com) are not converted to Link Cards.:::message blocks are not converted to Link Cards.<iframe>) are not processed as embeddable content by the Zenn Markdown parser.### Default Link Card
https://zenn.dev
### GitHub Repository Card
https://github.com/zenn-dev/zenn-editorUse standard Markdown for styles and HTML comments for private notes:
*text* or _text_.**text**.~~text~~.`code`.<!-- comment --> (Note: Multi-line comments are not supported; these will not appear on the published page).*Italic* **Bold** ~~Strikethrough~~ `code`
<!-- TODO: note -->*イタリック*
**太字**
~~打ち消し線~~
インラインで`code`を挿入する
<!-- TODO: ◯◯について追記する -->Zenn supports standard image formats like .png. Note that certain extensions like .svg may not be supported depending on the environment configuration. You can also use absolute URLs to reference external images.
