mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
297 lines
7.6 KiB
297 lines
7.6 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<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> |
|
|
|
<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> |
|
<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> |
|
|
|
<pre><code class="layui-code" lay-options="{header: true}"> |
|
code line |
|
code line |
|
code line |
|
</code></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'); |
|
elem.innerHTML = Array(1001).fill().map(v => { |
|
return Math.random().toString(32).substring(2).toUpperCase(); |
|
}).join('\n'); |
|
</script> |
|
|
|
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
</pre> |
|
|
|
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
</pre> |
|
|
|
<pre class="layui-code" lay-options="{title: '嵌套', encode: false}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
<pre class="layui-code" lay-options="{ln: false, encode: false}"> |
|
code line |
|
code line |
|
code line |
|
<pre class="layui-code"> |
|
code line |
|
code line |
|
code line |
|
</pre> |
|
</pre> |
|
</pre> |
|
|
|
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}"> |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
code line |
|
</pre> |
|
</pre> |
|
</pre> |
|
</pre> |
|
|
|
<pre class="layui-code" lay-options="{encode: true}"> |
|
<div> |
|
123 |
|
</div> |
|
</pre> |
|
|
|
<pre class="layui-code" lay-options="{about: 'AboutInfo'}"> |
|
About |
|
</pre> |
|
|
|
<!-- 第三方语法高亮库 --> |
|
<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> |
|
|
|
<!-- layui --> |
|
<script src="../src/layui.js"></script> |
|
<script> |
|
layui.use(['code', 'dropdown'], function(){ |
|
var dropdown = layui.dropdown; |
|
var layer = layui.layer; |
|
var $ = layui.$; |
|
|
|
// return; |
|
|
|
// 高亮主题 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: 510px;', |
|
previewStyle: 'word-wrap: break-word;', |
|
// theme: 'dark', |
|
// header: true, |
|
// wordWrap: false, // 是否自动换行 |
|
lang: 'html', |
|
highlighter: "hljs", |
|
// code: '<div class="layui-btn">初始按钮</div>', |
|
/*codeRender: function (code, opts) { // 初始高亮 |
|
layui.link(themeData[1].link, 'layui-code-theme'); |
|
return hljs.highlight(code, {language: opts.lang}).value; |
|
},*/ |
|
tools: [ |
|
'full', |
|
'window', |
|
{ |
|
title: ['文字换行'], |
|
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 |
|
}); |
|
} |
|
}); |
|
} |
|
}, |
|
{ |
|
title: ['切换高亮主题'], |
|
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'); |
|
|
|
// 若高亮器有变化，则重载 |
|
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); |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
} |
|
}, |
|
{ |
|
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 |
|
}); |
|
}); |
|
} |
|
} |
|
] |
|
}); |
|
|
|
// 语法高亮重载 |
|
codeInst.reloadCode({ |
|
codeRender: function(code, opts) { |
|
layui.link(themeData[1].link, 'layui-code-theme'); |
|
return hljs.highlight(code, {language: opts.lang}).value; |
|
} |
|
}); |
|
|
|
|
|
// 通用实例，根据元素属性定制化参数 |
|
layui.code({ |
|
elem: '.layui-code', |
|
tools: ['tips'], |
|
langMarker: true, |
|
lang: 'html', |
|
// preview: true |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|