layui.code-代码修饰器模块文档

阅读须知：当前文档仅针对layui系列更新：2019-02-14 20:23:10 阅读量：631 评论跟帖：0 文档整理编辑：Larry

code模块通常针对于程序员，它是layui中一个极其轻量的组成。通俗而言，该模块就是对你的pre元素进行一个修饰，从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮（可结合highlightjs库支持多种语言高亮显示，在larryms扩展库中有对应支持），但这丝毫不会影响它对你带来的便捷。【本篇文档来自layui官方】

温馨提示： 关于Layui的使用问题可直接在 larryms社区layui专区交流，本文档系列在后续会开启用户评论交流
使用

code模块的使用非常简单，请直接看代码，假设你在页面有这样一段pre标签：

<pre class="larry-codes-two">
//代码区域
var a = 'hello layui';
</pre>

那么你只需要经过下面的方式：

layui.use('code', function(){ //加载code模块
  layui.code(); //引用code方法
});

就可以将那段pre区块显示成你现在看到的这个样子：

//代码区域
var a = 'hello layui';
基础参数

方法：layui.code(options)
它接受一个对象参数options，支持以下key的设定

参数 类型 描述
elem string 指定元素的选择器
title string 设定标题
height string 设置最大高度
encode boolean 是否转义html标签，默认false
skin string 风格选择（值见下文）
about boolean 是否剔除右上关于

特别提示：除了上述方式的设置，我们还允许你直接在pre标签上设置属性来替代，如：

<pre class="larry-codes-two" lay-title="" lay-height="" lay-skin="" lay-encode="">
这样有木有觉得更方便些
</pre>

下面将针对每一个参数做进一步讲解。

指定元素

code模块会去自动查找class为larry-codes-two的类，如果你初始给的不是该类，仅仅只是一个pre标签，那么需要通过elem设置选择器来指向元素：

layui.code({
  elem: 'pre' //默认值为.larry-codes-two
});
设置标题

即左上角显示的文本，默认值为code

layui.code({
  title: 'JavaScript'
});

或者直接在pre标签上设置属性<pre lay-title="JavaScript"></pre>

设置最大高度

你可以设置以下key来控制修饰器的最大高度。如果内容低于该高度，则会自适应内容高度；如果内容超过了该高度，则会自动出现滚动条。

layui.code({
  height: '100px' //请注意必须加px。如果该key不设定，则会自适应高度，且不会出现滚动条。
});
 
 
 
 
 Hi，我是充数的 ^_^

或者直接在pre标签上设置属性<pre lay-height="100px"></pre>

转义html标签

事实上很多时候你都需要在pre标签中展现html标签，而不希望它被浏览器解析。那么code模块允许你这么做，只需要开启encode即可，如：

layui.code({
  encode: true //是否转义html标签。默认不开启
});

开启了encode后的效果如下：

    
  
  • HTML将不会被解析
    • 
  
  • 有木有感觉非常方便
    •

或者直接在pre标签上设置属性<pre lay-encode="true"></pre>

风格选择

你肯定不会满足于code的某一种显示风格，而skin参数则允许你设定许多种显示风格，我们目前内置了两种，分别为默认和notepad

layui.code({
  title: 'NotePad++的风格'
  ,skin: 'notepad' //如果要默认风格，不用设定该key。
});

上述的设定后，你会看到下面的样子

i'm code.
i'm code too.

或者直接在pre标签上设置属性<pre lay-skin="notepad"></pre>

剔除关于

如果你不喜欢出现右上角的layui.code字眼，你是可以剔除的。设置about: false即可，请叫我雷锋。