高亮做法1:有模板情况(代码是动态生成的)
<div class="article" id="article">
</div>
<script src="../assets/vendors/art-template/template-web.js"></script>
<!-- 文章详情模板 -->
<script type="text/html" id="postTpl">
<h2 class="title">
<a href="javascript:;">{{title}}</a>
</h2>
<pre>
<code class="html">
{{content}}
</code>
</pre>
</script>
<link rel="stylesheet" href="assets/lib/highlight/styles/monokai-sublime.css">
<script src="assets/lib/highlight/highlight.pack.js"></script>
<script type="text/javascript">
window.onload = function () {
// 从地址栏中获取文章id
var postId = getUrlParams('id');
// 向服务器端发送请求 根据文章id获取文章详细信息
$.ajax({
type: 'get',
url: '/posts/' + postId,
success: function (response) {
// 异步请求拿到的数据
var html = template('postTpl', response);
// 将模板数据显示到article上
$('#article').html(html)
// 显示完数据,再执行 高亮代码的方法
highlightCodeFunc();
}
})
}
function highlightCodeFunc() {
console.log("aaaaaaaaaaaaaaa");
$('pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
}
</script>
高亮做法2:没有模板情况
<div class="article" id="article">
<pre>
<code class="html">
<div class="topBackgound_box">
<div class="tprorange" tapmode onclick="onPerfectInfo()">
<span id="tprorangeTip">资料待完善</span><span class="iconfont icon-fanhui"></span>
</div>
<img id="avatar" src="" style="width:65px;height:65px;border-radius:50%;">
<div id="nick_name" style="margin:10px;margin-bottom: 2px;"></div>
<div id="perfectInfoTip" style="font-size: 12px;">完善资料并审核通过后可体验完整招聘功能</div>
<div class="btnBox">
<span tapmode onclick="onErBtn()" >分享赚取经营佣金</span>
<span tapmode onclick="onShareBtn()">查看我的分享人员</span>
</div>
</div>
</code>
</pre>
</div>
<link rel="stylesheet" href="assets/lib/highlight/styles/monokai-sublime.css">
<script src="assets/lib/highlight/highlight.pack.js"></script>
<script type="text/javascript">
var $code = document.getElementsByClassName("html");
for (var i = 0; i < $code.length; i++) {
var element = $code[i];
element.innerText = element.innerHTML;
}
</script>
<script>
hljs.initHighlightingOnLoad();
</script>
网友评论