美文网首页
博客网站 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