Code 预览组件

绑定元素选择器或 DOM 对象

设置原始 code 值，默认取目标元素中的内容

是否开启 Code 预览功能，可选值有：

• true 开启 Code 的普通预览
• false 关闭 Code 预览（默认）
• "iframe" 开启 Code 在 iframe 模式中预览

当开启该属性时，elem 指定的元素需要设置成以下结构：

<pre class="layui-code" lay-options="{}">
  <textarea>
code content
  </textarea>
</pre>

false

开启预览后的面板布局方式，值为一个数组，数组的可选成员有：

• code 代码区域
• preview 预览区域

面板将根据数组的排列顺序来显示，如：

layout: ['code', 'preview']

设置 Code 和预览区域的公共样式

设置 Code 区域的局部样式，优先级高于 style 属性

设置预览区域的局部样式，优先级高于 style 属性

设置实例的唯一索引，以便用于其他操作

追加实例面板的 className，以便对其自定义样式

用于开启 preview 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：

• copy ^2.8.2+ : 代码复制
• full : 最大化显示
• window : 在新窗口预览。一般当 layout: 'iframe' 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。

工具图标将根据数组的排列顺序来显示，如：

tools: [
  'full',
  'window',
  // 自定义扩展工具 --- 2.8.17+
  {
    title: ['切换高亮主题'],
    type: 'theme',
    event: function(obj) {
      console.log(obj); // 当前实例相关信息
      // do something
    }
  }
]

type 值对应图标 className 的 layui-icon- 后的名称。如图标：layui-icon-theme，那么 type 设置 theme 即可。

点击工具栏的回调函数，功能同 tools 中的 event，只是需通过 type 属性来区分是哪个工具菜单。

toolsEvent: function(obj){
  console.log(obj); // 当前实例相关信息
  console.log(obj.type); // 当前实例相关信息
}

通过该函数与 tools 属性的搭配，可实现对工具栏的扩展。

用于开启代码复制功能图标。若开启 priview，则自动放置在 tools 属性中，复制图标将显示在容器右上角工具栏；若未开启 priview，则显示在 code 区域右上角。

true

自定义默认文本，值为一个对象，可选成员有:

text: {
  code: '代码栏标题', // 默认:  </>
  preview: '预览栏标题' // 默认: Preview
}

是否开启 Code 栏头部区域。

false

是否显示 Code 区域的行号

true

Code 容器的主题风格，可选值有：

• light 浅色模式（默认）
• dark 深色模式

是否对 code 中的 html 进行编码（转义）。

true

指定语言类型。如：lang: 'html'

是否在代码区域右上角显示语言类型

false

Code 文字是否自动换行

true

设置语法高亮器，可选值：

• hljs : 指定 highlight.js 库
• prism : 指定 prism.js 库
• shiki : 指定 shiki.js 库

注：对应的语法高亮器 JS 库和相关主题 CSS 需自主引入，该属性仅用于内部适配。

codeRender ^2.8+

codeRender: function(code, opts){
  // 此处以 highlight.js 为例
  return hljs.highlight(code, {language: opts.lang}).value;
}

code 组件语法高亮相关示例：

• highlight 和 prism 语法高亮示例
• shiki 语法高亮示例

done ^2.8+

done: function(obj){
  var container = obj.container; // 当前面板的容器对象
  obj.render(); // 对预览中的 `element,form` 等组件进行渲染
}

onCopy ^2.8.2+

onCopy: function(code, copied){
  console.log(code); // 得到当前 code 内容
  console.log(copied); // 是否复制成功(2.9.21+)
  return false; // 返回 false 阻止内置提示(2.9.21+)
}

highlightLine ^2.12+

可通过 hl.range 选项来设置行高亮范围：

highlightLine: {
  hl: {
    range: '1,3-5,8', // 指定行高亮范围 '1,3,4,5,8'
    comment: true, // 是否解析行中的高亮注释
  }
}

或通过特定注释格式： [!code <type>:<lines>] 指定行高亮范围，规则解释：

• <type> : highlightLine 的可选项，如 h1, focus 等
• <lines> : 行数（含本行）

111 聚焦 2 行（含本行） // [!code focus:2]
222 高亮本行 // [!code hl]
333

highlightLine 选项的详细用法可参考：highlightLine 行高亮在线示例