使用 highlight.js 在网页中高亮显示java 代码【原】

最新推荐文章于 2023-10-12 17:51:51 发布

转载最新推荐文章于 2023-10-12 17:51:51 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whatlonelytear/p/7918486.html

文章标签：

#java #javascript #ViewUI

本文介绍如何利用jQuery结合highlight.js实现网页中Java代码的动态加载及语法高亮功能。通过JavaScript代码实现对远程Java代码文件的加载，并应用highlight.js进行实时语法高亮。

<html>
<head>
<meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
    <script>
    
    hljs.initHighlightingOnLoad();  <!-- 初始化高亮插件,但只能初始化一开始存在的元素  -->
    
    <!--  当数据变化后,动态高亮指定元素 -->
    function myHighlighting(targetId){
        $("#"+targetId).load("http://www.xxx.com/javaCode.java",{},function(response){//response即为www.xxx.com返回的java代码
            var code = hljs.highlightAuto(response).value;
            $("#"+targetId).html(code);
        });
    }
    </script> 
<title>高亮java代码</title>
</head>
<body>
    <!-- 这个class要指定java -->
    <pre><code class="java" id="PersonCode" onclick="myHighlighting('PersonCode')"></code></pre>
</body>
</html>