blear.ui.code-highlight

1Introduction

2Example

var codeHighlight = require('blear.ui.code-highlight');


// 高亮某个元素下的所有 pre
codeHighlight.element(el);

// 高亮文本
codeHighlight.text(text, lang);

pre 标签标记 prism 类，使用 data-language 表示语言。

<pre class="prism" data-language="js">
    <code>

3Langs

默认支持 c、js、css、html 四种语言，其他语言需要手动添加。可选：

require('blear.ui.code-highlight/langs/bash.js');
require('blear.ui.code-highlight/langs/dart.js');
require('blear.ui.code-highlight/langs/docker.js');
require('blear.ui.code-highlight/langs/go.js');
require('blear.ui.code-highlight/langs/ini.js');
require('blear.ui.code-highlight/langs/java.js');
require('blear.ui.code-highlight/langs/json.js');
require('blear.ui.code-highlight/langs/jsx.js');
require('blear.ui.code-highlight/langs/less.js');
require('blear.ui.code-highlight/langs/lisp.js');
require('blear.ui.code-highlight/langs/lua.js');
require('blear.ui.code-highlight/langs/makefile.js');
require('blear.ui.code-highlight/langs/markdown.js');
require('blear.ui.code-highlight/langs/nginx.js');
require('blear.ui.code-highlight/langs/php.js');
require('blear.ui.code-highlight/langs/python.js');
require('blear.ui.code-highlight/langs/ruby.js');
require('blear.ui.code-highlight/langs/sass.js');
require('blear.ui.code-highlight/langs/scss.js');
require('blear.ui.code-highlight/langs/sql.js');
require('blear.ui.code-highlight/langs/stylus.js');
require('blear.ui.code-highlight/langs/swift.js');
require('blear.ui.code-highlight/langs/ts.js');
require('blear.ui.code-highlight/langs/yaml.js');

4Themes

内置两种主题风格，light 和 dark。也需要手动引用。

这里需要注意的是，导入样式可以指定作用域（即 css 选择器上级），避免污染业务样式。

require('blear.ui.code-highlight/themes/light.js')('.typo');
require('blear.ui.code-highlight/themes/dark.js')('.typo');

5Features

内置两种功能，行号和行亮，需要收到引用。

用法：

<pre class="prism" data-highlight="1, 3-7, 9">
    <code>

使用“,”分段，使用“-”表示范围。

require('blear.ui.code-highlight/features/line-numbers.js');
require('blear.ui.code-highlight/features/line-highlight.js');

6Static

6.1.element([el]): undefined

高亮元素下的所有符合规范的 pre。

6.1.1el

  • 类型：Element
  • 说明：查找元素
  • 默认：body

6.2.text(text, lang, [wrap]): html

高亮元素下的所有符合规范的 pre。

6.2.1text

  • 类型：string
  • 说明：文本

6.2.2lang

  • 类型：string
  • 说明：语言，如果没有该语言，需要预先载入

6.2.3wrap

  • 类型：boolean
  • 说明：是否包装 <pre><code>
  • 默认：false

6.2.4html

  • 类型：string
  • 说明：高亮后的 html

7Dependencies

8Reference