docs/code/detail/options.md
绑定元素选择器或 DOM 对象
</td> <td>string/DOM</td> <td>-</td> </tr> <tr> <td>code <sup>2.8.18+</sup></td> <td>设置原始 code 值，默认取目标元素中的内容
</td> <td>string</td> <td>-</td> </tr> <tr> <td>preview <sup>2.8+</sup></td> <td>是否开启 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 和预览区域的公共样式
</td> <td>string</td> <td>-</td> </tr> <tr> <td>codeStyle <sup>2.8+</sup></td> <td>设置 Code 区域的局部样式，优先级高于 style 属性
设置预览区域的局部样式，优先级高于 style 属性
设置实例的唯一索引，以便用于其他操作
</td> <td>string</td> <td>-</td> </tr> <tr> <td>className <sup>2.8+</sup></td> <td>追加实例面板的 className，以便对其自定义样式
用于开启 preview 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：
copy <sup>2.8.2+</sup> : 代码复制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 栏头部区域。
</td> <td>boolean</td> <td>false
是否显示 Code 区域的行号
</td> <td>boolean</td> <td>true
Code 容器的主题风格，可选值有：
light 浅色模式（默认）dark 深色模式是否对 code 中的 html 进行编码（转义）。
</td> <td>boolean</td> <td>true
指定语言类型。如：lang: 'html'
是否在代码区域右上角显示语言类型
</td> <td>boolean</td> <td>false
Code 文字是否自动换行
</td> <td>boolean</td> <td>true
设置语法高亮器，可选值：
hljs : 指定 highlight.js 库prism : 指定 prism.js 库shiki : 指定 shiki.js 库注：对应的语法高亮器 JS 库和相关主题 CSS 需自主引入，该属性仅用于内部适配。
</td> <td>string</td> <td>-</td> </tr> <tr> <td>codeRender <sup>2.8+</sup>
</td> <td colspan="3"> <div id="options.codeRender" lay-pid="options" class="ws-anchor"> 用于重新渲染 code，譬如代码高亮处理。 </div>codeRender: function(code, opts){
// 此处以 highlight.js 为例
return hljs.highlight(code, {language: opts.lang}).value;
}
code 组件语法高亮相关示例：
done <sup>2.8+</sup>
</td> <td colspan="3"> <div id="options.done" lay-pid="options" class="ws-anchor"> 组件渲染完毕的回调函数，函数返回一个 object 类型参数 </div>done: function(obj){
var container = obj.container; // 当前面板的容器对象
obj.render(); // 对预览中的 `element,form` 等组件进行渲染
}
onCopy <sup>2.8.2+</sup>
</td> <td colspan="3"> <div id="options.onCopy" lay-pid="options" class="ws-anchor"> 点击复制图标时的回调函数。 </div>onCopy: function(code, copied){
console.log(code); // 得到当前 code 内容
console.log(copied); // 是否复制成功(2.9.21+)
return false; // 返回 false 阻止内置提示(2.9.21+)
}
highlightLine <sup>2.12+</sup>
</td> <td colspan="3"> <div id="options.highlightLine" lay-pid="options" class="ws-anchor">设置行高亮，可选项：
hl : 高亮++ : diff++-- : diff--focus : 聚焦可通过 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 选项的详细用法可参考：<a href="https://github.com/layui/layui/blob/dbe818df71593820f69ee5ab61247ef0d8230d36/examples/code.html#L63-L159" rel="nofollow" target="_blank">highlightLine 行高亮在线示例</a>
</td> </tr> </tbody> </table>