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

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-14 16:23:09
杨紫“带套试戏”后续:已取证,男方被爆承认,牵连多位女星

杨紫“带套试戏”后续:已取证,男方被爆承认,牵连多位女星

阿凫爱吐槽
2024-11-14 16:57:31
金融战打响!A股、港股大跳水,狂飙的美元可能带崩全球股市

金融战打响!A股、港股大跳水,狂飙的美元可能带崩全球股市

看财经show
2024-11-14 17:20:07
72岁的毛主席和江青的一张合影,毛主席依旧腰板挺直头发乌黑

72岁的毛主席和江青的一张合影,毛主席依旧腰板挺直头发乌黑

大江
2024-11-14 13:50:54
中朝边境鸭绿江口现状:朝鲜领土正在不断增加,中方却在逐渐减少

中朝边境鸭绿江口现状:朝鲜领土正在不断增加,中方却在逐渐减少

由史
2024-11-13 14:49:31
星光大道如今收视率暴跌,央视迫于压力请他出山,百姓大呼叫好!

星光大道如今收视率暴跌,央视迫于压力请他出山,百姓大呼叫好!

华人星光
2024-11-14 13:30:02
真探丨广州15岁中学生获评正高级职称?当地人社局工作人员:可能性几乎没有

真探丨广州15岁中学生获评正高级职称?当地人社局工作人员:可能性几乎没有

红星新闻
2024-11-14 16:27:23
特朗普犹豫新闻秘书人选,两位佳丽在竞争,27岁助理更受总统青睐

特朗普犹豫新闻秘书人选,两位佳丽在竞争,27岁助理更受总统青睐

译言
2024-11-14 11:24:51
雷军回应睡车间摆拍:确实是摆拍 为了逗大家开心

雷军回应睡车间摆拍:确实是摆拍 为了逗大家开心

手机中国
2024-11-14 17:20:10
观网快评:特朗普对华鹰派“梦之队”?警惕有人祸水东引

观网快评:特朗普对华鹰派“梦之队”?警惕有人祸水东引

观察者网
2024-11-14 20:11:17
看珠海航展称“我们中国强”被台防务部门批评,台前海军舰长回应:这是事实

看珠海航展称“我们中国强”被台防务部门批评,台前海军舰长回应:这是事实

环球网资讯
2024-11-14 16:38:14
卖导弹的小女孩又来航展叫卖,一颗也没卖出去:幸好珠海不太冷

卖导弹的小女孩又来航展叫卖,一颗也没卖出去:幸好珠海不太冷

大风文字
2024-11-14 15:53:04
拜登和特朗普在白宫会面2小时,他们谈了什么?

拜登和特朗普在白宫会面2小时,他们谈了什么?

第一财经资讯
2024-11-14 17:02:22
惊爆!取消中法289架空客订单的连锁反应!

惊爆!取消中法289架空客订单的连锁反应!

星辰故事屋
2024-11-14 19:40:36
耗资20多亿的古城日均卖票不足20张!省委书记现场步行察看

耗资20多亿的古城日均卖票不足20张!省委书记现场步行察看

政知新媒体
2024-11-14 07:09:13
李子柒3小时7000万播放量!这才是世界级网红!她的视频没有平替

李子柒3小时7000万播放量!这才是世界级网红!她的视频没有平替

蜉蝣说
2024-11-13 15:45:00
0-7真的很伤!国足即使小赢了巴林仍将第4,净胜球仍大幅落后澳沙

0-7真的很伤!国足即使小赢了巴林仍将第4,净胜球仍大幅落后澳沙

直播吧
2024-11-14 19:28:24
0-0,亚洲第8逼平澳大利亚,国足渔翁得利:争小组第二有戏了

0-0,亚洲第8逼平澳大利亚,国足渔翁得利:争小组第二有戏了

侧身凌空斩
2024-11-14 19:09:08
又轰下46+10+3,他这样打下去,布伦森的大当家不保了

又轰下46+10+3,他这样打下去,布伦森的大当家不保了

篮球大视野
2024-11-14 17:09:45
取消节假日高速免费,改为每年5000km免费里程?交通部的答复来了

取消节假日高速免费,改为每年5000km免费里程?交通部的答复来了

猫小狸同学
2024-11-14 16:25:03
2024-11-14 22:10:44
javascript知识园
javascript知识园
javascript编程知识分享,JS加密、JS混淆等等。
197文章数 419关注度
往期回顾 全部

科技要闻

官宣!极氪领克合并,吉利走向大整合

头条要闻

专家:迎来第二任期 特朗普在外交上或有"干大事"冲动

头条要闻

专家:迎来第二任期 特朗普在外交上或有"干大事"冲动

体育要闻

本季英超最炸裂的瓜,由一名裁判制造

娱乐要闻

娜扎张云龙恋情曝光!甜蜜细节被扒

财经要闻

"机构举报游资"导致A股大跌?

汽车要闻

七块屏幕四座布局 仰望U7中式百万座舱

态度原创

本地
手机
游戏
旅游
亲子

本地新闻

重庆记忆|别再CityWalk了 来云端之眼CityClimb

手机要闻

传音itel S25系列手机发布 配备紫光展锐处理器和后置50MP主摄

不得了!逆水寒玩家把boss压箱底衣服给扒了,美得让神仙都嫉妒

旅游要闻

山西公布2024年全省乡村旅游重点村镇名单

亲子要闻

“米其林轮胎宝宝 胖乎乎的太吸睛”,小萌娃5个月30斤 7个月38斤,宝妈:体检正常 单纯吸收好 纯母乳喂养 现在长大了 瘦了

无障碍浏览 进入关怀版