Layui--代码修饰器layui.code

最新推荐文章于 2025-09-11 02:22:35 发布

原创最新推荐文章于 2025-09-11 02:22:35 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

UI 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍layui框架中的Code模块，该模块用于美化代码展示，提升代码的可读性。文章覆盖了模块的使用方法，包括如何加载、设置标题、高度、编码、皮肤风格等，并提供了示例代码。

开发测试时的layui版本为2.5.5

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

模块加载名称：code

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>代码块使用</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript">
        layui.use('code',function (){//加载code模块
            layui.code();//引用code方法
        })
    </script>
</head>
<body>
    <!--让代码显示出来-->
    <pre class="layui-code">
    //代码区域
    var a = 'hello layui';
    </pre>
</body>

效果图：

elem（指定元素）:

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

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

title（设置标题）:

指的是设置的是左上角显示的文本，默认值为code

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

height（设置最大高度）

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

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

encode（转义html标签）

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

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

skin（风格选择）

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

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

about（剔除关于）

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

layui.code({
    about: false
});

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

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