layui/examples/code.html

397 lines
10 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>
pre{margin: 16px 0;}
</style>
</head>
<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">
<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>
<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
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://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>
<!-- 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://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',
'-',
// prism 主题库
'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'
], 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>