优化 code 若干小问题

src/css/layui.css

@@ -665,7 +665,7 @@ a cite{font-style: normal; *cursor:pointer;}
 .layui-text a:not(.layui-btn){color: #01AAED;}
 .layui-text a:not(.layui-btn):hover{text-decoration: underline;}
 .layui-text blockquote:not(.layui-elem-quote){padding: 5px 15px; border-left: 5px solid #eee;}
-.layui-text pre > code:not(.layui-code){padding: 15px; font-family: Courier New,Lucida Console,Consolas; background-color: #fafafa;}
+.layui-text pre > code:not(.layui-code){padding: 15px; font-family: "Courier New",Consolas,monospace;}
 
 /* 字体大小 */
 .layui-font-12{font-size: 12px !important;}
@@ -1470,7 +1470,7 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-util-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;}
 
 /** 代码文本修饰 **/
-.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fafafa; color: #333; font-family: Courier New,Lucida Console,Consolas; font-size: 12px;}
+.layui-code{display: block; position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; font-family: "Courier New",Consolas,monospace; font-size: 12px;}
 
 /** 穿梭框 **/
 .layui-transfer-box,

src/css/modules/code.css

@@ -5,28 +5,32 @@
 /* 加载就绪标志 */
 html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
 
-/* 默认风格 */
+/* 字体  */
-.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0 !important; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: 'Courier New'; font-size: 13px; white-space: pre; overflow: auto;}
+.layui-code-view,
-.layui-code-view.layui-code-line-numbers-mode{padding-left: 45px !important;}
+.layui-code-view > .layui-code-lines{font-size: 13px; font-family: "Courier New",Consolas,monospace;}
+
+/* 基础结构 */
+.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; white-space: pre; overflow: auto;}
+.layui-code-view.layui-code-line-numbers-mode{padding-left: 45px;}
 .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: #B7B7B7;}
 .layui-code-line-numbers-mode .layui-code-title{margin-left: -45px;}
 .layui-code-title ~ .layui-code-line-numbers{margin-top: 40px;}
 .layui-code-about > a{padding-left: 10px;}
-.layui-code-view > .layui-code-lines{display:block; max-height: 100%; padding: 15px 10px !important; position: relative;background-color: #fff;font-family: 'Courier New'}
+.layui-code-view > .layui-code-lines{display: block; position: relative; max-height: 100%; padding: 15px 10px !important;}
 .layui-code-view > .layui-code-lines > .layui-code-line{position: relative; display: block; line-height: 20px;}
 .layui-code-view pre{margin: 0;}
-.layui-code-line-numbers{position: absolute;top: 0;bottom: 0;left: 0;width: 45px; border-right: 1px solid #e2e2e2; text-align: center; padding: 15px 0; line-height: 20px; user-select: none;}
+.layui-code-line-numbers{position: absolute; top: 0; bottom: 0; left: 0; min-width: 45px; border-right: 1px solid #eee; border-color: rgb(126 122 122 / 15%); text-align: center; padding: 15px 8px; line-height: 20px; background-color: #fafafa; user-select: none;}
 .layui-code-line-number{display: block;}
 .layui-code-lang-marker{position: absolute; top: 2px; right: 11px; color: currentColor;}
 .layui-code-view:hover > .layui-code-lang-marker{display: none;}
 
-/* 深色风格 */
+/* 深色主题 */
-.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
+.layui-code-theme-dark{border: 1px solid #2a2a2a; border-left-color: #2a2a2a; background-color: #1f1f1f; color: #ccc;}
-.layui-code-dark > .layui-code-title{border-bottom: none;}
+.layui-code-theme-dark > .layui-code-title{border-bottom: none;}
-.layui-code-dark > .layui-code-lines{background-color: #3F3F3F !important; border-left: none !important;}
+.layui-code-theme-dark > .layui-code-line-numbers{border-right-color: #2a2a2a; background: none; color: #6e7681;}
-.layui-code-dark > .layui-code-lines{margin-left: 6px;}
+.layui-code-theme-dark > .layui-code-lines{margin-left: 0; background: none;}
-.layui-code-dark.layui-code-line-numbers-mode > .layui-code-lines{margin-left: 0;}
+
 
 /* 代码预览 */
 .layui-code textarea{display: none;}
@@ -51,21 +55,19 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
 .layui-code-copy .layui-icon{color: #777; transition: all .3s;}
 .layui-code-copy:hover .layui-icon{color: #16b777;}
 .layui-code-view:hover > .layui-code-copy{display: block;}
-.layui-code-copy-offset{margin-right: 17px;}
 .layui-code-preview > .layui-code-view > .layui-code-copy{display: none !important;}
 
 /* 全屏风格  */
 .layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;}
 .layui-code-full .layui-code-item{width: 100% !important; border-width: 0 !important; border-top-width: 1px !important;}
 .layui-code-full .layui-code-item,
-.layui-code-full .layui-code-view{max-height: calc(100vh - 51px) !important; box-sizing: border-box;}
+.layui-code-full .layui-code-view{height: calc(100vh - 51px) !important; box-sizing: border-box;}
 
 /* 代码高亮重置 */
-.layui-code-view[class*=language-]{
+.layui-code-view.layui-code-hl{
-  font-size: 13px !important;
   line-height: 20px !important;
 }
-.layui-code-view[class*=language-] > .layui-code-lines,
+.layui-code-view.layui-code-hl > .layui-code-lines,
-.layui-code-view[class*=language-] > .layui-code-line-numbers{
+.layui-code-view.layui-code-hl > .layui-code-line-numbers{
   background-color: transparent;
 }

src/modules/code.js

@@ -24,6 +24,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
     ELEM_SHOW: 'layui-show',
     ELEM_LINE: 'layui-code-line',
     ELEM_LINES: 'layui-code-lines',
+    ELEM_LINE_NUMS: 'layui-code-line-numbers',
     ELEM_LINE_NUMBERS_MODE: 'layui-code-line-numbers-mode',
   };
 
@@ -45,6 +46,10 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
     langMarker: false, // 代码区域是否显示语言类型标记
   };
 
+  // 初始索引
+  var codeIndex = layui.code ? (layui.code.index + 10000) : 0;
+
+  // 去除尾部空格
   var trimEnd = function(str){
     return String(str).replace(/\s+$/, '');
   }
@@ -57,13 +62,32 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
   exports('code', function(options){
     var opts = options = $.extend(true, {}, config, options);
 
-    // 目标元素是否存在
+    // 实例对象
-    options.elem = $(options.elem);
+    var inst = {
-    if(!options.elem[0]) return;
+      reload: function(sets) { // 重载
+        sets = sets || {};
+        delete sets.elem;
+        sets = $.extend(true, options, sets);
+        layui.code(sets);
+      }
+    };
 
-    // 从内至外渲染
+    // 若 elem 非唯一
-    layui.each(options.elem.get().reverse(), function(index, item){
+    var elem = $(options.elem);
-      var othis = $(item);
+    if(elem.length > 1){
+      // 是否正向渲染
+      layui.each(options.obverse ? elem : elem.get().reverse(), function(){
+        layui.code($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return inst;
+    }
+
+    // 目标元素是否存在
+    var othis = options.elem = $(options.elem);
+    var item = othis[0];
+    if(!othis[0]) return inst;
 
     // 合并属性上的参数，并兼容旧版本属性写法 lay-*
     var options = $.extend(true, {}, opts, lay.options(item), function(obj){
@@ -77,6 +101,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
       return obj;
     }({}));
 
+    var index = layui.code.index = ++codeIndex;
+
     // codeRender 需要关闭编码
     // 未使用 codeRender 时若开启了预览，则强制开启编码
     options.encode = (options.encode || options.preview) && !options.codeRender;
@@ -286,6 +312,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
             element.render();
           }
         };
+
         // 当前实例预览完毕后的回调
         setTimeout(function(){
           typeof options.done === 'function' && options.done(params);
@@ -319,58 +346,94 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
         if($this.attr('lay-id') === 'preview'){
           run(thisItemBody);
         }
+
+        setCodeLayout();
       });
     }
 
-      var listElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
+    // 创建 code 容器
+    var codeElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
 
-      // header
+    // 添加主容器 className
-      var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
+    othis.addClass('layui-code-view layui-border-box');
 
-      // 添加组件 className
+    // code 主题风格
-      othis.addClass('layui-code-view layui-box');
+    var theme = options.theme || options.skin;
-
+    if (theme) {
-      // 自定义风格
+      othis.removeClass('layui-code-theme-dark layui-code-theme-light');
-      if(options.skin){
+      othis.addClass('layui-code-theme-'+ theme);
-        if(options.skin === 'notepad') options.skin = 'dark';
-        othis.removeClass('layui-code-dark layui-code-light');
-        othis.addClass('layui-code-'+ options.skin);
     }
 
-      // 高亮
+    // 添加高亮必要的 className
-      if(options.highlighter) othis.addClass(options.highlighter + ' language-' + options.lang);
+    if (options.highlighter) {
+      othis.addClass([
+        options.highlighter,
+        'language-' + options.lang,
+        'layui-code-hl'
+      ].join(' '));
+    }
 
     // 转义 HTML 标签
     if(options.encode) html = util.escape(html); // 编码
 
-      // code 转 html
+    // codeRender
     if(typeof options.codeRender === 'function') html = options.codeRender(html, options);
-      var lines = html.split(/\r?\n/g);
+
+    // code 行
+    var lines = String(html).split(/\r?\n/g);
+
+    // 包裹 code 行元素
     html = (options.codeRender && !options.highlighter)
       ? html
       : $.map(lines, function(line){
         return ['<div class="', CONST.ELEM_LINE, '">', (line || ' '), '</div>'].join(''); // 空行填充空格，以保证换行效果
       }).join('')
 
-      // 生成列表
+    // 插入 code
-      othis.html(listElem.html(html));
+    othis.html(codeElem.html(html));
+
+    // code 区域样式
+    if (options.codeStyle) {
+      othis.attr('style', function(i, val) {
+        return (val || '') + options.codeStyle;
+      });
+    }
+
+    // 兼容旧版本 height 属性
+    if (options.height) othis.css('max-height', options.height);
 
     // 创建行号
-      if(options.ln) {
+    var lineNumsElem = function() {
-        var lineNumbersCode = ['<div class="layui-code-line-numbers">']
+      if (options.ln) {
+        var lineNumbersCode = ['<div class="'+ CONST.ELEM_LINE_NUMS +'">']
         layui.each(lines, function(index){
           lineNumbersCode.push('<span class="layui-code-line-number">' + util.digit(index + 1) +'.</span>')
         });
         lineNumbersCode.push('</div>');
         othis.addClass(CONST.ELEM_LINE_NUMBERS_MODE);
-        othis.append(lineNumbersCode.join(''));
+        othis.prepend(lineNumbersCode.join(''));
-        othis.children('.layui-code-line-numbers').css({
-          height: listElem.height(),
-        })
       }
+      return othis.children('.'+ CONST.ELEM_LINE_NUMS);
+    }()
 
-      // 创建 header
+    // 设置 code 布局
+    var setCodeLayout = (function fn() {
+      lineNumsElem.css({
+        height: othis.prop('scrollHeight') // 与外容器高度保持一致
+      });
+
+      // 根据行号容器宽度，适配 code 容器左内边距
+      othis.css('padding-left', function(multiLine) {
+        var width = lineNumsElem.outerWidth();
+        return multiLine && width > 45 ? width : null;
+      }(Math.floor(lines.length / 100) && options.ln));
+
+      return fn;
+    })();
+
+    // 创建 header --- 后续版本将废弃该属性
     if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){
+      var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
       headerElem.html((options.title || options.text.code) + (
         options.about
           ? '<div class="layui-code-about">' + options.about + '</div>'
@@ -384,33 +447,13 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
       typeof options.allDone === 'function' && options.allDone();
     }
 
-      // 按行数适配左边距
+    // 若开启复制，且未开启预览时，单独生成复制图标
-      (function(autoIncNums){
-        if(autoIncNums > 0){
-          othis.css('margin-left', autoIncNums + 'px');
-        }
-      })(Math.floor(listElem.find('.' + CONST.ELEM_LINE).length/100));
-
-      // 限制 Code 最大高度
-      if(options.height){ // 兼容旧版本
-        othis.css('max-height', options.height);
-      }
-      // Code 内容区域样式
-      if(options.codeStyle){
-        othis.attr('style', function(_, origVal){
-          return (origVal || '') + options.codeStyle;
-        });
-      }
-
-      // 是否开启代码复制
     if(options.copy && !options.preview){
       var elemCopy = $(['<span class="'+ CONST.ELEM_COPY +'">',
         '<i class="layui-icon layui-icon-file-b" title="复制"></i>',
       '</span>'].join(''));
       var elemCopyHas = othis.children('.'+ CONST.ELEM_COPY);
-        var isHeight = othis[0].style.height || othis[0].style.maxHeight;
 
-        if(isHeight) elemCopy.addClass(CONST.ELEM_COPY + '-offset'); // 偏移
       if(elemCopyHas[0]) elemCopyHas.remove(); // 移除旧的复制元素
       othis.append(elemCopy);
 
@@ -423,15 +466,19 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
     // language marker
     if(options.langMarker){
       var elemMarker = $('<span class="layui-code-lang-marker">' + options.lang + '</span>')
-        var isHeight = othis[0].style.height || othis[0].style.maxHeight;
       var elemMarkerHas = othis.children("." + CONST.ELEM_MARKER);
-        if(isHeight) elemMarker.css('margin-right', '17px')
+      if(elemMarkerHas[0]) elemMarkerHas.remove();
-        if(elemMarkerHas) elemMarkerHas.remove();
       othis.append(elemMarker);
     }
 
-    });
+    // code 渲染完毕后的回调
+    if (!options.preview) {
+      setTimeout(function(){
+        typeof options.done === 'function' && options.done({});
+      },3);
+    }
 
+    return inst;
   });
 });