javascript实现代码高亮原理 落日映苍穹つ 2022-07-13 14:47 185阅读 0赞 转自:https://segmentfault.com/q/1010000003508615 网上有很多的代码高亮库,之前想自己写一个,但是想不出原理。我一开始的想法是把代码赋值给一个变量,然后使用indexOf确定下标,再加上span,再给span颜色。然而,并没有什么卵用…… * [2015年08月29日提问][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][] [默认排序][Link 1] [时间排序][Link 2] ## 4个回答 ## 答案对人有帮助,有参考价值2答案没帮助,是错误的答案,答非所问 已采纳 1. keyword + 正则 下面这个两个例子, 一看就明白了. [https://github.com/andris9/highlight/blob/master/lib/vendor/highlight.js/languages/javascript.js][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][https_github.com_isagalaev_highlight.js_blob_master_src_languages_javascript.js] 2. 静态语法分析 这个一般是IDE在用, 相对来说更准确. 是完全在语义上对代码进行分析. 例子: Pysonar2 [https://github.com/yinwang0/pysonar2][https_github.com_yinwang0_pysonar2] * [2015年08月29日回答][2015_08_29 1] · [2015年08月29日更新][2015_08_29 2] * 2 评论 * 编辑 [![user-64.png][]][user-64.png 1] [fidllrldf][user-64.png 1] 996 声望 答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问 1)怎么高亮,用你的方法就可以高亮,无非就是HTML+CSS搞定2)难点在于确定哪些字符文本需要高亮,不同的语言语法不相同,关键字不同就需要不同的处理了 * [2015年08月29日回答][2015_08_29 3] * 评论 * 编辑 [![1518375183-54f135ef0d731_big64][]][1518375183-54f135ef0d731_big64 1] [kikong][1518375183-54f135ef0d731_big64 1] 16k 声望 答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问 基本原理都是 正则匹配指定字符串,然后将其用span等元素包裹,给span定义一些特殊的样式。 * [2015年08月29日回答][2015_08_29 4] * 评论 * 编辑 [![1223726753-5743100727686_big64][]][1223726753-5743100727686_big64 1] [王铁手][1223726753-5743100727686_big64 1] 3.8k 声望 [2015_08_29]: https://segmentfault.com/q/1010000003508615 [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]: /images/20220713/aea0424c78e4465fb52eb3745f85ed6d.png [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]: /images/20220713/27fb9dc1620347b6aa31fb4e0e547e79.png [Link 1]: https://segmentfault.com/q/1010000003508615#answers-title [Link 2]: https://segmentfault.com/q/1010000003508615?sort=created#answers-title [https_github.com_andris9_highlight_blob_master_lib_vendor_highlight.js_languages_javascript.js]: 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]: https://github.com/isagalaev/highlight.js/blob/master/src/languages/javascript.js [https_github.com_yinwang0_pysonar2]: https://github.com/yinwang0/pysonar2 [2015_08_29 1]: https://segmentfault.com/q/1010000003508615/a-1020000003508716 [2015_08_29 2]: https://segmentfault.com/q/1010000003508615/a-1020000003508716/revision [user-64.png]: https://sf-static.b0.upaiyun.com/v-58760b54/global/img/user-64.png [user-64.png 1]: https://segmentfault.com/u/fidllrldf [2015_08_29 3]: https://segmentfault.com/q/1010000003508615/a-1020000003509487 [1518375183-54f135ef0d731_big64]: https://sfault-avatar.b0.upaiyun.com/151/837/1518375183-54f135ef0d731_big64 [1518375183-54f135ef0d731_big64 1]: https://segmentfault.com/u/akong [2015_08_29 4]: https://segmentfault.com/q/1010000003508615/a-1020000003510067 [1223726753-5743100727686_big64]: https://sfault-avatar.b0.upaiyun.com/122/372/1223726753-5743100727686_big64 [1223726753-5743100727686_big64 1]: https://segmentfault.com/u/wtser
还没有评论,来说两句吧...