js实现代码高亮显示

项目需要实现java代码高亮，像编辑器那种，就好比CSDN这种，网上搜了好多插件，最终选择了highlight.js。

先上效果图

可以在网上下载highlight.js插件，或者去官网下载，样式文件也会一起下载下来，或者npm install highlight

首先引入js文件和样式文件，样式文件有很多，这里我选的是sublime样式。

然后书写html代码

    
        
           .common{
                width:100px;
                height:100px;
                background-color:red;
           }
        
    
    
        
            @RequestMapping(value = "/menuPrivilege", method = RequestMethod.GET)
            public void menuPrivilege(@RequestParam(required = false) String code,@RequestParam(required = false) String url) {
                PrivilegeDTO privilegeDTO = new PrivilegeDTO();
                if(Strings.isNullOrEmpty(code)){
                    privilegeDTO.code = "envParas";
                    privilegeDTO.name = "环境参数管理";
                    privilegeDTO.urlPath = "/envparams/index";
                }
                String basicServer = env.getProperty("basic.server");
                String menuPath = env.getProperty("basic.upmenu");
                new StringBuilder().append(basicServer).append(menuPath).toString();//
                List privilegeDTOList = new ArrayList<>();
            }
        
    
    
        
            var a = 123;
            function fn(){
                a = 456;
            }
        
    

这里需要用到pre标签和code标签，对于用别的标签有没有别的写法我也没去具体探究，不过这种写法必须用pre和code标签。

最后是插件初始化部分

就是这么简单。

其中初始化方法有

highlightBlock(block)
应用高亮到一个包含代码的DOM节点上

initHighlighting()
在页面的

..

区域上应用高亮

initHighlightingOnLoad()
绑定高亮到页面加载事件上

【右上角点个赞，谢谢】