网易首页 > 网易号 > 正文 申请入驻

JavaScript奇淫技巧:命令行语法高亮

0
分享至

JavaScript奇淫技巧:命令行语法高亮

本文,将实现命令行输出带有语法高亮、带行号的JS代码。

效果如下图所示:

对于JS程序员而言,这个效果是有些惊喜的。

而实现起来,却似乎是出乎意料的简单。

直接上源码:

var js_code = `
function get_copyright(){
var domain = "jshaman.com";
var from_year = 2017;
var copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;
return copyright;
console.log(get_copyright());
//高亮显示代码
const { codeFrameColumns } = require('@babel/code-frame');
const res = codeFrameColumns(js_code, {}, {
highlightCode: true,
console.log(res);

由代码可见,仅仅是使用@babel/code-frame这个NodeJS模块即可直接实现高亮语法。

本着“知其然,知其所以然”的理念,我们再深入探究一下实现语法高亮的原理。

首先,是进行语法分析,从JS代码分离出不同的关键字。

在这一步,可以使用babel的parser获得代码的AST(抽象语法树),再遍历AST进行分析取词。

例如获得变量名、函数名的方式如下:

var parser = require('@babel/parser');
var traverse = require('@babel/traverse').default;
//获得抽象语法树
var ast = parser.parse(js_code);
//遍历语法树
traverse(ast, traverse(ast,{
//函数
"FunctionDeclaration"(path){
var fun_name = path.node.id.name;
console.log("函数名:",fun_name);
},
//变量
"VariableDeclaration"(path){
var var_name = path.node.declarations[0].id.name;
console.log("变量名:",var_name);
},
console.log(js_code)

注:语法分析也有其它办法,比如用正则等。

接着上面的思路,当获得变量名、函数名之后,接下来即可对其进行着色。

写着色功能之前,先来看行代码:

console.log('\u001b[31m JShaman专注于JS代码混淆加密 \u001b[0m');

它会输出带颜色的信息,如下图:

为什么看似有些乱码的console执行时会出现彩色的文字呢?

解释是这样的:

The original specification only had 8 colors, and just gave them names. The SGR parameters 30-37 selected the foreground color, while 40-47 selected the background. Quite a few terminals implemented "bold" (SGR code 1) as a brighter color rather than a different font, thus providing 8 additional foreground colors. Usually you could not get these as background colors, though sometimes inverse video (SGR code 7) would allow that. Examples: to get black letters on white background use ESC[30;47m, to get red use ESC[31m, to get bright red use ESC[31;1m. To reset colors to their defaults, use ESC[39;49m (not supported on some terminals), or reset all attributes with ESC[0m.

大意是:“\u001b”是一个特殊的转意字符,遵从一定的规则,可以用来设置文字或背景颜色。

上面代码中,前面的\u001b[31m用于设定SGR颜色,后面的\u001b[0m相当于一个封闭标签作为前面SGR颜色的作用范围的结束点标记。

有了这个知识储备后,我们就可以继续前面的工作。

当从JS代码中进行分词之后,将代码用此方法进行改造,即可使语法高亮。

运行效果:

至此,便已得知了命令行语法高亮的全部秘密。

最后,奉上本示例完整源码:

var js_code = `
function demo(){
var domain = "jshaman.com";
var from_year = 2017;
var copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;
return copyright;
console.log(demo());
//高亮显示代码
const { codeFrameColumns } = require('@babel/code-frame');
const res = codeFrameColumns(js_code, {}, {
highlightCode: true,
console.log(res);
var parser = require('@babel/parser');
var traverse = require('@babel/traverse').default;
//获得抽象语法树
var ast = parser.parse(js_code);
//遍历语法树
traverse(ast, traverse(ast,{
//函数
"FunctionDeclaration"(path){
var fun_name = path.node.id.name;
console.log("函数名:",fun_name);
js_code = js_code.replace(fun_name,"\u001b[32m" + fun_name + "\u001b[0m");
},
//变量
"VariableDeclaration"(path){
var var_name = path.node.declarations[0].id.name;
console.log("变量名:",var_name);
js_code = js_code.replace(var_name,"\u001b[31m" + var_name + "\u001b[0m");
},
console.log(js_code)

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
拜登,哭了!

拜登,哭了!

每日经济新闻
2024-11-24 08:06:47
正式退出!武磊将发声离队二进宫重返欧洲,上港批准+球迷祝福

正式退出!武磊将发声离队二进宫重返欧洲,上港批准+球迷祝福

小海要说球
2024-11-24 17:32:08
菲副总统:若我被害,就去找总统算账 军方:将保持无党派立场,合作排查威胁

菲副总统:若我被害,就去找总统算账 军方:将保持无党派立场,合作排查威胁

红星新闻
2024-11-24 18:15:31
2790万粉丝网红主演新片差评如潮,成本超1.5亿,票房只有210万

2790万粉丝网红主演新片差评如潮,成本超1.5亿,票房只有210万

影视原说a
2024-11-24 18:32:15
美国摊牌!要对中国进行空袭?中国不是伊朗,也不是俄罗斯!

美国摊牌!要对中国进行空袭?中国不是伊朗,也不是俄罗斯!

云姐财说
2024-11-24 14:35:18
比90年代泡沫经济还夸张!曝东京151.99平米房子卖21.8亿,每平米接近70万人民币

比90年代泡沫经济还夸张!曝东京151.99平米房子卖21.8亿,每平米接近70万人民币

六子吃凉粉
2024-11-24 23:40:41
最新!俄方宣布:乌军“最强部队”被歼灭!视频曝光:俄先进导弹摧毁乌方目标!泽连斯基发声

最新!俄方宣布:乌军“最强部队”被歼灭!视频曝光:俄先进导弹摧毁乌方目标!泽连斯基发声

每日经济新闻
2024-11-24 11:11:59
奶奶为除虱子用敌敌畏给孙女洗头,担心效果不佳还用毛巾包头致中毒!

奶奶为除虱子用敌敌畏给孙女洗头,担心效果不佳还用毛巾包头致中毒!

北青网-北京青年报
2024-11-21 16:41:10
“新冠疫苗之父”杨晓明落马!打过3针的网友们评论区“炸锅”……

“新冠疫苗之父”杨晓明落马!打过3针的网友们评论区“炸锅”……

保险课堂
2024-11-23 22:47:52
民警踢小学生后续:男生殴打同学,副所长被停职,警方评论区沦陷

民警踢小学生后续:男生殴打同学,副所长被停职,警方评论区沦陷

谭谈社会
2024-11-24 19:28:46
央行出手了!人民币贬值背后的真相你绝对想不到!

央行出手了!人民币贬值背后的真相你绝对想不到!

魏家东
2024-11-24 07:54:37
不做大哥好多年,又无利益冲突,英国为何成为反俄急先锋?

不做大哥好多年,又无利益冲突,英国为何成为反俄急先锋?

高博新视野
2024-11-23 19:07:53
难怪川普突然对华安静下来,五角大楼告诉他一个“噩耗”

难怪川普突然对华安静下来,五角大楼告诉他一个“噩耗”

猫小狸同学
2024-11-24 17:00:03
确认了!锡安正式解约离开!5年感情彻底破裂……

确认了!锡安正式解约离开!5年感情彻底破裂……

篮球实战宝典
2024-11-24 19:10:56
退出北约!绝不与中俄为敌,美国万万没想到,盟友突然就跑掉了

退出北约!绝不与中俄为敌,美国万万没想到,盟友突然就跑掉了

猫小狸同学
2024-11-24 17:55:02
今年哈尔滨冰雪大世界糖葫芦售卖点位起拍价100万元?拍卖公司:系9个点位打包价

今年哈尔滨冰雪大世界糖葫芦售卖点位起拍价100万元?拍卖公司:系9个点位打包价

极目新闻
2024-11-24 15:13:29
墨西哥顶不住了!因担心失去美墨加贸易协议,移除中国产零部件

墨西哥顶不住了!因担心失去美墨加贸易协议,移除中国产零部件

看晓天下事
2024-11-24 14:13:30
探索性生活体位:适合你的最佳选择与技巧

探索性生活体位:适合你的最佳选择与技巧

智见派
2024-11-24 22:52:18
吴柳芳社媒因违反社区规定被禁止关注

吴柳芳社媒因违反社区规定被禁止关注

极目新闻
2024-11-24 21:08:22
太急人了!网传潮汕商家纷纷闭门,网友呼吁不要不听劝,赶紧开店

太急人了!网传潮汕商家纷纷闭门,网友呼吁不要不听劝,赶紧开店

火山诗话
2024-11-24 13:06:13
2024-11-25 03:35:00
javascript知识园
javascript知识园
javascript编程知识分享,JS加密、JS混淆等等。
197文章数 419关注度
往期回顾 全部

科技要闻

“这是中国的非凡机遇,德日远远落后了”

头条要闻

媒体:特朗普点将完毕 对华政策方面其团队群"鹰"荟萃

头条要闻

媒体:特朗普点将完毕 对华政策方面其团队群"鹰"荟萃

体育要闻

卡文迪什:公路自行车传奇谢幕

娱乐要闻

窦靖童演唱会:王菲助阵,谢霆锋助唱

财经要闻

特朗普任免对市场有何影响?券商研判

汽车要闻

尊界S800首张官图发布 双色车身"尊的"很亮

态度原创

房产
艺术
本地
时尚
公开课

房产要闻

丁村迎来大动作!首宗、百亩城更宅地挂出!楼面价2367元/㎡!

艺术要闻

故宫珍藏的墨迹《十七帖》,比拓本更精良,这才是地道的魏晋写法

本地新闻

云游中国 | 拒绝特种兵!北方也有“真江南”

43岁宋慧乔的状态,我的梦

公开课

一块玻璃,如何改变人类世界?

无障碍浏览 进入关怀版