Layui 代码装饰器

来源：互联网发布：成都网络车新规编辑：程序博客网时间：2024/06/11 17:01

code模块通常针对于程序员，它是layui中一个极其轻量的组成。通俗而言，该模块就是对你的pre元素进行一个修饰，从而保证你展现的代码更具可读性。

Layui展现代码装饰器的效果非常方便，只需要加载code模块即可，配置简单，也可以在pre元素上增加对应配置属性。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="css/layui.css">    <script src="layui.js"></script></head><body>    <pre class="layui-code">        // 代码区域        var a = 'hello layui';    </pre><script src="../src/layui.js"></script><script>    //JavaScript代码区域    layui.use('code', function(){        layui.code({            title : '代码装饰器',            about : false        });    });</script></body></html>

效果如下：

这里写图片描述

相关配置属性如下：

这里写图片描述

skin参数则允许你设定许多种显示风格，我们目前内置了两种，分别为默认和notepad

以下是notepad风格：

这里写图片描述

height参数：如果内容低于该高度，则会自适应内容高度；如果内容超过了该高度，则会自动出现滚动条。

阅读全文

0 0