我写了一个代码高亮库，只有 700 bytes 大

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2868 天前的主题，其中的信息可能已经有所发展或是发生改变。

Repo: https://github.com/egoist/hanabi

在线 demo: https://egoistian.com/hanabi/

preview

高亮库

bytes

preview

repo

30 条回复 • 2017-03-01 18:40:02 +08:00

peesefoo

2017-02-23 18:18:01 +08:00

感觉配色有点乱，花花绿绿的

SourceMan

2017-02-23 18:20:07 +08:00

2333 ，这个 commit 都变成彩虹了

sox

2017-02-23 18:22:59 +08:00

只有一个正则表达式你们还期待什么 😂

sox

2017-02-23 18:26:19 +08:00

分享给各位大佬最初版本长啥样

loading

2017-02-23 18:28:01 +08:00 via Android

很好，反正外行也就看个颜色。

corona

2017-02-23 20:27:27 +08:00

不错，就是颜色有点乱，可以考虑做几个主题看看

songjiaxin2008

2017-02-23 20:47:39 +08:00 via Android

哈哈哈会玩

sox

2017-02-23 20:57:37 +08:00

简单实现 line number XD:

let lineNumber = 0
let out = hanabi(code)
.replace(/^/gm, m => {
return `<span style="width: 30px; display: inline-block">${++lineNumber}</span>`
})

zythum

2017-02-23 21:09:36 +08:00

一个单词一个颜色.... 这代码高亮的思路也是醉了...

sox

2017-02-23 21:20:30 +08:00

@zythum 其实只是想试试只用一个 regexp 能高亮到什么程度 233

21grams

2017-02-23 21:20:38 +08:00

这是重新定义了代码高亮

sox

2017-02-23 21:21:11 +08:00

而且最开始不是要高亮只是想搞个 rainbow 效果 XD

CosmoX

2017-02-24 06:15:26 +08:00

哈哈真有意思~ 不介意的话，可以 fork 过去修改 syntax highlight 看看效果。。。
https://github.com/hackjutsu/Lepton

sox

2017-02-24 07:51:07 +08:00 via Android

@CosmoX MIT 有什么介不介意的 😂

sox

2017-02-24 07:52:51 +08:00 via Android

@CosmoX 哦你是叫我 fork 这个吧 😂 高亮就这效果了在哪都一样 😅

StarBrilliant

2017-02-24 08:42:24 +08:00 via Android

哇！好漂亮，真的跟花火大会一样！（偷笑）

murmur

2017-02-24 09:24:53 +08:00

提个 feature ， java 的所有关键字都使用大 2 号字体显示， php 的 $比 java 关键字还要大 2 号，还要带金色描边

sox

2017-02-24 09:30:28 +08:00 via Android

@murmur 这是什么梗 😂

murmur

2017-02-24 09:31:50 +08:00

@sox java 是信仰， php 是世界上最好的语言，当然要与众不同

ThinkCat

2017-02-24 09:47:29 +08:00

楼主，你确定不是给每一个字符加了颜色吗 lol

sox

2017-02-24 09:52:11 +08:00 via Android

@ThinkCat 代码在那……

malcolmyu

2017-02-25 00:56:50 +08:00

不解析语法树，高亮肯定不靠谱啊。。

sox

2017-02-25 02:48:23 +08:00 via Android

@malcolmyu 谁会用 700byte 实现一个 ast ……

malcolmyu

2017-02-25 11:33:07 +08:00

@sox #23 考验大佬实力的时候到了🌚

malcolmyu

2017-02-25 11:38:14 +08:00

@sox #23 卧槽，原来是 eme 的作者！向 dalao 低头

xvx

2017-02-27 12:53:43 +08:00 via iPhone

为何不一个字符随机一种颜色，效果会更炫目……

sox

2017-02-27 15:07:40 +08:00

@xvx 上面截图不是有吗

vilic

2017-02-27 16:44:22 +08:00

@sox 想到了之前写过的一个高亮, 也是一个语言一个正则 https://vilic.github.io/vejis/script/vlight.js
效果可见 https://vilic.github.io/vejis/

sox

2017-02-28 00:14:39 +08:00

@vilic 这个不是一个语言 😂 所有语言都一个效果

AsisA

2017-03-01 18:40:02 +08:00 via iPhone

乍一看还挺好看的 233