Dev: Log code input highlight

This commit is contained in:
surunzi
2016-05-09 13:16:40 +08:00
parent 173c2823db
commit 3f23b97e83
7 changed files with 18 additions and 10 deletions

View File

@@ -1,7 +1,7 @@
import Tool from '../DevTools/Tool.es6'
import util from '../lib/util'
import beautify from 'js-beautify'
import highlight from './highlight.es6'
import highlight from '../lib/highlight.es6'
require('./Sources.scss');

View File

@@ -5,6 +5,7 @@
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.code {
background: #fff;
padding: $common-padding;
overflow-x: auto;
min-height: 100%;

View File

@@ -1,110 +0,0 @@
import util from '../lib/util'
// https://github.com/trentrichardson/jQuery-Litelighter
export default function highlight(str, lang)
{
str = str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
lang = language[lang];
var subLangSi = 0,
subLangs = [];
util.each(lang, (val) =>
{
if (!val.language) return;
str = str.replace(val.re, function($1, $2, $3)
{
subLangs[subLangSi++] = highlight($2, val.language);
return $1.replace($2, '___subtmpl'+ (subLangSi - 1) +'___');
});
});
util.each(lang, (val, key) =>
{
if (language[val.language]) return;
str = str.replace(val.re, "___"+ key +"___$1___end"+ key +"___");
});
var lvls = [];
str = str.replace(/___(?!subtmpl)\w+?___/g, function($0)
{
var end = $0.substr(3, 3) ==='end',
tag = (!end? $0.substr(3) : $0.substr(6)).replace(/_/g,''),
lastTag = lvls.length > 0 ? lvls[lvls.length - 1] : null;
if(!end && (lastTag == null || tag == lastTag || (lastTag != null && lang[lastTag].embed != undefined && lang[lastTag].embed.indexOf(tag) > -1)))
{
lvls.push(tag);
return $0;
} else if(end && tag == lastTag)
{
lvls.pop();
return $0;
}
return "";
});
util.each(lang, (val, key) =>
{
str = str.replace(new RegExp("___end"+ key +"___","g"), "</span>")
.replace(new RegExp("___"+ key +"___","g"), "<span class='litelighterstyle' style='"+ style[val.style] +"'>");
});
util.each(lang, (val) =>
{
if (!val.language) return;
str = str.replace(/___subtmpl\d+___/g, function($tmpl)
{
var i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, "$1"), 10);
return subLangs[i];
});
});
return str;
};
var style = {
code: 'background-color:#ffffff;color:#555;',
comment: 'color:#969896',
string: 'color:#183691',
number: 'color:#0086b3;',
keyword: 'color:#a71d5d;',
operators: 'color:#a71d5d;'
};
var language = {};
language.js = {
comment: {re: /(\/\/.*|\/\*([\s\S]*?)\*\/)/g, style: 'comment'},
string: {re: /(('.*?')|(".*?"))/g, style: 'string'},
numbers: {re: /(\-?(\d+|\d+\.\d+|\.\d+))/g, style: 'number'},
regex: {re: /([^\/]\/[^\/].+\/(g|i|m)*)/g, style: 'number'},
keywords: {re: /(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|false|true|null|undefined)(?:\b)/gi, style: 'keyword'},
operators: {re: /(\+|\-|\/|\*|%|=|&lt;|&gt;|\||\?|\.)/g, style: 'operators'}
};
language.html = {
comment: {re: /(&lt;!\-\-([\s\S]*?)\-\-&gt;)/g, style: 'comment'},
tag: {re: /(&lt;\/?\w(.|\n)*?\/?&gt;)/g, style: 'keyword', embed: ['string']},
string: language.js.string,
css: {re: /(?:&lt;style.*?&gt;)([\s\S]+?)(?:&lt;\/style&gt;)/gi, language: 'css'},
script: {re: /(?:&lt;script.*?&gt;)([\s\S]+?)(?:&lt;\/script&gt;)/gi, language: 'js'}
};
language.css = {
comment: language.js.comment,
string: language.js.string,
numbers: {re: /((\-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g, style: 'number'},
keywords: {re: /(@\w+|:?:\w+|[a-z\-]+:)/g, style: 'keyword'}
};