| elem |
绑定元素选择器或 DOM 对象
|
string/DOM |
- |
| code 2.8.18+ |
设置原始 code 值，默认取目标元素中的内容
|
string |
- |
| preview 2.8+ |
是否开启 Code 预览功能，可选值有：
true 开启 Code 的普通预览false 关闭 Code 预览（默认）"iframe" 开启 Code 在 iframe 模式中预览
当开启该属性时，elem 指定的元素需要设置成以下结构：
<pre class="layui-code" lay-options="{}">
<textarea>
code content
</textarea>
</pre>
|
boolean
string |
false
|
| layout 2.8+ |
开启预览后的面板布局方式，值为一个数组，数组的可选成员有：
面板将根据数组的排列顺序来显示，如：
layout: ['code', 'preview']
|
array |
- |
| style 2.8+ |
设置 Code 和预览区域的公共样式
|
string |
- |
| codeStyle 2.8+ |
设置 Code 区域的局部样式，优先级高于 style 属性
|
string |
- |
| previewStyle 2.8+ |
设置预览区域的局部样式，优先级高于 style 属性
|
string |
- |
| id 2.8+ |
设置实例的唯一索引，以便用于其他操作
|
string |
- |
| className 2.8+ |
追加实例面板的 className，以便对其自定义样式
|
string |
- |
| tools 2.8+ |
用于开启 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 即可。
|
array |
- |
| toolsEvent 2.8+ |
点击工具栏的回调函数，功能同 tools 中的 event，只是需通过 type 属性来区分是哪个工具菜单。
toolsEvent: function(obj){
console.log(obj); // 当前实例相关信息
console.log(obj.type); // 当前实例相关信息
}
通过该函数与 tools 属性的搭配，可实现对工具栏的扩展。
|
function |
- |
| copy 2.8.2+ |
用于开启代码复制功能图标。若开启 priview，则自动放置在 tools 属性中，复制图标将显示在容器右上角工具栏；若未开启 priview，则显示在 code 区域右上角。
|
boolean |
true
|
| text 2.8+ |
自定义默认文本，值为一个对象，可选成员有:
text: {
code: '代码栏标题', // 默认: </>
preview: '预览栏标题' // 默认: Preview
}
|
object |
- |
| header 2.8+ |
是否开启 Code 栏头部区域。
|
boolean |
false
|
| ln |
是否显示 Code 区域的行号
|
boolean |
true
|
| theme 2.8.17+ |
Code 容器的主题风格，可选值有：
|
string |
- |
| encode |
是否对 code 中的 html 进行编码（转义）。
|
boolean |
true
|
| lang 2.8.17+ |
指定语言类型。如：lang: 'html'
|
string |
- |
| langMarker 2.8.17+ |
是否在代码区域右上角显示语言类型
|
boolean |
false
|
| wordWrap 2.8.17+ |
Code 文字是否自动换行
|
boolean |
true
|
| highlighter 2.8.17+ |
设置语法高亮器，可选值：
hljs : 指定 highlight.js 库prism : 指定 prism.js 库shiki : 指定 shiki.js 库
注：对应的语法高亮器 JS 库和相关主题 CSS 需自主引入，该属性仅用于内部适配。
|
string |
- |
|
codeRender 2.8+
|
用于重新渲染 code，譬如代码高亮处理。
codeRender: function(code, opts){
// 此处以 highlight.js 为例
return hljs.highlight(code, {language: opts.lang}).value;
}
code 组件语法高亮相关示例：
|
|
done 2.8+
|
组件渲染完毕的回调函数，函数返回一个 object 类型参数
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 : 高亮++ : 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 选项的详细用法可参考：highlightLine 行高亮在线示例
|