搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

代码高亮文档 - layui.code

该组件暂时只对你的 pre 元素进行一个修饰,从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮(后续逐步强化),但这丝毫不会影响它对你带来的便捷。

模块加载名称:code

使用

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

htmlcode

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

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

JavaScriptcode

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

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

</>code

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

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

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

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

</>code

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

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

指定元素

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

JavaScriptcode

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

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

JavaScriptcode

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

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

设置最大高度

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

JavaScriptcode

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

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

转义html标签

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

JavaScriptcode

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

开启了encode后的效果如下:

显示htmlcode

  1. <ul>
  2. <li>HTML将不会被解析</li>
  3. <li>有木有感觉非常方便</li>
  4. </ul>
  5. <script>
  6. !function(){
  7. var a = 123;
  8. }();
  9. </script>

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

风格选择

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

JavaScriptcode

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

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

NotePad++的风格code

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

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

layui - 在每一个细节中,用心与你沟通