折腾：
期间，虽然输出了被格式化后的json字符串，但是不够美观。
想到看看是否可以去高亮显示。
然后再想办法去代码高亮：
jquery bootstrap pre highlight
下载下来
放到项目中，去使用
然后默认的效果不够好：
所以去找找其他theme主题的效果
找到了官网点击style后，可以切换不同效果，找到这个还可以：
atom-one-dark
language: json
style: monokai-sublime
分别效果是：
【总结】
此处，是用
去高亮json代码。
做法：
下载：
到：
一个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代码高亮显示