[go: nahoru, domu]
Skip to content

Commit

Permalink
improve code component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sentsim
sentsim committed Jun 29, 2022
1 parent aeb5075 commit 09c7dc8
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 197 deletions.
228 changes: 93 additions & 135 deletions examples/code.html
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>代码修饰器 - layui</title>

<link rel="stylesheet" href="../src/css/layui.css">

<style>
body{padding: 50px 100px;}
pre{margin-bottom: 20px;}
</style>
<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-title="JavaScript" lay-line-no="true" lay-height="300px">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<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 id="line-no">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<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-skin="notepad" lay-line-no="true">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<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-line-no="true">
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-title="不显示行号">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<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-skin="notepad" lay-line-no="true">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-skin="notepad" lay-title="不显示行号">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<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-encode="true" lay-line-no="true">
<div>
123
</div>
<pre class="layui-code" lay-options="{encode: true}">
<div>
123
</div>
</pre>

<pre class="layui-code" lay-about="code">
About
</pre>

<pre id="about">
about
<pre id="custom1">
custom more about
</pre>


<script src="../src/layui.js"></script>
<script>

layui.use('code', function(){
layui.code();

// 通用实例，根据元素属性定制化参数
layui.code({
elem: '#line-no',
title: 'JavaScript（不显示行号）',
lineNo: false,
height: '300px'
//about: 'code' // 右上角默认显示 code
});

// custom more about
layui.code({
elem: '#about',
title: '右侧 About',
about: 'code'
elem: '#custom1',
about: [
'<a href="javascript:;">复制</a>',
'<a href="about:blank" target="_blank">跳转</a>'
].join('')
})
});

</script>
</body>
</html>
29 changes: 15 additions & 14 deletions src/css/modules/code.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
/**
@Name: layui.code
@Description：Classic modular front-end UI framework
@License：MIT
* code
*/

/* 加载就绪标志 */
Expand All @@ -12,19 +8,24 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
/* 默认风格 */
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #999;}
.layui-code-view > .layui-code-ol, .layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
.layui-code-about > a{padding-left: 10px;}
.layui-code-view > .layui-code-ol,
.layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
.layui-code-view > .layui-code-ol > li:first-child, .layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
.layui-code-view > .layui-code-ol > li:last-child, .layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
.layui-code-view > .layui-code-ol > li:first-child,
.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
.layui-code-view > .layui-code-ol > li:last-child,
.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
.layui-code-view pre{margin: 0;}

/* notepadd++ 风格 */
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-notepad > .layui-code-title{border-bottom: none;}
.layui-code-notepad > .layui-code-ol > li, .layui-code-notepad > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
.layui-code-notepad > .layui-code-ul > li{margin-left: 6px;}
/* 深色风格 */
.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-dark > .layui-code-title{border-bottom: none;}
.layui-code-dark > .layui-code-ol > li,
.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}

/* 代码预览 */
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
Expand Down
Loading

0 comments on commit 09c7dc8

Please sign in to comment.