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

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

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 年 2 月 23 日

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

SourceMan

2017 年 2 月 23 日

2333 ，这个 commit 都变成彩虹了

sox

2017 年 2 月 23 日

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

sox

2017 年 2 月 23 日

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

loading

2017 年 2 月 23 日 via Android

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

corona

2017 年 2 月 23 日

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

songjiaxin2008

2017 年 2 月 23 日 via Android

哈哈哈会玩

sox

2017 年 2 月 23 日

简单实现 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 年 2 月 23 日

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

sox

2017 年 2 月 23 日

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

21grams

2017 年 2 月 23 日

这是重新定义了代码高亮

sox

2017 年 2 月 23 日

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

CosmoX

2017 年 2 月 24 日

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

sox

2017 年 2 月 24 日 via Android

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

sox

2017 年 2 月 24 日 via Android

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

StarBrilliant

2017 年 2 月 24 日 via Android

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

murmur

2017 年 2 月 24 日

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

sox

2017 年 2 月 24 日 via Android

@murmur 这是什么梗 😂

murmur

2017 年 2 月 24 日

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

ThinkCat

2017 年 2 月 24 日

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

sox

2017 年 2 月 24 日 via Android

@ThinkCat 代码在那……

malcolmyu

2017 年 2 月 25 日

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

sox

2017 年 2 月 25 日 via Android

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

malcolmyu

2017 年 2 月 25 日

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

malcolmyu

2017 年 2 月 25 日

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

xvx

2017 年 2 月 27 日 via iPhone

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

sox

2017 年 2 月 27 日

@xvx 上面截图不是有吗

vilicvane

2017 年 2 月 27 日

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

sox

2017 年 2 月 28 日

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

AsisA

2017 年 3 月 1 日 via iPhone

乍一看还挺好看的 233