npm 包 gitbook-plugin-include-codeblock-patched 使用教程

在前端开发中,我们经常需要在文档中嵌入代码块,以便展示代码示例或者说明代码的使用方法。而 gitbook-plugin-include-codeblock-patched 是一个支持在 GitBook 文章中嵌入代码块的 npm 包,让我们在编写技术文档时更加轻松自如。

什么是 gitbook-plugin-include-codeblock-patched?

gitbook-plugin-include-codeblock-patched 是 gitbook-plugin-include-codeblock 的增强版插件。原插件只支持从文件中导入代码块,而 gitbook-plugin-include-codeblock-patched 则支持从远程 Git 仓库或者本地项目中导入代码块,方便了文档编写者进行代码块的维护。

安装和使用

安装

通过 npm 安装 gitbook-plugin-include-codeblock-patched 插件:

--- ------- ---------- ----------------------------------------

使用

  1. 在本地项目中构建需要展示的代码块,例如:

    -- ------
    ------ -------- ------ -- -
      ------ - - --
    -
  2. 在 GitBook 文章中通过以下 tag 导入代码块:

    -- ----------------------- ------------- ----------------- --

    其中,path 指定了本地项目中需要展示的代码块路径,lang 指定了代码块的语言。

  3. 编译 GitBook 文章,预览效果即可。

指导意义

gitbook-plugin-include-codeblock-patched 的使用方法相对简单,但是它让我们能够更方便地在技术文档中展示代码块,让技术分享变得更加直观和易懂。在实际工作中,我们也可以通过该插件轻松地在内部文档或者公开的技术博客中发布技术文章。

示例代码

代码库:https://github.com/ruanyf/gitbook-plugin-include-codeblock-patched

app.js

------ -------- ------ -- -
  ------ - - --
-

GitBook 文章

-- ----------------------- ------------- ----------------- --

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055fc081e8991b448dd124


猜你喜欢

  • npm 包 babel-plugin-nondeterminism 的使用教程

    简介 babel-plugin-nondeterminism 是一款非常实用的 npm 包,它可以帮助开发者消除 JavaScript 代码的不确定性。当我们进行 JavaScript 代码混淆或者压...

    3 年前
  • npm 包 bisu-react-row-search 使用教程

    简介 Bisu-react-row-search 是一个基于 React 的 npm 包,用于在表格的每一行添加筛选功能。该包可以帮助前端开发者快速实现表格筛选,提升工作效率和用户体验。

    3 年前
  • NPM 包 Placement 使用教程

    简介 Placement 是一个轻量级、易于使用的 npm 包,用于实现元素相对于其包含块的定位。它可以方便地实现元素的上、下、左、右和中心定位,并且支持自动调整位置,以确保元素不会超出包含块。

    3 年前
  • npm 包 cfn-lex-intent 使用教程

    前言 AWS CloudFormation 提供了使用 AWS 服务和其他资源来描述和部署云资源的简单语言。cfn-lex-intent 是 AWS CloudFormation 的扩展,用于创建 A...

    3 年前
  • npm 包 the-ar 使用教程

    前言 在前端开发中,AR 技术的应用日益广泛,为了方便开发人员的使用,社区中存在了很多 AR 相关的 npm 包,其中 the-ar 就是一个比较流行的 AR 库。

    3 年前
  • npm 包 cfn-lex-slot-type 使用教程

    前言 Amazon Lex 是 Amazon Web Services(AWS)的一项语音与文本交互技术,可以为企业应用程序、移动应用程序和机器人提供自然语言交互的功能。

    3 年前
  • NPM 包 JWT-Auth-Class 使用教程

    介绍 jwt-auth-class 是一个使用 JWT (JSON Web Token) 进行身份验证的 Node.js 模块,它提供了一组 API 用于生成、验证和解码 JWT。

    3 年前
  • npm 包 @vinks/astype 使用教程

    @vinks/astype 是一个基于 TypeScript 的数据类型转换库,旨在提供一种简单易用、高效可靠的方式对数据类型进行转换。在前端开发过程中,我们经常需要将数据从一种格式转换为另一种格式,...

    3 年前
  • npm 包 autodoc-gen 使用教程

    如果你是一位前端开发人员,那么你一定知道文档对于一个项目的重要性。然而,编写文档是一件费时费力的事情,特别是当你有很多代码需要记录的时候。为了解决这个问题,我们可以使用 autodoc-gen 这个 ...

    3 年前
  • npm 包 cfn-lex-bot 使用教程

    介绍 cfn-lex-bot 是一个可以帮助开发者快速构建基于 Amazon Lex 的聊天机器人,并将其部署到 AWS Lambda 和 Amazon API Gateway 上的 npm 包。

    3 年前
  • npm 包 imgur-alb 使用教程

    在前端开发中,经常需要用到图片托管服务。Imgur 是一个常用的图片托管网站,而 npm 包 imgur-alb 则为我们提供了一个方便的接口,可以使用 JavaScript 快速接入 Imgur。

    3 年前
  • npm 包 replace-buffer 使用教程

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,由于它强大的异步I/O 和事件驱动能力,成为了前端开发不可或缺的一环。随着 Node.js 的不断发展,npm 也...

    3 年前
  • npm 包 random-record-sleeve 使用教程

    在前端开发中,随机生成数据是非常常见的需求,比如生成随机数、生成随机字符串等等。而在音乐领域,随机生成唱片封面也是很有趣的一件事情。这时候,就可以使用 npm 包 random-record-slee...

    3 年前
  • npm 包 sass-bones 使用教程

    什么是 sass-bones sass-bones 是一个用于生成 Sass 文件结构的 npm 包。它能够快速生成一个基础的 Sass 文件结构,让你在开发前端样式时更加高效。

    3 年前
  • npm 包 @dleavitt/react-css-transition 使用教程

    在前端开发中,CSS 动画在网页设计中起着重要作用。在传统的 CSS 动画中,需要手动编写 CSS 样式和 JavaScript 代码,难免会出现样式错误和动画执行异常的情况。

    3 年前
  • npm 包 gulp-string-thing 使用教程

    在前端开发中,自动化构建工具是必不可少的,其中 Gulp 是一种非常流行的自动化构建工具。在 Gulp 中,通过使用各种 npm 包可以轻松完成各种任务,比如压缩 js 和 css、生成 sprite...

    3 年前
  • npm 包 qub-telemetry 使用教程

    前言 在前端应用程序的实现过程中,追踪用户的行为数据是非常重要的。在这个过程中,开发人员需要的是一套能够方便地收集和分析数据的工具集。qub-telemetry 就是这样一款灵活可靠的 npm 包,可...

    3 年前
  • npm 包 qub-telemetry-applicationinsights 使用教程

    介绍 qub-telemetry-applicationinsights 是一个用于发送跟踪事件和指标到 Microsoft Application Insights 的 npm 包。

    3 年前
  • npm 包 qub-vscode 使用教程

    前言 随着 Web 前端技术的不断发展和迭代,前端开发过程变得越来越复杂。为了简化前端开发过程,使前端开发工作更加高效、方便,出现了许多工具和框架。其中,一个重要的工具是 npm 包,它可以帮助开发者...

    3 年前
  • npm 包 react-giphy-select 使用教程

    简介 React-Giphy-Select 是一个 React 组件,提供了一个简单的接口,使您可以在您的应用程序中方便地集成 Giphy 图片搜索和选择。该组件通过发送请求到 Giphy API 并...

    3 年前

相关推荐

    暂无文章