lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-11-24 08:33:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

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

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

* update code

* chore: 优化变量命名

* docs(code): 更新文档

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

* docs(code): 优化 highlightLine 文档

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
This commit is contained in:
morning-star
2025-09-08 23:04:32 +08:00
committed by GitHub
parent af6ba6c972
commit fd78240b53
4 changed files with 296 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
examples/code.html
View File

@@ -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