|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<title>Code blocks adorn - Layui</title>
|
|
|
|
|
|
<link href="../src/css/layui.css" rel="stylesheet">
|
|
|
<style>
|
|
|
body{padding: 32px;}
|
|
|
pre{margin-bottom: 20px;}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<pre id="test">
|
|
|
<textarea class="layui-hide">
|
|
|
<div class="layui-btn-container">
|
|
|
<button type="button" class="layui-btn">默认按钮</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-btn-container">
|
|
|
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
|
|
|
</div>
|
|
|
<script type="text/html">
|
|
|
<h3>{{= d.title }}</h3>
|
|
|
<ul>
|
|
|
{{# layui.each(d.list, function(index, item){ }}
|
|
|
<li>
|
|
|
<span>{{= item.modname }}</span>
|
|
|
<span>{{= item.alias }}：</span>
|
|
|
<span>{{= item.site || '' }}</span>
|
|
|
</li>
|
|
|
{{# }); }}
|
|
|
<p>{{# if(d.list.length === 0){ }}
|
|
|
无数据
|
|
|
{{# } }}</p>
|
|
|
</ul>
|
|
|
</script>
|
|
|
<script>
|
|
|
layui.use(function () {
|
|
|
var layer = layui.layer;
|
|
|
const a = '1'
|
|
|
function aa(a, b) {
|
|
|
return '11'
|
|
|
}
|
|
|
layer.msg(layui.v)
|
|
|
})
|
|
|
</script>
|
|
|
</textarea>
|
|
|
</pre>
|
|
|
|
|
|
<pre><code class="layui-code">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
</code></pre>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{height: 300}" id="ID-multi-line"></pre>
|
|
|
<script type="module">
|
|
|
// 生成批量行，测试行结构
|
|
|
const elem = document.getElementById('ID-multi-line');
|
|
|
elem.innerHTML = Array(1001).fill().map(v => {
|
|
|
return Math.random().toString(32).substring(2).toUpperCase();
|
|
|
}).join('\n');
|
|
|
</script>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
</pre>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
</pre>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{title: '嵌套', encode: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
<pre class="layui-code" lay-options="{ln: false, encode: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
<pre class="layui-code">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
</pre>
|
|
|
</pre>
|
|
|
</pre>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}">
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
code line
|
|
|
</pre>
|
|
|
</pre>
|
|
|
</pre>
|
|
|
</pre>
|
|
|
|
|
|
<pre class="layui-code" lay-options="{encode: true}">
|
|
|
<div>
|
|
|
123
|
|
|
</div>
|
|
|
</pre>
|
|
|
|
|
|
<pre class="layui-code" lay-about="code">
|
|
|
About
|
|
|
</pre>
|
|
|
|
|
|
<script src="../src/layui.js"></script>
|
|
|
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
|
|
|
<script>
|
|
|
layui.use('code', function(){
|
|
|
// return;
|
|
|
layui.link('https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css');
|
|
|
var codeInst = layui.code({
|
|
|
elem: '#test',
|
|
|
preview: true,
|
|
|
codeStyle: 'height: 700px;',
|
|
|
// theme: 'dark',
|
|
|
// header: true,
|
|
|
lang: 'html',
|
|
|
highlighter: "hljs",
|
|
|
codeRender: function (code, opts) {
|
|
|
return hljs.highlight(code, {language: opts.lang}).value;
|
|
|
}
|
|
|
});
|
|
|
// 重载
|
|
|
/*codeInst.reload({
|
|
|
codeRender: function () {
|
|
|
return hljs.highlight(code, {language: opts.lang}).value;
|
|
|
}
|
|
|
});*/
|
|
|
|
|
|
// 通用实例，根据元素属性定制化参数
|
|
|
layui.code({
|
|
|
tools: ['tips'],
|
|
|
langMarker: true,
|
|
|
// preview: true
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
