美文网首页
博客网站 highlight.js高亮代码的做法(模板渲染、非模

博客网站 highlight.js高亮代码的做法(模板渲染、非模

作者: CoderZb | 来源:发表于2019-12-24 09:12 被阅读0次

高亮做法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>

相关文章

网友评论

      本文标题:博客网站 highlight.js高亮代码的做法(模板渲染、非模

      本文链接:https://www.haomeiwen.com/subject/dxjxoctx.html