js实现代码高亮显示

最新推荐文章于 2024-05-14 18:25:01 发布

Chris__Wang

最新推荐文章于 2024-05-14 18:25:01 发布

阅读量5.3k

点赞数 1

分类专栏：个人总结文章标签：代码高亮highlight 页面显示成代码样式仿代码编辑器

本文链接：https://blog.csdn.net/Chris__wang/article/details/85159364

版权

个人总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

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

先上效果图

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

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

 <link rel="stylesheet" href="./monokai-sublime.css">
 <script src="./highlight.js"></script>

然后书写html代码

<body>
    <pre>
        <code class="css">
           .common{
                width:100px;
                height:100px;
                background-color:red;
           }
        </code>
    </pre>
    <pre>
        <code class="java">
            @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<PrivilegeDTO> privilegeDTOList = new ArrayList<>();
            }
        </code>
    </pre>
    <pre >
        <code class="javascript">
            var a = 123;
            function fn(){
                a = 456;
            }
        </code>
    </pre>
</body>

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

最后是插件初始化部分

<script>
    hljs.initHighlightingOnLoad();
</script>

就是这么简单。

其中初始化方法有

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

initHighlighting()
在页面的<pre><code>..</code></pre>区域上应用高亮

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

【右上角点个赞，谢谢】

Chris__Wang

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现代码高亮显示

项目需要实现java代码高亮，像编辑器那种，就好比CSDN这种，网上搜了好多插件，最终选择了highlight.js。先上效果图可以在网上下载highlight.js插件，或者去官网下载，样式文件也会一起下载下来，或者npm install highlight首先引入js文件和样式文件，样式文件有很多，这里我选的是sublime样式。 &lt;link rel="styles...
复制链接

扫一扫