代码修饰器文档 - layui.code

code模块通常针对于程序员,它是layui中一个极其轻量的组成。通俗而言,该模块就是对你的pre元素进行一个修饰,从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮(因为目前感觉没有太大必要,后面layui全面稳定后,可能会完善该功能),但这丝毫不会影响它对你带来的便捷。

模块加载名称:code

使用

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

  1. <pre class="layui-code">
  2. //代码区域
  3. var a = 'hello layui';
  4. </pre>

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

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

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

  1. //代码区域
  2. var a = 'hello layui';

基础参数

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

参数类型描述
elemstring指定元素的选择器
titlestring设定标题
heightstring设置最大高度
encodeboolean是否转义html标签,默认false
skinstring风格选择(值见下文)
aboutboolean是否剔除右上关于

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

  1. <pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
  2. 这样有木有觉得更方便些
  3. </pre>

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

指定元素

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

  1. layui.code({
  2. elem: 'pre' //默认值为.layui-code
  3. });

设置标题

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

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

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

设置最大高度

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

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

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

转义html标签

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

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

开启了encode后的效果如下:

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

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

    风格选择

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

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

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

    1. i'm code.
    2. i'm code too.

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

    剔除关于

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

    layui - 用心与你沟通