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

sox · 2017-02-23T10:16:42Z

Repo: https://github.com/egoist/hanabi 在线 demo: https://egoistian.com/hanabi/

高亮库

bytes

preview

repo

30 replies • 2017-03-01 18:40:02 +08:00

1

peesefoo

Feb 23, 2017

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

2

SourceMan

Feb 23, 2017

2333 ，这个 commit 都变成彩虹了

3

sox

OP

Feb 23, 2017

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

4

sox

OP

Feb 23, 2017

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

5

loading

Feb 23, 2017 via Android

2

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

6

corona

Feb 23, 2017

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

7

songjiaxin2008

Feb 23, 2017 via Android

哈哈哈会玩

8

sox

OP

Feb 23, 2017

简单实现 line number XD:

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

9

zythum

Feb 23, 2017

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

10

sox

OP

Feb 23, 2017

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

11

21grams

Feb 23, 2017

这是重新定义了代码高亮

12

sox

OP

Feb 23, 2017

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

13

CosmoX

Feb 24, 2017

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

14

sox

OP

Feb 24, 2017 via Android

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

15

sox

OP

Feb 24, 2017 via Android

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

16

StarBrilliant

Feb 24, 2017 via Android

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

17

murmur

Feb 24, 2017

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

18

sox

OP

Feb 24, 2017 via Android

@murmur 这是什么梗 😂

19

murmur

Feb 24, 2017

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

20

ThinkCat

Feb 24, 2017

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

21

sox

OP

Feb 24, 2017 via Android

@ThinkCat 代码在那……

22

malcolmyu

Feb 25, 2017

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

23

sox

OP

Feb 25, 2017 via Android

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

24

malcolmyu

Feb 25, 2017

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

25

malcolmyu

Feb 25, 2017

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

26

xvx

Feb 27, 2017 via iPhone

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

27

sox

OP

Feb 27, 2017

@xvx 上面截图不是有吗

28

vilicvane

Feb 27, 2017

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

29

sox

OP

Feb 28, 2017

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

30

AsisA

Mar 1, 2017 via iPhone

乍一看还挺好看的 233