贤心制作的一款轻量级的网页代码修饰器 - layui.code(代码高亮显示插件)

介绍

layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui.code是一款轻量级的网页代码修饰器。它是layui中一个极其轻量的组成。通俗而言,该模块(code)就是对你的pre元素进行一个修饰,从而保证你展现的代码更具可读性

代码修饰器加载layui code模块

下载

layui:http://www.layui.com/

文档:http://www.layui.com/doc/

可以在layui官网首页下载layui最新版,

npm安装

npm install layui-src

git仓库下载

你也可以通过 GitHub 或 码云 得到 layui 的完整开发包

引入

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js" charset="utf-8"></script>

使用

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

<pre class="layui-code">
    //代码区域
    var wb = 'hello wubin.pro';
</pre>

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

<script type="text/javascript">
    layui.use('code', function(){ //加载code模块
        layui.code(); //引用code方法
    });
</script>

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


随后,我们继续,首先我们需要一下参数

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

layui.code还允许我们直接在pre标签上设置属性

<pre class="layui-code" lay-title="武斌博客notepad风格" lay-height="200px" lay-skin="notepad" lay-encode="true" lay-about="false">
    <p>武斌博客(www.wubin.pro)</p>
    <p>武斌博客(www.wubin.pro)</p>
</pre>

那么即可显示成这样:

1510842230403713.png

当然,对于我们php来说,后台添加的时候一般直接使用pre变迁,那么在页面对其设置属性不是太方便,那么我们也可使用layui.code(options)方法:

<pre>
    <p>武斌博客(www.wubin.pro)</p>
</pre>
<script type="text/javascript">
    layui.use(['code'], function(){
        layui.code({
            elem: '.box pre', //默认值为.layui-code
            title:'武斌博客',//默认值为 code
            height:'600px',
            encode: true, //是否转义html标签。默认不开启
            skin: 'notepad', //如果要默认风格,不用设定该key。
            about:false	//剔除右上关于
        });
    });
</script>

那么即可显示如下:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

武斌博客 http://www.wubin.pro

Top