npm 包 Hexo-Prism-Plus 使用教程

如果你使用 Hexo 构建博客,你可能需要让你的代码块更好地突出显示。这就是 npm 包 Hexo-Prism-Plus 的作用。本篇文章将会详细地介绍如何使用它来优化你的博客。

安装

首先,进入博客根目录,运行以下命令安装 Hexo-Prism-Plus:

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

然后,在博客的 _config.yml 文件中添加以下内容:

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

其中,prism_plugin.mode 需要设置为 preprocess,这是为了避免其他插件(如 hexo-abbrlink 等)对代码块的干扰。

最后,进入博客根目录,运行以下命令:

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

现在,Hexo-Prism-Plus 就已经安装好了。

使用

Hexo-Prism-Plus 默认支持以下语言:

  • markup (HTML, XML, SVG, MathML) -CSS
  • C-like (C, C++, C#, Java, JavaScript, Objective-C, PHP, TypeScript)
  • Python
  • Ruby
  • Shell script (Bash, etc.)
  • Unix-like config files (INI, JSON, YAML, etc.)
  • SQL
  • Swift

如果你的代码使用的是其他语言,你可以在 markdown 文件中指定语言类型。例如:

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

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

-- ----

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

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

总结

Hexo-Prism-Plus 是一个非常实用的插件,可以让你的博客中的代码块更好地突出显示。本篇文章详细介绍了如何安装和使用它,希望对你有所帮助。

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


猜你喜欢

  • npm 包 react-native-flip-page-divs 使用教程

    前言 随着移动设备的普及,越来越多人开始使用移动设备来阅读内容。与传统的纸质书籍不同,在移动设备上阅读电子书或杂志的很多人喜欢翻转书页。为了提供这种体验,许多开发人员使用 react-native 开...

    3 年前
  • npm 包 @magland/kbucket 使用教程

    npm 是一个用于包管理的工具,而 @magland/kbucket 则是一个用于前端开发的 npm 包。该包提供了一些可以方便地进行数据处理的工具,如在前端中存储和读取数据,同时也可以实现数据的共享...

    3 年前
  • npm 包 @ournet/horoscopes-data 使用教程

    npm 包 @ournet/horoscopes-data 使用教程 在前端开发中,我们经常需要获取星座运势相关的数据。为了方便开发者的使用,开发了一个 npm 包 @ournet/horoscope...

    3 年前
  • npm 包 element-ui-report 使用教程

    本文将介绍 npm 包 element-ui-report 的使用方法。该包是基于 Element UI 进行封装的报表生成组件,可帮助前端开发者快速构建报表,提高开发效率。

    3 年前
  • npm 包 ftp-client-fixed 使用教程

    FTP(文件传输协议)是一种用于在网络上进行文件传输的常用协议。在前端开发中,我们常常需要通过 FTP 上传或下载文件,而使用 npm 包 ftp-client-fixed 可以使此过程变得更加便捷。

    3 年前
  • npm 包 angular-testing-booster 使用教程

    在进行 Angular 项目测试时,通常需要安装许多依赖项和配置文件。这使得测试过程变得繁琐且容易出错。为了解决这个问题,我们可以使用一个专门为 Angular 测试设计的 npm 包:angular...

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

    介绍 react-lodash 是一个用于 React 框架的实用 JavaScript 工具库 Lodash 的封装,它提供了一个可重用的 React 组件,可以在 React 应用程序中使用 Lo...

    3 年前
  • npm 包 wonder-reroute 使用教程

    随着前端开发的复杂度越来越高,单页面应用(SPA)的使用越来越普遍。其中,页面路由管理是 SPA 开发中重要的一环。wonder-reroute 是一个用于实现 SPA 路由管理的 npm 包,本文将...

    3 年前
  • npm 包 jpacker 使用教程

    前言 在前端开发中,我们经常需要对多个文件进行合并、压缩、混淆等操作,以提高页面的加载速度和性能。此时,一个好用的构建工具就非常必要了。而 jpacker 正是一个优秀的 npm 包,它可以帮助我们完...

    3 年前
  • npm 包 conf-cal 使用教程

    前言 在前端开发中,配置文件是非常重要的一部分。我们需要创建自己的配置文件来定制项目的一些行为和特征,这样才能更好地完成开发任务。但是,手动操作配置文件需要一定的技能和时间成本,使用 npm 包 co...

    3 年前
  • npm 包 rcc-plugin-mediapicker-dmcsdk 使用教程

    前言 rcc-plugin-mediapicker-dmcsdk 是一款非常方便的前端 npm 包,它提供了一个简单易用的媒体选择器,可以使用该选择器轻松地上传、选择、管理媒体资源。

    3 年前
  • npm 包 terb 使用教程

    什么是 terb terb 是一个前端工具包,它包含了各种常用的工具和基础组件,如 DOM 操作、CSS 样式处理、事件处理等,以及一些实用的扩展组件,如表单验证、数据可视化等。

    3 年前
  • NPM 包 @equibit/bootstrap4-less 使用教程

    什么是 @equibit/bootstrap4-less @equibit/bootstrap4-less 是一个基于 Bootstrap 4 的 LESS 引擎,用于开发响应式、移动设备优先的 we...

    3 年前
  • npm 包 @erkez/react-gettext-parser 使用教程

    在前端开发过程中,我们常常需要将代码中的字符串进行国际化处理。在 React 项目中,我们可以使用 @erkez/react-gettext-parser 这个 npm 包来帮助我们解决这个问题。

    3 年前
  • npm 包 @qingclass/vue-aplayer 使用教程

    前言 在 Web 开发过程中,音频播放器是不可或缺的一个组件。而 @qingclass/vue-aplayer 就是一款基于 APlayer 开发的 Vue 音频播放器组件,可以极大地提升开发效率和用...

    3 年前
  • npm 包 @rgba-image/common 使用教程

    介绍 @rgba-image/common 是一个用于处理 RGBA 图片的 npm 包。它提供了各种各样的工具来操作 RGBA 图片,包括转换像素点的格式、对图片进行颜色操作、生成渐变图像等等。

    3 年前
  • npm包 adonis-notifications使用教程

    简介 adonis-notifications是一个基于Adonis框架的通知包,可以轻松地为Adonis应用程序添加通知功能。它支持多种通知类型,包括电子邮件、短信、Slack、Facebook M...

    3 年前
  • npm 包 epgg 使用教程

    EPGG 是一个基于 React 的 UI 组件库,它提供了许多常见的组件,如按钮、输入框、下拉菜单等等。在本文中,我们将介绍如何使用 epgg,以及如何利用它来开发前端应用。

    3 年前
  • npm 包 sigmasoft-css 使用教程

    在前端开发中,样式表是非常重要的一部分,常常可以决定网页是否能够吸引用户的关注。为了快速高效地开发样式表,我们可以使用一些工具来简化我们的工作流程。其中,sigmasoft-css 就是一个非常优秀的...

    3 年前
  • npm 包 react-image-polygon-annotation 使用教程

    在前端开发领域中,有很多优秀的 npm 包可以帮助我们快速完成复杂的任务。其中,react-image-polygon-annotation 是一个非常实用的 npm 包,可以帮助我们在图片上创建多边...

    3 年前

相关推荐

    暂无文章