layui/docs/code/index.md
2023-09-11 11:58:48 +08:00

1.5 KiB

title toc
Code 预览组件 code true

Code 预览组件

代码预览组件 code 主要用于对代码区块的修饰和对应的效果预览,如 Layui 各组件文档中的示例演示。

方法

var codeInst = layui.code(options);

其中 codeInst 2.8.17+ 即实例返回的对象,包含对当前实例进行重载等方法成员,如:

var codeInst = layui.code(options);
console.log(codeInst); // 查看所有成员
codeInst.config; // 当前实例配置项
codeInst.reload(options); // 重载
codeInst.reloadCode(options); // 仅重载 code

另外,属性除了在该方法中传递,也可以直接写在元素的 lay-options 属性上,如:

  <pre class="layui-code code-demo" lay-options="{}">
light theme
light theme
light theme
</pre>
<hr>
<pre class="layui-code code-demo" lay-options="{theme: 'dark'}">
dark theme
dark theme
dark theme
</pre>
<!-- import layui -->  
<script>
layui.use(function(){
  // code
  layui.code({
    elem: '.code-demo'
  });
})
</script>
  

属性

{{- d.include("/code/detail/options.md") }}

小贴士

code 组件可广泛应用于技术类文档、博客等页面,可轻松适配第三方主流语法高亮器。