Merge 0ff109ba29 into 71c6239e55

docs/code/detail/options.md

@@ -393,6 +393,44 @@ onCopy: function(code, copied){
 
 ```
 
+</td>
+    </tr>
+    <tr>
+<td>
+
+[highlightLine](#options.highlightLine) <sup>2.12+</sup>
+
+</td>
+<td colspan="3">
+
+<div id="options.highlightLine" lay-pid="options" class="ws-anchor">  
+设置行高亮，可选值：
+- hl：高亮
+- ++：diff++
+- --：diff--
+- focus：聚焦
+</div>
+
+通过 `range` 选项或注释 `[!code type:<lines>]` 指定行高亮范围
+
+```
+highlightLine: {
+  hl: {
+    range: '1,3-5,8', // 指定行高亮范围 '1,3,4,5,8'
+    comment: true, // 是否解析行中的高亮注释
+  }
+}
+```
+
+```
+layui.use(function(){ // [!code focus:5]
+  var layer = layui.layer; // [!code hl]
+
+  layer.msg('test');
+})
+
+```
+
 </td>
     </tr>
   </tbody>

src/css/modules/code.css

@@ -71,3 +71,12 @@ html #layuicss-skincodecss{display: none; position: absolute; width: 1989px;}
 .layui-code-view.layui-code-hl > .layui-code-ln-side{background-color: transparent;}
 .layui-code-theme-dark.layui-code-hl,
 .layui-code-theme-dark.layui-code-hl > .layui-code-ln-side{border-color: rgb(126 122 122 / 15%);}
+
+/*行高亮*/
+.layui-code-line-highlighted{background-color:rgba(142, 150, 170, .14)}
+.layui-code-line-diff-add{background-color: rgba(16, 185, 129, .14);}
+.layui-code-line-diff-remove{background-color: rgba(244, 63, 94, .14);}
+.layui-code-line-diff-add:before{position:absolute; content: "+"; color: #18794e;}
+.layui-code-line-diff-remove:before{position:absolute; content: "-"; color: #b8272c;}
+.layui-code-has-focused-lines .layui-code-line:not(.layui-code-line-has-focus) {filter: blur(.095rem); opacity: .7; -webkit-transition: filter .35s, opacity .35s; transition: filter .35s, opacity .35s;}
+.layui-code-has-focused-lines:hover .layui-code-line:not(.layui-code-line-has-focus) {filter: blur(); opacity: 1;}

src/modules/code.js

@@ -47,6 +47,30 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
     lang: 'text', // 指定语言类型
     highlighter: false, // 是否开启语法高亮，'hljs','prism','shiki'
     langMarker: false, // 代码区域是否显示语言类型标记
+    highlightLine: { // 行高亮
+      // 聚焦
+      focus: {
+        range: '', // 高亮范围，不可全局设置值 '1,3-5,8'
+        comment: false, // 是否解析注释，性能敏感不可全局开启  [!code type:<lines>]
+        classActiveLine: 'layui-code-line-has-focus', // 添加到高亮行上的类
+        classActivePre: 'layui-code-has-focused-lines' // 有高亮行时向根元素添加的类
+      },
+      // 高亮
+      hl: {
+        comment: false,
+        classActiveLine: 'layui-code-line-highlighted',
+      },
+      // diff++
+      '++':{
+        comment: false,
+        classActiveLine: 'layui-code-line-diff-add',
+      },
+      // diff--
+      '--': {
+        comment: false,
+        classActiveLine: 'layui-code-line-diff-remove',
+      }
+    }
   };
 
   // 初始索引
@@ -61,6 +85,91 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
     return trimEnd(str).replace(/^\n|\n$/, '');
   };
   
+  // '1,3-5,8' -> [1,3,4,5,8]
+  var parseHighlightedLines  = function(rangeStr){
+    if (typeof rangeStr !== 'string') return [];
+    var lines = $.map(rangeStr.split(','), function(v){
+      var range = v.split('-');
+      var start = parseInt(range[0], 10);
+      var end = parseInt(range[1], 10);
+      return start && end
+        ? $.map(new Array(end - start + 1), function(_, index){ return start + index })
+        : start ? start : undefined
+    })
+    return lines;
+  }
+
+  // 引用自 https://github.com/innocenzi/shiki-processor/blob/efa20624be415c866cc8e350d1ada886b6b5cd52/src/utils/create-range-processor.ts#L7
+  // 添加了 HTML 注释支持，用来处理预览场景 
+  var highlightLineRegex = /(?:\/\/|\/\*{1,2}|<!--|&lt;!--) *\[!code ([\w+-]+)(?::(\d+))?] *(?:\*{1,2}\/|-->|--&gt;)?/;
+  var preprocessHighlightLine = function (highlightLineOptions, codeLines) {
+    var hasHighlightLine = false;
+    var needParseComment = false;
+    var lineClassMap = Object.create(null);
+    var preClassMap = Object.create(null);
+
+    var updateLineClassMap = function (lineNumber, className) {
+      if (!lineClassMap[lineNumber]) {
+        lineClassMap[lineNumber] = [CONST.ELEM_LINE];
+      }
+      lineClassMap[lineNumber].push(className);
+    }
+
+    // 收集高亮行 className
+    $.each(highlightLineOptions, function (type, opts) {
+      if (opts.range) {
+        var highlightLines = parseHighlightedLines(opts.range);
+        if (highlightLines.length > 0) {
+          hasHighlightLine = true;
+          if (opts.classActivePre) {
+            preClassMap[opts.classActivePre] = true;
+          }
+          $.each(highlightLines, function (i, lineNumber) {
+            updateLineClassMap(lineNumber, opts.classActiveLine);
+          });
+        }
+      }
+      if (opts.comment) {
+        needParseComment = true;
+      }
+    });
+
+    // 解析行高亮注释并收集 className
+    if (needParseComment) {
+      $.each(codeLines, function (i, line) {
+        var match = line.match(highlightLineRegex);
+        if (match && match[1] && lay.hasOwn(highlightLineOptions, match[1])) {
+          var opts = highlightLineOptions[match[1]];
+          hasHighlightLine = true;
+          if (opts.classActivePre) {
+            preClassMap[opts.classActivePre] = true;
+          }
+          // 高亮的行数
+          var lines = parseInt(match[2], 10)
+          if (match[2] && lines && lines > 1) {
+            var startLine = i + 1;
+            var endLine = startLine + lines - 1;
+            var highlightLines = parseHighlightedLines(startLine + '-' + endLine);
+            if (highlightLines.length > 0) {
+              $.each(highlightLines, function (i, lineNumber) {
+                updateLineClassMap(lineNumber, opts.classActiveLine);
+              });
+            }
+          }else{
+            updateLineClassMap(i + 1, opts.classActiveLine);
+          }
+        }
+      });
+    }
+
+    return {
+      needParseComment: needParseComment,
+      hasHighlightLine: hasHighlightLine,
+      preClass: Object.keys(preClassMap).join(' '),
+      lineClassMap: lineClassMap
+    }
+  }
+
   // export api
   exports('code', function(options, mode){
     options = $.extend(true, {}, config, options);
@@ -141,10 +250,16 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
       // code 行
       var lines = String(html).split(/\r?\n/g);
 
+      // 预处理行高亮
+      var highlightLineInfo = preprocessHighlightLine(options.highlightLine, lines);
+
       // 包裹 code 行结构
       html = $.map(lines, function(line, num) {
+        var lineClass = (highlightLineInfo.hasHighlightLine && highlightLineInfo.lineClassMap[num + 1])
+          ? highlightLineInfo.lineClassMap[num + 1].join(' ')
+          : CONST.ELEM_LINE;
         return [
-          '<div class="'+ CONST.ELEM_LINE +'">',
+          '<div class="'+ lineClass + '">',
             (
               options.ln ? [
                 '<div class="'+ CONST.ELEM_LINE_NUM +'">',
@@ -153,12 +268,16 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
               ].join('') : ''
             ),
             '<div class="layui-code-line-content">',
-              (line || ' '),
+               (highlightLineInfo.needParseComment ? line.replace(highlightLineRegex, '') : line) || ' ',
             '</div>',
           '</div>'
         ].join('');
       });
 
+      if(highlightLineInfo.preClass){
+        othis.addClass(highlightLineInfo.preClass)
+      }
+
       return {
         lines: lines,
         html: html