最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】js中如何把输出的json代码高亮显示

JSON crifan 318浏览 0评论
折腾:
【已解决】本地搭建前端Web页面实现机器人问答的产品演示
期间,虽然输出了被格式化后的json字符串,但是不够美观。
想到看看是否可以去高亮显示。
然后再想办法去代码高亮:
jquery bootstrap pre highlight
highlight.js | BootCDN – Bootstrap 中文网开源项目免费 CDN 加速服务
Bootstrap Text/Typography
highlight.js
isagalaev/highlight.js: Javascript syntax highlighter
Getting highlight.js
下载下来
放到项目中,去使用
然后默认的效果不够好:
所以去找找其他theme主题的效果
找到了官网点击style后,可以切换不同效果,找到这个还可以:
atom-one-dark
language: json
style: monokai-sublime
分别效果是:
【总结】
此处,是用
highlight.js
去高亮json代码。
做法:
下载:
https://highlightjs.org/download/
到:
一个highlight.js
很多个style/theme的css,包括default.css和其他的
然后放到项目中:
加到代码中:
html中:
  <!-- <link rel="stylesheet" href="css/highlightjs_default.css"> -->
  <link rel="stylesheet" href="css/highlight_atom-one-dark.css">
  <!-- <link rel="stylesheet" href="css/highlight_monokai-sublime.css"> -->
  <link rel="stylesheet" href="css/main.css">
</head>

<div id="response" class="bg-light box-shadow mx-auto">
    <p id="responseText">here will output response</p>
</div>

    <script src="js/bootstrap.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
static/js/main.js
$(document).ready(function(){

    // when got response json, update to highlight it
    function updateHighlight() {
        console.log("updateHighlight");

        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }

    $("#submitInput").click(function(event){
        event.preventDefault();

        ajaxSubmitInput();
    });
    
    function ajaxSubmitInput() {
        console.log("ajaxSubmitInput");

        var inputRequest = $("#inputRequest").val();
        console.log("inputRequest=%s", inputRequest);
        var encodedInputRequest = encodeURIComponent(inputRequest)
        console.log("encodedInputRequest=%s", encodedInputRequest);

        var qaUrl = "http://xxx:32851/qa";
        console.log("qaUrl=%s", qaUrl);
        var fullQaUrl = qaUrl + "?input=" + encodedInputRequest
        console.log("fullQaUrl=%s", fullQaUrl);

        $.ajax({
           type : "GET",
           url : fullQaUrl,
           success: function(respJsonObj){
                console.log("respJsonObj=%o", respJsonObj);

                // var respnJsonStr = JSON.stringify(respJsonObj);
                //var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, '\t');
                var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, 2);
                console.log("beautifiedJespnJsonStr=%s", beautifiedJespnJsonStr);

                var prevOutputValue = $('#responseText').text();
                console.log("prevOutputValue=%o", prevOutputValue);
                // $('#output').empty();
                var afterOutputValue = $('#responseText').html('<pre><code class="json">' + beautifiedJespnJsonStr + "</code></pre>");
                console.log("afterOutputValue=%o", afterOutputValue);

                updateHighlight();
           },
           error : function(err) {
              $("#output").html("<strong>Error</strong>");
              console.log("GET: ", qaUrl, " ERROR: ", err);
           }
        });
    }

    });
});
js中的逻辑是:
点击提交按钮后,调用api接口,返回json对象,转化成带缩进的json字符串,放到p元素中去,前后加上:
<prev><code> your json string </code></pre>
且注意调用了:updateHighlight
否则由于json是后来加载的,不会被高亮的。
效果:

转载请注明:在路上 » 【已解决】js中如何把输出的json代码高亮显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.105 seconds, using 20.58MB memory