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

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.

/阅读下一篇/

免费JS加密网站

返回网易首页 下载网易新闻客户端
相关推荐
热点推荐
再次拜服于中文翻译的魅力!

再次拜服于中文翻译的魅力!

观察鉴娱
2025-01-16 10:52:27
小米 YU7 大掀背尾门,雷军就拿这跟 Model Y 比?

小米 YU7 大掀背尾门,雷军就拿这跟 Model Y 比?

数字尾巴
2025-01-22 00:12:13
注意!周六周日正常上班!

注意!周六周日正常上班!

鲁中晨报
2025-01-22 09:51:04
42个城市2024年GDP出炉:宁波超天津、呼和浩特破4000亿

42个城市2024年GDP出炉:宁波超天津、呼和浩特破4000亿

爱看剧的阿峰
2025-01-22 16:22:29
越南用行动向世人展现了反腐败的决心

越南用行动向世人展现了反腐败的决心

华人星光
2025-01-21 16:18:58
阿娇的瓜又炸了,聊天记录曝光,颠覆想象

阿娇的瓜又炸了,聊天记录曝光,颠覆想象

听风听你
2024-12-25 22:41:20
情况有变!尹锡悦刚露面,两小时后就被送进医院,公调处中计了?

情况有变!尹锡悦刚露面,两小时后就被送进医院,公调处中计了?

苗苗情感说
2025-01-22 08:07:35
复旦研究发现:如果糖尿病患者每天吃2顿饭,效果堪比药物作用?

复旦研究发现:如果糖尿病患者每天吃2顿饭,效果堪比药物作用?

荷兰豆爱健康
2025-01-22 17:13:42
国家一级演员,当了院长比西门庆玩的还花,潜规则女演员、画家

国家一级演员,当了院长比西门庆玩的还花,潜规则女演员、画家

叙说
2023-10-01 10:00:03
整容脸又来祸害央视剧?青蛙眼、锥子脸、三角鼻,别辣观众眼睛了

整容脸又来祸害央视剧?青蛙眼、锥子脸、三角鼻,别辣观众眼睛了

书雁飞史oh
2025-01-22 20:30:03
对美反击号角吹响!16架C919全面投入春运,波音这下彻底歇菜了!

对美反击号角吹响!16架C919全面投入春运,波音这下彻底歇菜了!

凯撒谈兵
2025-01-20 11:42:20
郭艾伦空砍40+4+5+5黯然退场,麦考尔比他优秀,但辽篮绝对不后悔

郭艾伦空砍40+4+5+5黯然退场,麦考尔比他优秀,但辽篮绝对不后悔

君马体育
2025-01-22 23:29:22
34岁森林北豪宅内做伸展运动,穿真丝睡袍身材迷人,汪峰好眼光!

34岁森林北豪宅内做伸展运动,穿真丝睡袍身材迷人,汪峰好眼光!

南城无双
2025-01-07 23:53:44
官方曝光“加绒裤”内幕!长期穿竟会引发剧毒?大家注意避开

官方曝光“加绒裤”内幕!长期穿竟会引发剧毒?大家注意避开

小熊侃史
2025-01-22 07:10:08
或被判死刑!82岁老拜登收拾行李离开白宫,尹锡悦最后的希望破灭

或被判死刑!82岁老拜登收拾行李离开白宫,尹锡悦最后的希望破灭

扬子的故事屋
2025-01-22 22:54:19
iOS微信更新,运营商要成最大输家?彻底沦为流量管道

iOS微信更新,运营商要成最大输家?彻底沦为流量管道

互联网.乱侃秀
2025-01-21 15:47:44
海军的谜之操作:放着万吨大驱055不造,为何让052D频繁下饺子?

海军的谜之操作:放着万吨大驱055不造,为何让052D频繁下饺子?

风华讲史
2024-12-15 11:29:12
标王不水!小蜘蛛此前7场1球被喷水货,现成队内射手王&近4场4球

标王不水!小蜘蛛此前7场1球被喷水货,现成队内射手王&近4场4球

直播吧
2025-01-22 09:39:05
回顾:95年百事可乐懵了,承诺700万分可换战机,一学生竟来真的

回顾:95年百事可乐懵了,承诺700万分可换战机,一学生竟来真的

白云故事
2025-01-16 10:40:03
一切以实战出发,吸收俄乌冲突经验,解放军装甲车大量“加棚”

一切以实战出发,吸收俄乌冲突经验,解放军装甲车大量“加棚”

三叔的装备空间
2025-01-18 19:22:50
2025-01-23 00:36:49
javascript知识园
javascript知识园
javascript编程知识分享,JS加密、JS混淆等等。
199文章数 419关注度
往期回顾 全部

科技要闻

5000亿"星际之门"?马斯克泼冷水:他们没钱

头条要闻

特朗普称若金砖国家想摆脱美元将收100%关税 中方回应

体育要闻

韩国的新规,柯洁的习惯,中国的申诉

娱乐要闻

朱亚文晒婚戒霸气回应婚变,好真实

财经要闻

陈欣:特朗普家族热衷发加密货币背后

汽车要闻

10万元级无图智驾 悦也PLUS全路况实测

态度原创

数码
艺术
本地
公开课
军事航空

数码要闻

网购电脑“货不对板”判退一赔三,央视曝光商家虚假宣传案件

艺术要闻

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

本地新闻

全球迎新 | 2025蛇年春节

公开课

李玫瑾:为什么性格比能力更重要?

军事要闻

废墟之下 加沙正在寻找万名失踪者