diff --git a/src/css/modules/code.css b/src/css/modules/code.css index afc60103..42751343 100644 --- a/src/css/modules/code.css +++ b/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;} diff --git a/src/modules/code.js b/src/modules/code.js index 744e5ca1..97661567 100644 --- a/src/modules/code.js +++ b/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: '', // 高亮范围,不可全局设置值 + comment: false, // 是否解析注释,性能敏感不可全局开启 [!code name:] + 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-remove', + }, + // diff-- + '--': { + comment: false, + classActiveLine: 'layui-code-line-diff-add', + } + } }; // 初始索引 @@ -60,6 +84,88 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){ var trim = function(str){ return trimEnd(str).replace(/^\n|\n$/, ''); }; + + // '1,3-5,8' -> [1,3,4,5,8] + var parseHighlightedLines = function(rangeStr){ + var lineArray = $.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 lineArray.length ? lineArray : undefined + } + + // 引用自 shiki + var hightLineRE = /(?:\/\/|\/\*{1,2}) *\[!code ([\w+-]+)(?::(\d+))?] *(?:\*{1,2}\/)?/; + var preprocessHighlightLine = function (highlightLineOptions, lines) { + var hasHighlightLine = false; + var needParseComment = false; + var lineClassMap = {}; + var preClassMap = {}; + + var updateLineClassMap = function (lineNumber, className) { + if (!lineClassMap[lineNumber]) { + lineClassMap[lineNumber] = []; + } + lineClassMap[lineNumber].push(className); + } + + $.each(highlightLineOptions, function (name, hlOpts) { + if (hlOpts.range) { + var hLines = parseHighlightedLines(hlOpts.range); + if (hLines.length > 0) { + hasHighlightLine = true; + if (hlOpts.classActivePre) { + preClassMap[hlOpts.classActivePre] = true; + } + $.each(hLines, function (i, lineNumber) { + updateLineClassMap(lineNumber, hlOpts.classActiveLine); + }); + } + } + if (hlOpts.comment) { + needParseComment = true; + } + }); + + if (needParseComment) { + // 解析注释中的高亮行 + $.each(lines, function (i, line) { + var matched = line.match(hightLineRE); + if (matched && matched[1] && lay.hasOwn(highlightLineOptions, matched[1])) { + var hlOpts = highlightLineOptions[matched[1]]; + hasHighlightLine = true; + if (hlOpts.classActivePre) { + preClassMap[hlOpts.classActivePre] = true; + } + // 要高亮的行数 + var lines = parseInt(matched[2], 10) + if (matched[2] && lines && lines > 1) { + var startLine = i + 1; + var endLine = startLine + lines - 1; + var hLines = parseHighlightedLines(startLine + '-' + endLine); + if (hLines.length > 0) { + $.each(hLines, function (i, lineNumber) { + updateLineClassMap(lineNumber, hlOpts.classActiveLine); + }); + } + }else{ + updateLineClassMap(i + 1, hlOpts.classActiveLine); + } + } + }); + } + + return { + needParseComment: needParseComment, + hasHighlightLine: hasHighlightLine, + preClass: Object.keys(preClassMap).join(' '), + lineClassMap: lineClassMap + } + } // export api exports('code', function(options, mode){ @@ -141,10 +247,16 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){ // code 行 var lines = String(html).split(/\r?\n/g); + // 预处理行高亮 + var hl = preprocessHighlightLine(options.highlightLine, lines); + // 包裹 code 行结构 html = $.map(lines, function(line, num) { + var lineClass = (hl.hasHighlightLine && hl.lineClassMap[num + 1] && hl.lineClassMap[num + 1].length) + ? [CONST.ELEM_LINE].concat(hl.lineClassMap[num + 1]).join(' ') + : CONST.ELEM_LINE; return [ - '
', + '
', ( options.ln ? [ '
', @@ -153,12 +265,16 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){ ].join('') : '' ), '
', - (line || ' '), + (hl.needParseComment ? line.replace(hightLineRE, '') : line) || ' ', '
', '
' ].join(''); }); + if(hl.preClass){ + othis.addClass(hl.preClass) + } + return { lines: lines, html: html