lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

更新 code 测试用例

Browse Source
This commit is contained in:
贤心 2023-09-06 20:53:01 +08:00
parent b391ade958
commit b809eee28e
1 changed files with 117 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
examples/code.html
View File

@ -8,17 +8,21 @@
<link href="../src/css/layui.css" rel="stylesheet">
<style>
body{padding: 32px;}
pre{margin-bottom: 20px;}
pre{margin: 16px 0;}
</style>
</head>
<body>
<pre id="test">
<pre id="test" class="layui-test">
<textarea class="layui-hide">
<div class="layui-btn-container">
<button type="button" class="layui-btn">默认按钮</button>
</div>
<p class="layui-padding-3">
AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
</p>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
</div>
@ -50,13 +54,13 @@
</textarea>
</pre>
<pre><code class="layui-code">
<pre><code class="layui-code" lay-options="{header: true}">
code line
code line
code line
</code></pre>
<pre class="layui-code" lay-options="{height: 300}" id="ID-multi-line"></pre>
<pre class="layui-code" lay-options="{style: 'height: 300px'}" id="ID-multi-line"></pre>
<script type="module">
// 生成批量行，测试行结构
const elem = document.getElementById('ID-multi-line');
@ -132,39 +136,137 @@ code line
</div>
</pre>
<pre class="layui-code" lay-about="code">
<pre class="layui-code" lay-options="{about: 'About info'}">
About
</pre>
<script src="../src/layui.js"></script>
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
<script>
layui.use('code', function(){
layui.use(['code', 'dropdown'], function(){
var dropdown = layui.dropdown;
var $ = layui.$;
// return;
layui.link('https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css');
// 高亮主题 css 库
var themeData = $.map([
// hljs 主题库
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs2015.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github-dark.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-dark.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-light.min.css',
'https://cdn.staticfile.org/highlight.js/11.8.0/styles/monokai-sublime.min.css',
'-',
// prism 主题库
'https://cdn.staticfile.org/prism/1.29.0/themes/prism-dark.min.css',
'https://cdn.staticfile.org/prism/1.29.0/themes/prism.min.css'
], function(v, index) {
return {
title: v,
link: v,
highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
type: v === '-' ? '-' : 'normal'
};
});
var codeInst = layui.code({
elem: '#test',
preview: true,
codeStyle: 'height: 700px;',
codeStyle: 'height: 510px;',
previewStyle: 'word-wrap: break-word;',
// theme: 'dark',
// header: true,
// wordWrap: false, // 是否自动换行
lang: 'html',
highlighter: "hljs",
codeRender: function (code, opts) {
/*codeRender: function (code, opts) {
layui.link(themeData[1].link, 'layui-code-theme');
return hljs.highlight(code, {language: opts.lang}).value;
},*/
tools: [
'full',
{
title: ['文字换行'],
type: 'form'
},
{
title: ['切换高亮主题'],
type: 'theme'
}
],
toolsEvent: function(obj) {
if (obj.type === 'form') {
dropdown.render({
elem: obj.elem,
data: [{title: '自动换行', wordWrap: true}, {title: '不自动换行', wordWrap: false}],
show: true,
click: function(data, othis) {
codeInst.reload({
wordWrap: data.wordWrap,
content: [+new Date()]
});
}
});
} else if (obj.type === 'theme') {
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');
// 若高亮器有变化，则重载
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);
}
});
}
}
});
}
}
});
// 重载
/*codeInst.reload({
codeRender: function () {
return hljs.highlight(code, {language: opts.lang}).value;
}
});*/
// 仅重载 code
layui.debounce(function() {
codeInst.reloadCode({
codeRender: function(code, opts) {
layui.link(themeData[1].link, 'layui-code-theme');
return hljs.highlight(code, {language: opts.lang}).value;
}
});
}, 300)();
// 通用实例，根据元素属性定制化参数
layui.code({
elem: '.layui-code',
tools: ['tips'],
langMarker: true,
lang: 'html',
// preview: true
});
});