You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
layui/examples/code.html

133 lines
2.1 KiB

<!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>