mirror of
https://gitee.com/layui/layui.git
synced 2025-05-06 21:58:06 +08:00
更新 code 测试用例
This commit is contained in:
贤心
parent
b391ade958
commit
b809eee28e
@ -8,17 +8,21 @@
|
|||||||
<link href="../src/css/layui.css" rel="stylesheet">
|
<link href="../src/css/layui.css" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
body{padding: 32px;}
|
body{padding: 32px;}
|
||||||
pre{margin-bottom: 20px;}
|
pre{margin: 16px 0;}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<pre id="test">
|
<pre id="test" class="layui-test">
|
||||||
<textarea class="layui-hide">
|
<textarea class="layui-hide">
|
||||||
<div class="layui-btn-container">
|
<div class="layui-btn-container">
|
||||||
<button type="button" class="layui-btn">默认按钮</button>
|
<button type="button" class="layui-btn">默认按钮</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p class="layui-padding-3">
|
||||||
|
AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="layui-btn-container">
|
<div class="layui-btn-container">
|
||||||
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
|
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
|
||||||
</div>
|
</div>
|
||||||
@ -50,13 +54,13 @@
|
|||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre><code class="layui-code">
|
<pre><code class="layui-code" lay-options="{header: true}">
|
||||||
code line
|
code line
|
||||||
code line
|
code line
|
||||||
code line
|
code line
|
||||||
</code></pre>
|
</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">
|
<script type="module">
|
||||||
// 生成批量行，测试行结构
|
// 生成批量行，测试行结构
|
||||||
const elem = document.getElementById('ID-multi-line');
|
const elem = document.getElementById('ID-multi-line');
|
||||||
@ -132,39 +136,137 @@ code line
|
|||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-about="code">
|
<pre class="layui-code" lay-options="{about: 'About info'}">
|
||||||
About
|
About
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="../src/layui.js"></script>
|
<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/highlight.js/11.8.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use('code', function(){
|
layui.use(['code', 'dropdown'], function(){
|
||||||
|
var dropdown = layui.dropdown;
|
||||||
|
var $ = layui.$;
|
||||||
|
|
||||||
// return;
|
// 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({
|
var codeInst = layui.code({
|
||||||
elem: '#test',
|
elem: '#test',
|
||||||
preview: true,
|
preview: true,
|
||||||
codeStyle: 'height: 700px;',
|
codeStyle: 'height: 510px;',
|
||||||
|
previewStyle: 'word-wrap: break-word;',
|
||||||
// theme: 'dark',
|
// theme: 'dark',
|
||||||
// header: true,
|
// header: true,
|
||||||
|
// wordWrap: false, // 是否自动换行
|
||||||
lang: 'html',
|
lang: 'html',
|
||||||
highlighter: "hljs",
|
highlighter: "hljs",
|
||||||
|
/*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) {
|
codeRender: function (code, opts) {
|
||||||
|
return highlighter[data.highlighter](code, opts);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 仅重载 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;
|
return hljs.highlight(code, {language: opts.lang}).value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 重载
|
}, 300)();
|
||||||
/*codeInst.reload({
|
|
||||||
codeRender: function () {
|
|
||||||
return hljs.highlight(code, {language: opts.lang}).value;
|
|
||||||
}
|
|
||||||
});*/
|
|
||||||
|
|
||||||
// 通用实例，根据元素属性定制化参数
|
// 通用实例，根据元素属性定制化参数
|
||||||
layui.code({
|
layui.code({
|
||||||
|
elem: '.layui-code',
|
||||||
tools: ['tips'],
|
tools: ['tips'],
|
||||||
langMarker: true,
|
langMarker: true,
|
||||||
|
lang: 'html',
|
||||||
// preview: true
|
// preview: true
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user