使用 ember-highlight-code NPM 包来展示你的代码

在前端开发中，很多情况下我们需要将代码展示在页面上，以便用户或者其他开发者查看。 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:

你想要高亮的代码
{{highlight-code language="jsx"}}
代码
{{/highlight-code}}

该组件支持许多编程语言 (除了 HTML 和 CSS)，所以你可以根据需要 高亮任何语言的代码。

{{highlight-code "ruby" 'puts "Hi! This is ruby code!"'}}

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:

{{addon-code-block
code='var foo = "bar"\nalert(foo)'
language='javascript'
theme='monokai'
showLineNumbers=true
showCopiedMessage=true
}}

配置

有两个选项是非常有用的: codeTheme 和 lineNumbersVisible。 这两个选项的使用方式及说明如下:

• codeTheme（字符串|可选，默认为 "tomorrow"）— 常用的配色方案之一
• lineNumbersVisible（布尔|可选，默认为 false）— 是否显示每行的行数

你可以通过在 config/environment.js 文件中添加如下代码块来全局配置：

'ember-highlight-code': {
  codeTheme: 'tomorrow',
  lineNumbersVisible: true
}

至此，用该插件来高亮代码就非常省事了，同时也赋予了你自定义实现需求的余地。

总结

在本文中，我们介绍了 ember-highlight-code 这一款能够将代码高亮的 Ember.js 插件。我们不仅学习了如何在 Ember.js 应用中使用这款插件，还探讨了其如何进行配置。这款插件可以帮助我们非常方便快捷地在应用中高亮代码，并且还提供了多种自定义配置选项，非常实用。

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