npm 包 handroll 使用教程-JavaScript中文网-JavaScript教程资源分享门户

作为前端开发者，我们经常需要将 markdown 文档转换为静态网页，以方便分享和展示。而手动转换耗费时间又效率低下。这时候一个自动化的解决方案就可以大大提高开发效率，而 npm 包 handroll 就是这样一个优秀的解决方案。本文将详细介绍手册的使用方法，希望能够帮助读者快速上手。

一个简单的例子

我们来看一下使用 handroll 对 markdown 文档进行转换的具体步骤。首先，我们需要在终端中运行以下命令：

npx handroll ./src ./dist

其中，./src 代表 markdown 文档所在的目录，./dist 代表转换后的 HTML 页面所要输出的目录。当然，你也可以使用 npx handroll <input-file> <output-file> 来处理单个文件。

如果你的系统上没有安装 handroll，你还需要先运行以下命令进行安装：

npm install -g handroll

手动指定配置文件的命令如下：

npx handroll --config <path-to-config-file>

指定配置文件路径即可。config 文件通常为 .handrollrc.js。

以下是一个简单的例子：

module.exports = {
  default: {
    input: './src/pages',
    output: './dist',
  },
};

可以看到，我们在 config 文件中指定了输入和输出的路径，当然还有其他可选配置，比如主题、输出格式等等。

手动配置

接下来，我们将详细介绍各项手动配置项的作用和用法。

input

input 配置项表示 markdown 文件所在的目录路径。当我们运行 npx handroll 命令时，它会扫描该目录下的所有 markdown 文件并进行转换。

module.exports = {
  default: {
    input: './src',
    output: './dist',
  },
};

output

output 配置项表示转换后的 HTML 页面所要输出的目录路径。

module.exports = {
  default: {
    input: './src',
    output: './dist',
  },
};

template

template 配置项表示转换后的 HTML 页面的模板文件路径。如果不指定该配置项，则会使用默认的模板文件（即系统内置的默认主题）。

module.exports = {
  default: {
    input: './src',
    output: './dist',
    template: './template.html',
  },
};

extensions

extensions 配置项用来指定 markdown 文件的扩展名。默认为 .md。

module.exports = {
  default: {
    input: './src',
    output: './dist',
    extensions: ['.md', '.markdown'],
  },
};

formatter

formatter 配置项表示转换后的 HTML 文件的输出格式，可以是 pretty （带有良好的缩进和格式化）或者 raw （没有格式化）。默认为 pretty。

module.exports = {
  default: {
    input: './src',
    output: './dist',
    formatter: 'pretty',
  },
};

plugins

手册还提供了一些插件来增强转换效果。下面是一些常用插件的介绍：

handroll-plugin-toc

该插件用于自动生成目录。

-- -------------------- ---- -------
-------------- - -
  -------- -
    ------ --------
    ------- ---------
    -------- -
      ---------------------------------
    --
  --
--展开代码

handroll-plugin-code-snippet

该插件用于抽取 markdown 文件中的代码片段，并生成高亮显示的 HTML 代码。

-- -------------------- ---- -------
-------------- - -
  -------- -
    ------ --------
    ------- ---------
    -------- -
      ------------------------------------------
    --
  --
--展开代码

除此之外，还有很多其他的插件可以用来增强手册的功能，读者可以根据自己的需求选择使用。

总结

在本文中，我们详细介绍了 handroll 的使用方法，包括安装、基本使用、手动配置、常用插件等。希望读者可以通过本文的指导，快速上手 handroll，提高自己的前端开发效率。

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

npm 包 handroll 使用教程