javascript实现代码高亮原理

落日映苍穹つ 2022-07-13 14:47 332阅读 0赞

转自：https://segmentfault.com/q/1010000003508615

网上有很多的代码高亮库，之前想自己写一个，但是想不出原理。我一开始的想法是把代码赋值给一个变量，然后使用indexOf确定下标，再加上span，再给span颜色。然而，并没有什么卵用……

  • 2015年08月29日提问
  • 1 评论
  • 邀请回答
  • 编辑
  • 更多

lg.php_bannerid_0_campaignid_0_zoneid_7_loc_https_3A_2F_2Fsegmentfault.com_2Fq_2F1010000003508615_referer_https_3A_2F_2Fwww.baidu.com_2Flink_3Furl_3DmthVKBvuqTJsGdak6CwsbUsGHFzjlKLUHzQLZPtMfbRKtup_s9Audy64fsN9xPIqOv0_yvLFUeQ6Cp3AEM1RxK_26wd_3D_26eqid_3Dc2f3a3710001f8fe00000006587848d3_cb_e50d664494

lg.php_bannerid_0_campaignid_0_zoneid_8_loc_https_3A_2F_2Fsegmentfault.com_2Fq_2F1010000003508615_referer_https_3A_2F_2Fwww.baidu.com_2Flink_3Furl_3DmthVKBvuqTJsGdak6CwsbUsGHFzjlKLUHzQLZPtMfbRKtup_s9Audy64fsN9xPIqOv0_yvLFUeQ6Cp3AEM1RxK_26wd_3D_26eqid_3Dc2f3a3710001f8fe00000006587848d3_cb_91f587bdd9

默认排序 时间排序

4个回答

答案对人有帮助，有参考价值2答案没帮助，是错误的答案，答非所问

已采纳

  1. keyword + 正则
    下面这个两个例子, 一看就明白了.
    https://github.com/andris9/highlight/blob/master/lib/vendor/highlight.js/languages/javascript.js
    https://github.com/isagalaev/highlight.js/blob/master/src/languages/javascript.js

  2. 静态语法分析
    这个一般是IDE在用, 相对来说更准确. 是完全在语义上对代码进行分析.
    例子:
    Pysonar2
    https://github.com/yinwang0/pysonar2

    • 2015年08月29日回答 · 2015年08月29日更新
    • 2 评论
    • 编辑

user-64.png

fidllrldf 996 声望

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

1)怎么高亮，用你的方法就可以高亮，无非就是HTML＋CSS搞定2)难点在于确定哪些字符文本需要高亮，不同的语言语法不相同，关键字不同就需要不同的处理了

  • 2015年08月29日回答
  • 评论
  • 编辑

1518375183-54f135ef0d731_big64

kikong 16k 声望

答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问

基本原理都是 正则匹配指定字符串，然后将其用span等元素包裹，给span定义一些特殊的样式。

  • 2015年08月29日回答
  • 评论
  • 编辑

1223726753-5743100727686_big64

王铁手

3.8k 声望

发表评论

表情：
评论列表 （有 0 条评论，332人围观）

还没有评论，来说两句吧...

相关阅读