layui/examples/code.html

133 lines
2.2 KiB
HTML
Raw Normal View History

2017-08-21 08:51:13 +08:00
<!DOCTYPE html>
<html>
<head>
2022-06-29 20:24:51 +08:00
<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>
2017-08-21 08:51:13 +08:00
</head>
<body>
2022-06-29 20:24:51 +08:00
<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>
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line
code line
code line
code line
code line
code line
2017-08-21 08:51:13 +08:00
</pre>
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
code line
code line
code line
code line
code line
code line
2017-08-21 08:51:13 +08:00
</pre>
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{title: '嵌套', encode: false}">
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{ln: false, encode: false}">
2022-06-29 20:24:51 +08:00
code line
code line
code line
<pre class="layui-code">
code line
code line
code line
</pre>
2017-08-21 08:51:13 +08:00
</pre>
</pre>
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}">
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
2017-08-21 08:51:13 +08:00
</pre>
</pre>
</pre>
</pre>
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{encode: true}">
<div>
123
</div>
2017-08-21 08:51:13 +08:00
</pre>
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-about="code">
About
</pre>
2017-08-21 08:51:13 +08:00
2022-06-29 20:24:51 +08:00
<pre id="custom1">
custom more about
</pre>
2017-08-21 08:51:13 +08:00
<script src="../src/layui.js"></script>
<script>
layui.use('code', function(){
2022-06-29 20:24:51 +08:00
// 通用实例,根据元素属性定制化参数
layui.code({
2022-06-29 20:24:51 +08:00
//about: 'code' // 右上角默认显示 code
});
2022-06-29 20:24:51 +08:00
// custom more about
layui.code({
2022-06-29 20:24:51 +08:00
elem: '#custom1',
about: [
'<a href="javascript:;">复制</a>',
'<a href="about:blank" target="_blank">跳转</a>'
].join('')
})
2017-08-21 08:51:13 +08:00
});
</script>
</body>
</html>