From 8e9b793b0e412b0afa3093af456183bd29f6e6ee Mon Sep 17 00:00:00 2001 From: Jack Date: Wed, 29 Jun 2022 16:33:15 +0800 Subject: [PATCH] =?UTF-8?q?code=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=9A=E6=B7=BB=E5=8A=A0=E4=BA=86=E6=98=AF=E5=90=A6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E8=A1=8C=E5=8F=B7=EF=BC=9B=E4=BC=98=E5=8C=96=E5=8F=B3?= =?UTF-8?q?=E4=B8=8A=E8=A7=92=E7=9A=84=20about=EF=BC=9B=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E4=BA=86=20examples/code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/code.html | 63 ++++++++++++++++++++++++++++++++++------ src/css/modules/code.css | 18 +++++++----- src/modules/code.js | 27 ++++++++++------- 3 files changed, 81 insertions(+), 27 deletions(-) diff --git a/examples/code.html b/examples/code.html index 6ba67880..c0a68807 100644 --- a/examples/code.html +++ b/examples/code.html @@ -14,7 +14,27 @@ pre{margin-bottom: 20px;} -
+
+  //路由
+  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;
+  };
+

+
+
 //路由
 LAY.fn.router = function(hash){
   var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@@ -34,7 +54,7 @@ LAY.fn.router = function(hash){
 };
 

 
-
+
 //路由
 LAY.fn.router = function(hash){
   var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@@ -54,21 +74,28 @@ LAY.fn.router = function(hash){
 };
 

 
-
+
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
   dir: []
 };
-
+
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
   dir: []
 };
+
+  //代码中的代码
+  var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
+  var item, param = {
+    dir: []
+  };
+  

 

 

 
-
+
 //路由
 LAY.fn.router = function(hash){
   var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@@ -86,19 +113,19 @@ LAY.fn.router = function(hash){
   }
   return param;
 };
-
+
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
   dir: []
 };
-
+
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
   dir: []
 };
-
+
 //代码中的代码
 var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
 var item, param = {
@@ -110,18 +137,36 @@ var item, param = {
 

 
 
-
+
   

     123
   

 

 
 
+
+    about
+

+
+
 
 
diff --git a/src/css/modules/code.css b/src/css/modules/code.css
index c6a23917..e8c709bf 100644
--- a/src/css/modules/code.css
+++ b/src/css/modules/code.css
@@ -11,18 +11,20 @@ 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-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
-.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
-.layui-code-view .layui-code-ol{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{padding-top: 10px;}
-.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
+.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-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-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-h3{border-bottom: none;}
-.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}
+.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-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
diff --git a/src/modules/code.js b/src/modules/code.js
index fda08bcb..920d97ec 100644
--- a/src/modules/code.js
+++ b/src/modules/code.js
@@ -17,8 +17,7 @@ layui.define(['util'], function(exports){
 
     options = options || {};
     options.elem = $(options.elem||'.layui-code');
-    options.lang = 'lang' in options ? options.lang : 'code';
-    
+
     options.elem.each(function(){
       elems.push(this);
     });
@@ -26,22 +25,30 @@ layui.define(['util'], function(exports){
     layui.each(elems.reverse(), function(index, item){
       var othis = $(item);
       var html = trim(othis.html());
-      var about = othis.attr('lay-about') || options.about || (
-        othis.attr('lay-lang') || options.lang
-      ) || '';
-      
+      var about = othis.attr('lay-about') || options.about || othis.attr('lay-lang') || options.lang || '';
+
+      //是否显示行号
+      var lineNo;
+      if(othis.attr('lay-line-no'))
+      {
+        lineNo = othis.attr('lay-line-no').toLowerCase() === 'true';
+      }
+      lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
+
       // 转义 HTML 标签
       if(othis.attr('lay-encode') || options.encode){
         html = util.escape(html);
       }
       
-      othis.html('
  1. ' + html.replace(/[\r\t\n]+/g, '
  2. ') + '
')
+      var list = lineNo ? 'ol' : 'ul';
+      othis.html('<' + list + ' class="layui-code-' + list + '">
  • ' + html.replace(/[\r\t\n]+/g, '
  • ') + '
    • ');
       
-      if(!othis.find('>.layui-code-h3')[0]){
-        othis.prepend('
    '+ (othis.attr('lay-title')||options.title||'</>') + ''+ about +'' + '
    ');
+      if(!othis.find('>.layui-code-title')[0]){
+        var aboutWrapper = about === '' ? '' : '
    ' + about + '
    ';
+        othis.prepend('
    ' + (othis.attr('lay-title') || options.title || '</>') + aboutWrapper + '
    ');
       }
       
-      var ol = othis.find('>.layui-code-ol');
+      var ol = othis.find('>.layui-code-' + list);
       othis.addClass('layui-box layui-code-view');
       
       //识别皮肤