<!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 class="layui-code" lay-height="300px">
|
// 在里面存放任意的文本内容
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
</pre>
|
|
<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-title="嵌套">
|
code line
|
code line
|
code line
|
code line
|
<pre class="layui-code" lay-options="{ln: 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'}">
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
<pre class="layui-code" lay-options="{skin: 'dark'}">
|
code line
|
code line
|
code line
|
code line
|
code line
|
code line
|
<pre class="layui-code" lay-options="{skin: 'dark', ln: 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>
|
|
<pre id="custom1">
|
custom more about
|
</pre>
|
|
|
<script src="../src/layui.js"></script>
|
<script>
|
layui.use('code', function(){
|
// 通用实例，根据元素属性定制化参数
|
layui.code({
|
//about: 'code' // 右上角默认显示 code
|
});
|
|
// custom more about
|
layui.code({
|
elem: '#custom1',
|
about: [
|
'<a href="javascript:;">复制</a>',
|
'<a href="about:blank" target="_blank">跳转</a>'
|
].join('')
|
})
|
});
|
</script>
|
</body>
|
</html>
|
