lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-10-07 15:14:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
Files
fd78240b5345e83c2bbc0b79df21b7f5b6e4a024
layui/examples/code.html

397 lines
10 KiB
HTML
Raw Normal View History

2.0.0
2017-08-21 08:51:13 +08:00
<!DOCTYPE html>
<html>
<head>
improve `code` component
2022-06-29 20:24:51 +08:00
<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>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
pre{margin: 16px 0;}
improve `code` component
2022-06-29 20:24:51 +08:00
</style>
2.0.0
2017-08-21 08:51:13 +08:00
</head>
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>
2025-09-08 23:04:32 +08:00
<body class="layui-padding-3">
2.0.0
2017-08-21 08:51:13 +08:00
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>
2025-09-08 23:04:32 +08:00
<div class="layui-text">
<h2>代码高亮</h2>
</div>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
<pre id="test" class="layui-test">
更新 code 测试用例
2023-09-05 16:29:38 +08:00
<textarea class="layui-hide">
<div class="layui-btn-container">
<button type="button" class="layui-btn">默认按钮</button>
</div>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
<p class="layui-padding-3">
AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
</p>
更新 code 测试用例
2023-09-05 16:29:38 +08:00
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
</div>
<script type="text/html">
<h3>{{= d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{= item.modname }}</span>
<span>{{= item.alias }}：</span>
<span>{{= item.site || '' }}</span>
</li>
{{# }); }}
<p>{{# if(d.list.length === 0){ }}
无数据
{{# } }}</p>
</ul>
</script>
<script>
layui.use(function () {
var layer = layui.layer;
const a = '1'
function aa(a, b) {
return '11'
}
layer.msg(layui.v)
})
</script>
</textarea>
</pre>
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>
2025-09-08 23:04:32 +08:00
<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>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
<pre><code class="layui-code" lay-options="{header: true}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
更新 code 测试用例
2023-09-05 16:29:38 +08:00
</code></pre>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
<pre class="layui-code" lay-options="{style: 'height: 300px'}" id="ID-multi-line"></pre>
更新 code 测试用例
2023-09-05 16:29:38 +08:00
<script type="module">
// 生成批量行，测试行结构
const elem = document.getElementById('ID-multi-line');
elem.innerHTML = Array(1001).fill().map(v => {
return Math.random().toString(32).substring(2).toUpperCase();
}).join('\n');
</script>
code组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code
2022-06-29 16:33:15 +08:00
improve `code` component
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line
code line
code line
code line
code line
code line
2.0.0
2017-08-21 08:51:13 +08:00
</pre>
improve `code` component
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
code line
code line
code line
code line
code line
code line
2.0.0
2017-08-21 08:51:13 +08:00
</pre>
更新 code 示例
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{title: '嵌套', encode: false}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
更新 code 示例
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{ln: false, encode: false}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
<pre class="layui-code">
code line
code line
code line
code组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code
2022-06-29 16:33:15 +08:00
</pre>
2.0.0
2017-08-21 08:51:13 +08:00
</pre>
</pre>
更新 code 示例
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
更新 code 示例
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
更新 code 示例
2023-05-04 09:52:26 +08:00
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}">
improve `code` component
2022-06-29 20:24:51 +08:00
code line
code line
code line
code line
code line
code line
2.0.0
2017-08-21 08:51:13 +08:00
</pre>
</pre>
</pre>
</pre>
improve `code` component
2022-06-29 20:24:51 +08:00
<pre class="layui-code" lay-options="{encode: true}">
<div>
123
</div>
2.0.0
2017-08-21 08:51:13 +08:00
</pre>
更新 code 用例
2023-09-15 13:50:42 +08:00
<pre class="layui-code" lay-options="{about: 'AboutInfo'}">
improve `code` component
2022-06-29 20:24:51 +08:00
About
</pre>
2.0.0
2017-08-21 08:51:13 +08:00
更新 code 用例
2023-09-15 13:50:42 +08:00
<!-- 第三方语法高亮库 -->
test: 更新示例外部资源 CDN 路径
2024-10-09 00:29:16 +08:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
更新 code 用例
2023-09-15 13:50:42 +08:00
<!-- layui -->
<script src="../src/layui.js"></script>
2.0.0
2017-08-21 08:51:13 +08:00
<script>
更新 code 测试用例
2023-09-06 20:53:01 +08:00
layui.use(['code', 'dropdown'], function(){
var dropdown = layui.dropdown;
更新 code 用例
2023-09-15 13:50:42 +08:00
var layer = layui.layer;
更新 code 测试用例
2023-09-06 20:53:01 +08:00
var $ = layui.$;
更新 code 测试用例
2023-09-05 16:29:38 +08:00
// return;
更新 code 测试用例
2023-09-06 20:53:01 +08:00
// 高亮主题 css 库
var themeData = $.map([
// hljs 主题库
test: 更新示例外部资源 CDN 路径
2024-10-09 00:29:16 +08:00
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs2015.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/google-dark.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/google-light.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai-sublime.min.css',
更新 code 测试用例
2023-09-06 20:53:01 +08:00
'-',
// prism 主题库
test: 更新示例外部资源 CDN 路径
2024-10-09 00:29:16 +08:00
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
更新 code 测试用例
2023-09-06 20:53:01 +08:00
], function(v, index) {
return {
title: v,
link: v,
highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
type: v === '-' ? '-' : 'normal'
};
});
更新 code 用例
2023-09-15 13:50:42 +08:00
// 创建实例
更新 code 测试用例
2023-09-05 16:29:38 +08:00
var codeInst = layui.code({
elem: '#test',
preview: true,
更新 code 测试用例
2023-09-06 20:53:01 +08:00
codeStyle: 'height: 510px;',
previewStyle: 'word-wrap: break-word;',
更新 code 测试用例
2023-09-05 16:29:38 +08:00
// theme: 'dark',
// header: true,
更新 code 测试用例
2023-09-06 20:53:01 +08:00
// wordWrap: false, // 是否自动换行
更新 code 测试用例
2023-09-05 16:29:38 +08:00
lang: 'html',
highlighter: "hljs",
更新 code 用例
2023-09-15 13:50:42 +08:00
// code: '<div class="layui-btn">初始按钮</div>',
/*codeRender: function (code, opts) { // 初始高亮
更新 code 测试用例
2023-09-06 20:53:01 +08:00
layui.link(themeData[1].link, 'layui-code-theme');
更新 code 测试用例
2023-09-05 16:29:38 +08:00
return hljs.highlight(code, {language: opts.lang}).value;
更新 code 测试用例
2023-09-06 20:53:01 +08:00
},*/
tools: [
'full',
更新 code 用例
2023-09-15 13:50:42 +08:00
'window',
更新 code 测试用例
2023-09-06 20:53:01 +08:00
{
title: ['文字换行'],
更新 code 用例
2023-09-10 20:20:22 +08:00
type: 'form',
event: function(obj) {
dropdown.render({
elem: obj.elem,
data: [{title: '自动换行', wordWrap: true}, {title: '不自动换行', wordWrap: false}],
show: true,
click: function(data, othis) {
codeInst.reload({
wordWrap: data.wordWrap
});
}
});
}
更新 code 测试用例
2023-09-06 20:53:01 +08:00
},
{
title: ['切换高亮主题'],
更新 code 用例
2023-09-10 20:20:22 +08:00
type: 'theme',
event: function(obj) {
dropdown.render({
elem: obj.elem,
data: themeData,
show: true,
click: function(data, othis) {
$('#layuicss-layui-code-theme').remove();
layui.link(data.link, 'layui-code-theme');
更新 code 测试用例
2023-09-06 20:53:01 +08:00
更新 code 用例
2023-09-10 20:20:22 +08:00
// 若高亮器有变化，则重载
if (data.highlighter !== codeInst.config.highlighter) {
var highlighter = {
hljs: function(code, opts) {
return hljs.highlight(code, {
language: opts.lang
}).value;
},
prism: function(code, opts) {
return Prism.highlight(
code,
Prism.languages[opts.lang],
opts.lang
);
}
};
// 重载
codeInst.reload({
highlighter: data.highlighter,
codeRender: function (code, opts) {
return highlighter[data.highlighter](code, opts);
}
});
}
更新 code 测试用例
2023-09-06 20:53:01 +08:00
}
更新 code 用例
2023-09-10 20:20:22 +08:00
});
}
更新 code 用例
2023-09-15 13:50:42 +08:00
},
{
title: ['编辑'],
type: 'edit',
event: function(obj) {
layer.prompt({
formType: 2,
value: obj.rawCode,
title: '编辑代码',
area: ['800px', '500px'],
maxlength: 9999999999
}, function(value, index) {
layer.close(index);
// 重载 code
codeInst.reloadCode({
code: value
});
});
}
更新 code 测试用例
2023-09-06 20:53:01 +08:00
}
更新 code 用例
2023-09-10 20:20:22 +08:00
]
更新 code 测试用例
2023-09-05 16:29:38 +08:00
});
更新 code 测试用例
2023-09-06 20:53:01 +08:00
更新 code 用例
2023-09-15 13:50:42 +08:00
// 语法高亮重载
codeInst.reloadCode({
codeRender: function(code, opts) {
layui.link(themeData[1].link, 'layui-code-theme');
return hljs.highlight(code, {language: opts.lang}).value;
}
});
更新 code 测试用例
2023-09-06 20:53:01 +08:00
更新 code 测试用例
2023-09-05 16:29:38 +08:00
improve `code` component
2022-06-29 20:24:51 +08:00
// 通用实例，根据元素属性定制化参数
code组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code
2022-06-29 16:33:15 +08:00
layui.code({
更新 code 测试用例
2023-09-06 20:53:01 +08:00
elem: '.layui-code',
更新 code 测试用例
2023-08-24 10:17:09 +08:00
tools: ['tips'],
更新 code 测试用例
2023-09-05 16:29:38 +08:00
langMarker: true,
更新 code 测试用例
2023-09-06 20:53:01 +08:00
lang: 'html',
更新 code 测试用例
2023-09-05 16:29:38 +08:00
// preview: true
code组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code
2022-06-29 16:33:15 +08:00
});
2.0.0
2017-08-21 08:51:13 +08:00
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink