重构 code 组件，以更好地适配第三方语法高亮库 (#1352)
* 新增 code 组件 codeRender 选项 * 新增 code 组件 highlighter 和 lang 选项 * 优化 code 换行符正则表达式 * 调整 code 包裹结构 * 修复一些样式问题 * 修复一些样式问题 * 默认关闭 langMarker 选项, 优化边距 * 优化样式 * 修复开启 title 时行号错位的问题 * 优化 ie8 下样式 * 修复 IE8 下的一些问题 * 删除未使用的代码 * 删除不必要的常量 * 优化行号
This commit is contained in:
morning-star
GitHub
parent
8d6bf524d3
commit
804244f868
@ -6,35 +6,37 @@
|
||||
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||
|
||||
/* 默认风格 */
|
||||
.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
|
||||
.layui-code-view{display: block; position: relative; margin: 11px 0; padding: 0 !important; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: 'Courier New'; font-size: 13px; white-space: pre; overflow: auto;}
|
||||
.layui-code-view.layui-code-line-numbers-mode{padding-left: 45px !important;}
|
||||
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
|
||||
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
|
||||
.layui-code-line-numbers-mode .layui-code-title{margin-left: -45px;}
|
||||
.layui-code-title ~ .layui-code-line-numbers{margin-top: 40px;}
|
||||
.layui-code-about > a{padding-left: 10px;}
|
||||
.layui-code-view > .layui-code-ol,
|
||||
.layui-code-view > .layui-code-ul{max-height: 100%; padding: 0 !important; position: relative; overflow: auto;}
|
||||
.layui-code-view > .layui-code-ol > li{position: relative; margin-top: 0 !important; margin-left: 45px !important; line-height: 20px; padding: 0 10px !important; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
|
||||
.layui-code-view > .layui-code-ol > li:first-child,
|
||||
.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px !important;}
|
||||
.layui-code-view > .layui-code-ol > li:last-child,
|
||||
.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px !important;}
|
||||
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px !important; list-style-type: none; *list-style-type: none; background-color: #fff;}
|
||||
.layui-code-view > .layui-code-lines{display:block; max-height: 100%; padding: 15px 10px !important; position: relative;background-color: #fff;font-family: 'Courier New'}
|
||||
.layui-code-view > .layui-code-lines > .layui-code-line{position: relative; display: block; line-height: 20px;}
|
||||
.layui-code-view pre{margin: 0;}
|
||||
.layui-code-line-numbers{position: absolute;top: 0;bottom: 0;left: 0;width: 45px; border-right: 1px solid #e2e2e2; text-align: center; padding: 15px 0; line-height: 20px; user-select: none;}
|
||||
.layui-code-line-number{display: block;}
|
||||
.layui-code-lang-marker{position: absolute; top: 2px; right: 11px; color: currentColor;}
|
||||
.layui-code-view:hover > .layui-code-lang-marker{display: none;}
|
||||
|
||||
/* 深色风格 */
|
||||
.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
|
||||
.layui-code-dark > .layui-code-title{border-bottom: none;}
|
||||
.layui-code-dark > .layui-code-ol > li,
|
||||
.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
|
||||
.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}
|
||||
.layui-code-dark > .layui-code-lines{background-color: #3F3F3F !important; border-left: none !important;}
|
||||
.layui-code-dark > .layui-code-lines{margin-left: 6px;}
|
||||
.layui-code-dark.layui-code-line-numbers-mode > .layui-code-lines{margin-left: 0;}
|
||||
|
||||
/* 代码预览 */
|
||||
.layui-code textarea{display: none;}
|
||||
.layui-code-preview > .layui-code{margin: 0;}
|
||||
.layui-code-preview > .layui-code,
|
||||
.layui-code-preview > .layui-code-view{margin: 0;}
|
||||
.layui-code-preview > .layui-tab{position: relative; z-index: 1; margin-bottom: 0;}
|
||||
.layui-code-preview > .layui-tab > .layui-tab-title{border-bottom: none;}
|
||||
.layui-code-preview > .layui-code > .layui-code-title{display: none;}
|
||||
.layui-code-preview .layui-code-item{display: none;}
|
||||
.layui-code-preview .layui-code-view > .layui-code-ol > li{}
|
||||
.layui-code-preview .layui-code-view > .layui-code-lines > .layui-code-line{}
|
||||
.layui-code-item-preview{position: relative; padding: 16px; overflow: auto;}
|
||||
.layui-code-item-preview > iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
|
||||
|
||||
@ -56,5 +58,14 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||
.layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;}
|
||||
.layui-code-full .layui-code-item{width: 100% !important; border-width: 0 !important; border-top-width: 1px !important;}
|
||||
.layui-code-full .layui-code-item,
|
||||
.layui-code-full .layui-code-ol,
|
||||
.layui-code-full .layui-code-ul{height: calc(100vh - 51px) !important; box-sizing: border-box;}
|
||||
.layui-code-full .layui-code-view{max-height: calc(100vh - 51px) !important; box-sizing: border-box;}
|
||||
|
||||
/* 代码高亮重置 */
|
||||
.layui-code-view[class*=language-]{
|
||||
font-size: 13px !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
.layui-code-view[class*=language-] > .layui-code-lines,
|
||||
.layui-code-view[class*=language-] > .layui-code-line-numbers{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/**
|
||||
* code
|
||||
* code
|
||||
* Code 预览组件
|
||||
*/
|
||||
|
||||
|
||||
layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
"use strict";
|
||||
|
||||
|
||||
var $ = layui.$;
|
||||
var util = layui.util;
|
||||
var element = layui.element;
|
||||
@ -21,7 +21,10 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
ELEM_FULL: 'layui-code-full',
|
||||
ELEM_PREVIEW: 'layui-code-preview',
|
||||
ELEM_ITEM: 'layui-code-item',
|
||||
ELEM_SHOW: 'layui-show'
|
||||
ELEM_SHOW: 'layui-show',
|
||||
ELEM_LINE: 'layui-code-line',
|
||||
ELEM_LINES: 'layui-code-lines',
|
||||
ELEM_LINE_NUMBERS_MODE: 'layui-code-line-numbers-mode',
|
||||
};
|
||||
|
||||
// 默认参数项
|
||||
@ -35,14 +38,21 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
// 默认文本
|
||||
text: {
|
||||
code: util.escape('</>'),
|
||||
preview: 'Preview'
|
||||
}
|
||||
preview: 'Preview',
|
||||
},
|
||||
lang: 'text', // 指定语言类型
|
||||
highlighter: false, // 是否开启语法高亮，'prism','hljs','shiki'
|
||||
langMarker: false, // 代码区域是否显示语言类型标记
|
||||
};
|
||||
|
||||
var trimEnd = function(str){
|
||||
return String(str).replace(/\s+$/, '');
|
||||
}
|
||||
// 保留首行缩进
|
||||
var trim = function(str){
|
||||
return $.trim(str).replace(/^\n|\n$/, '');
|
||||
return trimEnd(str).replace(/^\n|\n$/, '');
|
||||
};
|
||||
|
||||
|
||||
// export api
|
||||
exports('code', function(options){
|
||||
var opts = options = $.extend(true, {}, config, options);
|
||||
@ -62,36 +72,40 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
var value = othis.attr('lay-'+ attr);
|
||||
if(typeof value === 'string'){
|
||||
obj[attr] = value;
|
||||
}
|
||||
}
|
||||
})
|
||||
return obj;
|
||||
}({}));
|
||||
|
||||
// codeRender 需要关闭编码
|
||||
// 未使用 codeRender 时若开启了预览，则强制开启编码
|
||||
options.encode = (options.encode || options.preview) && !options.codeRender;
|
||||
|
||||
// 最终显示的代码
|
||||
var finalCode;
|
||||
|
||||
// 获得初始代码
|
||||
var codes = othis.data('code') || function(){
|
||||
var rawCode = othis.data('code') || function(){
|
||||
var arr = [];
|
||||
var textarea = othis.children('textarea');
|
||||
|
||||
|
||||
// 若内容放置在 textarea 中
|
||||
textarea.each(function(){
|
||||
arr.push(trim(this.value));
|
||||
});
|
||||
|
||||
|
||||
// 内容直接放置在元素外层
|
||||
if(arr.length === 0){
|
||||
arr.push(trim(othis.html()));
|
||||
}
|
||||
|
||||
|
||||
return arr;
|
||||
}();
|
||||
|
||||
othis.data('code', codes);
|
||||
othis.data('code', rawCode);
|
||||
|
||||
// code
|
||||
var html = finalCode = codes.join('');
|
||||
var html = finalCode = rawCode.join('');
|
||||
|
||||
// 外部重新解析 code
|
||||
if(typeof options.codeParse === 'function'){
|
||||
@ -127,13 +141,13 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
var FILTER_VALUE = 'LAY-CODE-DF-'+ index;
|
||||
var layout = options.layout || ['code', 'preview'];
|
||||
var isIframePreview = options.preview === 'iframe';
|
||||
|
||||
|
||||
// 追加 Tab 组件
|
||||
var elemView = $('<div class="'+ CONST.ELEM_PREVIEW +'">');
|
||||
var elemTabView = $('<div class="layui-tab layui-tab-brief">');
|
||||
var elemHeaderView = $('<div class="layui-tab-title">');
|
||||
var elemPreviewView = $('<div class="'+ [
|
||||
CONST.ELEM_ITEM,
|
||||
CONST.ELEM_ITEM,
|
||||
CONST.ELEM_ITEM +'-preview',
|
||||
'layui-border'
|
||||
].join(' ') +'">');
|
||||
@ -146,9 +160,6 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
elemView.addClass(options.className);
|
||||
elemTabView.attr('lay-filter', FILTER_VALUE);
|
||||
|
||||
// 若开启预览，则强制对 code 进行编码
|
||||
options.encode = true;
|
||||
|
||||
// 标签头
|
||||
layui.each(layout, function(i, v){
|
||||
var li = $('<li lay-id="'+ v +'">');
|
||||
@ -218,7 +229,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
typeof options.toolsEvent === 'function' && options.toolsEvent({
|
||||
elem: oi,
|
||||
type: type,
|
||||
rawCode: codes.join(''), // 原始 code
|
||||
rawCode: rawCode.join(''), // 原始 code
|
||||
finalCode: util.unescape(finalCode) // 最终 code
|
||||
});
|
||||
});
|
||||
@ -253,7 +264,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
options.tools && elemTabView.append(elemToolbar); // 追加工具栏
|
||||
othis.wrap(elemView).addClass(CONST.ELEM_ITEM).before(elemTabView); // 追加标签结构
|
||||
|
||||
|
||||
|
||||
// 追加预览
|
||||
if(isIframePreview){
|
||||
elemPreviewView.html('<iframe allowtransparency="true" frameborder="0"></iframe>');
|
||||
@ -265,7 +276,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
if(isIframePreview && iframe){
|
||||
iframe.srcdoc = finalCode;
|
||||
} else {
|
||||
thisItemBody.html(codes.join(''));
|
||||
thisItemBody.html(rawCode.join(''));
|
||||
}
|
||||
// 回调的返回参数
|
||||
var params = {
|
||||
@ -301,7 +312,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
var thisElem = $(data.elem).closest('.'+ CONST.ELEM_PREVIEW);
|
||||
var elemItemBody = thisElem.find('.'+ CONST.ELEM_ITEM);
|
||||
var thisItemBody = elemItemBody.eq(data.index);
|
||||
|
||||
|
||||
elemItemBody.removeClass(CONST.ELEM_SHOW);
|
||||
thisItemBody.addClass(CONST.ELEM_SHOW);
|
||||
|
||||
@ -311,9 +322,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
});
|
||||
}
|
||||
|
||||
// 有序或无序列表
|
||||
var listTag = options.ln ? 'ol' : 'ul';
|
||||
var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">');
|
||||
var listElem = $('<code class="'+ CONST.ELEM_LINES +'"></code>'); // 此处的闭合标签是为了兼容 IE8
|
||||
|
||||
// header
|
||||
var headerElem = $('<div class="'+ CONST.ELEM_TITLE +'">');
|
||||
@ -328,19 +337,42 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
othis.addClass('layui-code-'+ options.skin);
|
||||
}
|
||||
|
||||
|
||||
// 高亮
|
||||
if(options.highlighter) othis.addClass(options.highlighter + ' language-' + options.lang);
|
||||
|
||||
// 转义 HTML 标签
|
||||
if(options.encode) html = util.escape(html); // 编码
|
||||
html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
|
||||
|
||||
|
||||
// code 转 html
|
||||
if(typeof options.codeRender === 'function') html = options.codeRender(html, options);
|
||||
var lines = html.split(/\r?\n/g);
|
||||
html = (options.codeRender && !options.highlighter)
|
||||
? html
|
||||
: $.map(lines, function(line){
|
||||
return ['<div class="', CONST.ELEM_LINE, '">', (line || ' '), '</div>'].join(''); // 空行填充空格，以保证换行效果
|
||||
}).join('')
|
||||
|
||||
// 生成列表
|
||||
othis.html(listElem.html('<li>' + html + '</li>'));
|
||||
|
||||
othis.html(listElem.html(html));
|
||||
|
||||
// 创建行号
|
||||
if(options.ln) {
|
||||
var lineNumbersCode = ['<div class="layui-code-line-numbers">']
|
||||
layui.each(lines, function(index){
|
||||
lineNumbersCode.push('<span class="layui-code-line-number">' + util.digit(index + 1) +'.</span>')
|
||||
});
|
||||
lineNumbersCode.push('</div>');
|
||||
othis.addClass(CONST.ELEM_LINE_NUMBERS_MODE);
|
||||
othis.append(lineNumbersCode.join(''));
|
||||
othis.children('.layui-code-line-numbers').css({
|
||||
height: listElem.height(),
|
||||
})
|
||||
}
|
||||
|
||||
// 创建 header
|
||||
if(options.header && !othis.children('.'+ CONST.ELEM_TITLE)[0]){
|
||||
headerElem.html((options.title || options.text.code) + (
|
||||
options.about
|
||||
options.about
|
||||
? '<div class="layui-code-about">' + options.about + '</div>'
|
||||
: ''
|
||||
));
|
||||
@ -355,16 +387,20 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
// 按行数适配左边距
|
||||
(function(autoIncNums){
|
||||
if(autoIncNums > 0){
|
||||
listElem.css('margin-left', autoIncNums + 'px');
|
||||
othis.css('margin-left', autoIncNums + 'px');
|
||||
}
|
||||
})(Math.floor(listElem.find('li').length/100));
|
||||
})(Math.floor(listElem.find('.' + CONST.ELEM_LINE).length/100));
|
||||
|
||||
// 限制 Code 最大高度
|
||||
if(options.height){ // 兼容旧版本
|
||||
listElem.css('max-height', options.height);
|
||||
othis.css('max-height', options.height);
|
||||
}
|
||||
// Code 内容区域样式
|
||||
listElem.attr('style', options.codeStyle);
|
||||
if(options.codeStyle){
|
||||
othis.attr('style', function(_, origVal){
|
||||
return (origVal || '') + options.codeStyle;
|
||||
});
|
||||
}
|
||||
|
||||
// 是否开启代码复制
|
||||
if(options.copy && !options.preview){
|
||||
@ -372,7 +408,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
'<i class="layui-icon layui-icon-file-b" title="复制"></i>',
|
||||
'</span>'].join(''));
|
||||
var elemCopyHas = othis.children('.'+ CONST.ELEM_COPY);
|
||||
var isHeight = listElem[0].style.height || listElem[0].style.maxHeight;
|
||||
var isHeight = othis[0].style.height || othis[0].style.maxHeight;
|
||||
|
||||
if(isHeight) elemCopy.addClass(CONST.ELEM_COPY + '-offset'); // 偏移
|
||||
if(elemCopyHas[0]) elemCopyHas.remove(); // 移除旧的复制元素
|
||||
@ -384,8 +420,18 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
|
||||
});
|
||||
}
|
||||
|
||||
// language marker
|
||||
if(options.langMarker){
|
||||
var elemMarker = $('<span class="layui-code-lang-marker">' + options.lang + '</span>')
|
||||
var isHeight = othis[0].style.height || othis[0].style.maxHeight;
|
||||
var elemMarkerHas = othis.children("." + CONST.ELEM_MARKER);
|
||||
if(isHeight) elemMarker.css('margin-right', '17px')
|
||||
if(elemMarkerHas) elemMarkerHas.remove();
|
||||
othis.append(elemMarker);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user