feat(code): 新增行高亮功能 (#2763)

* feat(code): 新增行高亮功能

支持行高亮，聚焦，diff，自定义行高亮

* update code

* chore: 优化变量命名

* docs(code): 更新文档

* test(code): 添加行高亮测试用例

* docs(code): 优化 highlightLine 文档

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/code/detail/options.md

@@ -11,13 +11,13 @@
       <th>描述</th>
       <th>类型</th>
       <th>默认值</th>
-    </tr> 
+    </tr>
   </thead>
   <tbody>
     <tr>
 <td>elem</td>
 <td>
-  
+
 绑定元素选择器或 DOM 对象
 
 </td>
@@ -37,11 +37,11 @@
     <tr>
 <td>preview <sup>2.8+</sup></td>
 <td>
-  
+
 是否开启 Code 预览功能，可选值有：
 
 - `true` 开启 Code 的普通预览
-- `false` 关闭 Code 预览（默认） 
+- `false` 关闭 Code 预览（默认）
 - `"iframe"` 开启 Code 在 iframe 模式中预览
 
 当开启该属性时，`elem` 指定的元素需要设置成以下结构：
@@ -65,13 +65,13 @@ code content
     <tr>
 <td>layout <sup>2.8+</sup></td>
 <td>
-  
+
 开启预览后的面板布局方式，值为一个数组，数组的可选成员有：
 
 - `code` 代码区域
 - `preview` 预览区域
 
-面板将根据数组的排列顺序来显示，如： 
+面板将根据数组的排列顺序来显示，如：
 
 ```
 layout: ['code', 'preview']
@@ -84,7 +84,7 @@ layout: ['code', 'preview']
     <tr>
 <td>style <sup>2.8+</sup></td>
 <td>
-  
+
 设置 Code 和预览区域的公共样式
 
 </td>
@@ -94,7 +94,7 @@ layout: ['code', 'preview']
     <tr>
 <td>codeStyle <sup>2.8+</sup></td>
 <td>
-  
+
 设置 Code 区域的局部样式，优先级高于 `style` 属性
 
 </td>
@@ -104,7 +104,7 @@ layout: ['code', 'preview']
     <tr>
 <td>previewStyle <sup>2.8+</sup></td>
 <td>
-  
+
 设置预览区域的局部样式，优先级高于 `style` 属性
 
 </td>
@@ -114,7 +114,7 @@ layout: ['code', 'preview']
     <tr>
 <td>id <sup>2.8+</sup></td>
 <td>
-  
+
 设置实例的唯一索引，以便用于其他操作
 
 </td>
@@ -124,7 +124,7 @@ layout: ['code', 'preview']
     <tr>
 <td>className <sup>2.8+</sup></td>
 <td>
-  
+
 追加实例面板的 `className`，以便对其自定义样式
 
 </td>
@@ -134,7 +134,7 @@ layout: ['code', 'preview']
     <tr>
 <td>tools <sup>2.8+</sup></td>
 <td>
-  
+
 用于开启 `preview` 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：
 
 - `copy` <sup>2.8.2+</sup> : 代码复制
@@ -168,7 +168,7 @@ tools: [
     <tr>
 <td>toolsEvent <sup>2.8+</sup></td>
 <td>
-  
+
 点击工具栏的回调函数，功能同 `tools` 中的 `event`，只是需通过 `type` 属性来区分是哪个工具菜单。
 
 ```
@@ -187,7 +187,7 @@ toolsEvent: function(obj){
     <tr>
 <td>copy <sup>2.8.2+</sup></td>
 <td>
-  
+
 用于开启代码复制功能图标。若开启 `priview`，则自动放置在 `tools` 属性中，复制图标将显示在容器右上角工具栏；若未开启 `priview`，则显示在 code 区域右上角。
 
 </td>
@@ -201,7 +201,7 @@ toolsEvent: function(obj){
     <tr>
 <td>text <sup>2.8+</sup></td>
 <td>
-  
+
 自定义默认文本，值为一个对象，可选成员有:
 
 ```
@@ -218,7 +218,7 @@ text: {
     <tr>
 <td>header <sup>2.8+</sup></td>
 <td>
-  
+
 是否开启 Code 栏头部区域。
 
 </td>
@@ -232,7 +232,7 @@ text: {
     <tr>
 <td>ln</td>
 <td>
-  
+
 是否显示 Code 区域的行号
 
 </td>
@@ -246,7 +246,7 @@ text: {
     <tr>
 <td>theme <sup>2.8.17+</sup></td>
 <td>
-  
+
 Code 容器的主题风格，可选值有：
 
 - `light` 浅色模式（默认）
@@ -259,7 +259,7 @@ Code 容器的主题风格，可选值有：
     <tr>
 <td>encode</td>
 <td>
-  
+
 是否对 code 中的 html 进行编码（转义）。
 
 </td>
@@ -358,7 +358,7 @@ code 组件语法高亮相关示例：
 </td>
 <td colspan="3">
 
-<div id="options.done" lay-pid="options" class="ws-anchor">  
+<div id="options.done" lay-pid="options" class="ws-anchor">
 组件渲染完毕的回调函数，函数返回一个 object 类型参数
 </div>
 
@@ -379,7 +379,7 @@ done: function(obj){
 </td>
 <td colspan="3">
 
-<div id="options.onCopy" lay-pid="options" class="ws-anchor">  
+<div id="options.onCopy" lay-pid="options" class="ws-anchor">
 点击复制图标时的回调函数。
 </div>
 
@@ -393,6 +393,49 @@ 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>
+
+可通过 `hl.range` 选项来设置行高亮范围：
+
+```
+highlightLine: {
+  hl: {
+    range: '1,3-5,8', // 指定行高亮范围 '1,3,4,5,8'
+    comment: true, // 是否解析行中的高亮注释
+  }
+}
+```
+
+或通过特定注释格式： `[!code <type>:<lines>]` 指定行高亮范围，规则解释：
+- `<type>` : `highlightLine` 的可选项，如 `h1, focus` 等
+- `<lines>` : 行数（含本行）
+
+```
+111 聚焦 2 行（含本行） // [!code focus:2]
+222 高亮本行 // [!code hl]
+333
+```
+
+highlightLine 选项的详细用法可参考：<a href="https://stackblitz.com/edit/iw6hx7mi?file=index.html" rel="nofollow" target="_blank">highlightLine 行高亮在线示例</a>
+
 </td>
     </tr>
   </tbody>

examples/code.html

@@ -4,15 +4,16 @@
   <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: 16px 0;}
   </style>
 </head>
-<body>
+<body class="layui-padding-3">
 
+<div class="layui-text">
+  <h2>代码高亮</h2>
+</div>
 <pre id="test" class="layui-test">
   <textarea class="layui-hide">
 <div class="layui-btn-container">
@@ -54,6 +55,104 @@ Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </textarea>
 </pre>
 
+<div class="layui-text">
+  <h2>行高亮和聚焦</h2>
+</div>
+<pre
+  class="layui-code"
+  lay-options="{
+    highlightLine: {
+      hl: {
+        range: '1,3-5,8', // 指定行高亮范围 '1,3,4,5,8'
+        comment: true, // 是否解析行中的高亮注释
+      }
+    }
+  }">
+<textarea class="layui-hide">
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Quick Start - Layui</title>
+  <link href="//unpkg.com/layui@2.11.4/dist/css/layui.css" rel="stylesheet">
+</head>
+<body>
+  <!-- HTML Content -->
+  <script src="//unpkg.com/layui@2.11.4/dist/layui.js"></script>
+  <script>
+  // Usage // [!code focus:6]
+  layui.use(function(){
+    var layer = layui.layer;
+    // Welcome
+    layer.msg('Hello World', {icon: 6});
+  });
+  </script>
+</body>
+</html>
+</textarea>
+</pre>
+
+<div class="layui-text">
+  <h2>diff</h2>
+</div>
+<pre
+  class="layui-code"
+  lay-options="{
+    highlightLine: {
+      hl:{range: '38-40'},
+      '++':{comment: true},
+      '--':{comment: true}
+    }
+  }">
+<textarea class="layui-hide">
+<template id="test">
+  <p>转义输出：{{= d.desc }}</p>
+  <p>原文输出：{{- d.desc }}</p>
+  {{# 注释标签 - 仅在模板中显示，不在视图中输出 }} // [!code ++]
+  <p>{{! 忽略标签，可显示原始标签：
+  {{# let a = 0; }} // [!code --]
+  {{ let a = 0; }} // [!code ++]
+  !}}
+  </p>
+  <p>
+    条件语句：
+    {{= d.list.length ? d.title : '' }}
+    {{# if(d.title){}} - #AAAA{{='A'}}{{# } }} //[!code --]
+    {{ if(d.title){}} - #AAAA{{='A'}}{{ } }} //[!code ++]
+  </p>
+  <p>循环语句：</p>
+  <ul>
+  {{# d.list.forEach(function(item) { }} //[!code --]
+  {{ d.list.forEach(function(item) { }} //[!code ++]
+  </p>
+    <li>
+      <span>{{= item.title }}</span>
+      <span>{{= item.name }}</span>
+    </li>
+  {{# }); }} //[!code --]
+  {{ }); }} //[!code ++]
+  </ul>
+  {{# if (d.list.length === 0) { }} //[!code --]
+  {{ if (d.list.length === 0) { }} //[!code ++]
+    无数据
+  {{#} }} //[!code --]
+  {{} }} //[!code ++]
+</template>
+<script>
+  layui.use(function(){
+    var laytpl = layui.laytpl;
+
+    laytpl.config({
+      tagStyle: 'modern'
+    })
+  })
+</script>
+</textarea>
+</pre>
+
+<h2>普通示例</h2>
+
 <pre><code class="layui-code" lay-options="{header: true}">
 code line
 code line

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

@@ -48,6 +48,30 @@ layui.define(['lay', 'i18n', 'util', 'element', 'tabs', 'form'], function(export
     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', 'i18n', 'util', 'element', 'tabs', 'form'], function(export
   var trim = function(str){
     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){
@@ -142,10 +251,16 @@ layui.define(['lay', 'i18n', 'util', 'element', 'tabs', 'form'], function(export
       // 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 +'">',
@@ -154,12 +269,16 @@ layui.define(['lay', 'i18n', 'util', 'element', 'tabs', 'form'], function(export
               ].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