在前端开发中，很多情况下我们需要将代码展示在页面上，以便用户或者其他开发者查看。 ember-highlight-code 是一款能够将代码高亮展示的 Ember 插件，具有易用性和高度的自定义能力。
安装和使用
如果你的工程已经使用了 Ember.js，那么你可以通过直接使用 npm 安装 ember-highlight-code。
npm install --save-dev ember-highlight-code
Once you’ve installed the package, you’ll need to import it into your Ember component/template. If you want to use the addon’s syntax highlighter, you’ll only need to import the component and use it like this:
-------- ---------------- ---------------- -- -------------------
该组件支持许多编程语言 (除了 HTML 和 CSS)，所以你可以根据需要 高亮任何语言的代码。
---------------- ------ ----- ---- ---- -- ---- ---------
You can also use addon-code-block, which provides more advanced features. For example, with addon-code-block you can configure the code theme, line numbers, the text to display when the code is copied, and more. Here’s an example:
------------------ --------- --- - ------------------ --------------------- --------------- -------------------- ---------------------- --
配置
有两个选项是非常有用的: codeTheme 和 lineNumbersVisible。 这两个选项的使用方式及说明如下:
codeTheme（字符串|可选，默认为 "tomorrow"）— 常用的配色方案之一lineNumbersVisible（布尔|可选，默认为 false）— 是否显示每行的行数
你可以通过在 config/environment.js 文件中添加如下代码块来全局配置：
----------------------- - ---------- ----------- ------------------- ---- -
至此，用该插件来高亮代码就非常省事了，同时也赋予了你自定义实现需求的余地。
总结
在本文中，我们介绍了 ember-highlight-code 这一款能够将代码高亮的 Ember.js 插件。我们不仅学习了如何在 Ember.js 应用中使用这款插件，还探讨了其如何进行配置。这款插件可以帮助我们非常方便快捷地在应用中高亮代码，并且还提供了多种自定义配置选项，非常实用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e16a563576b7b1eca46