开发者社区> 问答> 正文

SyntaxHighlighter异步着色问题,有了解的兄弟们帮忙解决下啊

今天在研究SyntaxHighlighter的着色,感觉效果挺不错,但在和kindEditor整合时,总不是我要的效果,最后检查发现SyntaxHighlighter貌似没有异步着色的效果,即:页面渲染完成后,通过点击按钮去给页面div设置要着色的内容。。。我发现这样并不能让里面代码着色了,有了解的兄弟麻烦帮忙啊,谢谢了,以下是代码内容

Html代码 收藏代码

<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Hello SyntaxHighlighter</title>  
    <script type="text/javascript" src="scripts/shCore.js"></script>  
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>  
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>  
    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>  
    <script type="text/javascript">  
    SyntaxHighlighter.all();   
    function click() {  
        var d=document.getElementById('testContent');  
        var html=[];  
        html.push('<pre class="brush: js;toolbar:false;">');  
        html.push('function helloSyntaxHighlighter()\n');  
        html.push('{\n  return "hi!";\n}');  
        html.push('</pre>');  
        d.innerHTML=html.join('');  
    }  
    </script>  
</head>  
  
<body style="background: white; font-family: Helvetica">  
  
<a target="_blank" href="http://alexgorbatchev.com/SyntaxHighlighter/">超链接</a>  
  
<h3>这里是JS演示代码: 由JS异步设置代码内容</h3>  
<button onclick="click()">转换</button>  
<div id="testContent">  
</div>  
</html>

展开
收起
长安归故里. 2020-01-08 16:19:17 825 0
1 条回答
写回答
取消 提交回答
  • 应该这样,使用SyntaxHighlighter.highlight();

    Java代码 收藏代码

    <script type="text/javascript">  
      
      
    function syntaxHighlighter() {  
        var d=document.getElementById('testContent');  
         var html=[];    
           html.push('<pre class="brush: js;toolbar:false;">');    
           html.push('function helloSyntaxHighlighter()\n');    
           html.push('{\n  return "hi!";\n}');    
           html.push('</pre>');    
           d.innerHTML=html.join('');    
        SyntaxHighlighter.highlight();  
      
      
    }  
    </script>
    
    

    why??? all的实现 它是绑定到window.onload 所以 Java代码 收藏代码

    /** 
     * Main entry point for the SyntaxHighlighter. 
     * @param {Object} params Optional params to apply to all highlighted elements. 
     */  
    all: function(params)  
    {  
        attachEvent(  
            window,  
            'load',  
            function() { sh.highlight(params); }  
        );  
    }
    
    2020-01-08 16:19:43
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载