npm 包 Zenn 使用教程

前言

Zenn 是一个由日本技术先锋 ozaki25 创建并维护的开源项目，用于提供一种可视化的方式来呈现 Markdown 书籍和文章。在当前的互联网技术氛围中，Markdown 语法已经被广泛使用，将 Markdown 转化为可视化的内容呈现方式是 Zenn 的主要任务。

Zenn 的特性

• 提供了便捷的 Markdown 编辑器，支持语法高亮和代码块。
• 支持使用 Vue.js 与 React(JSX) 编写丰富的 Markdown 同文档。
• 可以嵌入 CodePen 和 Gist，实现在线编辑、运行和展示。
• 支持像互联网教程一样的目录结构、章节标题、标题编号等同级样式。

安装 Zenn

在工程根目录下使用 npm 安装 zenn：

$ npm install zenn -g

初始化仓库

1. 使用 zenn init 来在目录下创建仓库。其中 abc 是仓库名称，可自定义。

$ cd ~/Desktop
$ mkdir abc && cd abc
$ zenn init

1. 在仓库目录下，创建 README.md 和 sub/ 目录

$ touch README.md
$ mkdir sub

开始使用

以下是 Zenn 使用的简单案例。要查看行为效果，请在终端中运行 zenn preview。

内联代码块

Zenn 中内联代码块使用 ` ` 进行包裹，例如：

请使用 \`console.log('hello world')\` 打印 HelloWorld。

代码块

Zenn 中代码块使用 ``` 进行包裹，并指定语言类型。例如，这是一个 JavaScript 代码块：

console.log('hello world')

引用链接

在 Zenn 中使用链接时，请使用引用链接，例如：

[Zenn](https://zenn.dev/yuntan)

这种方式使代码更易读，也适合长链接。

快速发布

1. 在 zenn.dev 上注册您的账户，并登录
2. 查看 https://zenn.dev/settings/token 页面以获取离线令牌
3. 在您的本地环境中，运行以下命令：

$ zenn login --username {login name of zenn.dev} --token {offline token}

1. 登录注册成功后，即可通过以下方式发布文章：

$ zenn publish --slug {slug} # slug 为 slugified 后的博客标题

结语

本文简要介绍了 npm 包 Zenn 的使用和发布方法。对于前端开发人员和 Markdown 爱好者来说，Zenn 将是一个非常实用的工具。Zenn 提供了高效的 Markdown 编辑器、能够创建目录结构和丰富的 Markdown 内容等功能，非常有助于提高 Markdown 编写的效率和可视化呈现的质量。希望本文能够对您在使用 Zenn 上提供一些指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbb81e8991b448e62f8