-
SyntaxHighlighter异步着色问题,有了解的兄弟们帮忙解决下啊5
今天在研究SyntaxHighlighter的着色,感觉效果挺不错,但在和kindEditor整合时,总不是我要的效果,最后检查发现SyntaxHighlighter貌似没有异步着色的效果,即:页面渲染完成后,通过点击按钮去给页面div设置要着色的内容。。。我发现这样并不能让里面代码着色了,有了解的兄弟麻烦帮忙啊,谢谢了,以下是代码内容
<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>
2013年4月19日 17:33
1个答案 按时间排序 按投票排序
-
采纳的答案
应该这样,使用SyntaxHighlighter.highlight();
<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 所以/** * 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); } ); }
2013年4月19日 18:21
相关推荐
SyntaxHighlighter是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:...
1. **语法着色**:SyntaxHighlighter的核心功能是对代码进行语法高亮,使得不同类型的元素(如关键词、变量、字符串等)使用不同的颜色或样式展示,使代码更易于阅读和理解。 2. **HTML预格式化**:该库自动处理...
对于一些程序代码类的网页,常常需要贴出代码,但显示效果...这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具,它不需要与服务器交互,只需要包含相应的格式代码JS包,就可以轻松实现代码高亮,使用非常简单。
【JS代码高亮插件SyntaxHighlighter】是一个用于在网页中展示编程代码的工具,它能够将源代码美化,使其更易于阅读和理解。SyntaxHighlighter由Alex Gorbatchev开发,支持多种编程语言,包括JavaScript、HTML、CSS、...
- 自动缩进:默认情况下,SyntaxHighlighter 会尝试检测代码的缩进,但也可以通过 `tab-size` 参数手动设置。 - 隐藏代码:使用 `collapse: true` 可以使代码块默认折叠起来,用户需要点击才能展开。 - 兼容性:...
**SyntaxHighlighter 可执行库与示例** `SyntaxHighlighter` 是一款广泛使用的开源代码高亮工具,它能够将源代码片段美化,使代码在网页上展示时更易读,提升阅读体验。这个压缩包包含的是已经编译好的 `...
SyntaxHighlighter 提供了跨平台和跨浏览器的解决方案,适用于个人博客、技术文档、在线教程等多种场合。 **SyntaxHighlighter 功能** 1. **多语言支持**:SyntaxHighlighter 支持包括 HTML、CSS、JavaScript、...
这款插件对于那些在WordPress环境中在线安装遇到困难的用户来说,提供了离线安装的解决方案。2017年10月25日16点12分更新的版本是当时最新的,确保了用户能够获取到最先进、最稳定的功能。 **插件功能** 1. **代码...
- **社区支持**:由于是开源项目,有活跃的开发者社区提供问题解答和新功能开发。 5. **实际应用**: - **博客**:许多技术博客使用SyntaxHighlighter来展示示例代码,提高阅读体验。 - **在线教育平台**:教程...
SyntaxHighlighter是一个流行的开源代码高亮显示工具,广泛用于博客、网站和其他在线平台,以便以美观和可读的方式展示源代码。"syntaxhighlighter-3.0.83.zip" 是SyntaxHighlighter的一个版本3.0.83的压缩包,包含...
五、常见问题与解决方案 1. 代码不被高亮:确保正确引入了所有必需的文件,并检查`class`属性是否设置正确。 2. 行号显示异常:检查是否启用了行号显示选项,或CSS样式是否冲突。 3. 缩进问题:可以使用`gutter`...
Word虽然在文档编辑方面表现出色,但在粘贴代码时往往无法保留原有的格式,SyntaxHighlighter可以通过解析粘贴的代码,使其在网页上以正确的语法格式呈现,从而解决这一问题。 "planetB"可能是项目或文件的一个代号...
"代码自动高亮SyntaxHighlighter_1.5.0"是一个专门用于文本编辑器和网页中...在实际应用中,开发者可以根据具体需求选择合适版本的SyntaxHighlighter,或是寻找其他现代的代码高亮解决方案,如Prism.js或CodeMirror等。
总的来说,解决SyntaxHighlighter代码不换行问题并不复杂,关键在于理解CSS的布局规则和SyntaxHighlighter的工作原理。一旦找到正确的CSS选择器并应用适当的样式,就能轻松解决这个问题。对于初次接触此类问题的...
由于所有的处理都在浏览器端完成,因此即使在离线状态下,只要网页包含了必要的资源,SyntaxHighlighter也能正常工作。 **安装与使用** 1. **引入资源**:首先,你需要在网页中引入SyntaxHighlighter的核心...
要在中实现代码高亮显示功能,有两个关键步骤: 一是在要显示代码的网页中加入样式文件:FCKeditor/css/SyntaxHighlighter.css 二是下载集合了SyntaxHighlighter 插件的FCKeditor软件包
在 IT 领域,理解和分析源码是解决问题、学习新技术、调试代码或进行代码审查的关键步骤。对于初学者来说,阅读和理解源码有助于提升编程技能;对于专业人士,它是改进现有软件或创建新工具的基础。 工具,尤其是IT...
6. **兼容性问题**:不同的Android版本对WebView的支持程度不同,需要确保所使用的`SyntaxHighlighter`版本和JavaScript API与目标设备兼容。 7. **替代方案**:除了`SyntaxHighlighter`,还有一些专门为Android...
SyntaxHighLighter代码高亮插件实例(支持JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类)版本_2.1.364
SyntaxHighlighter高亮代码显示实例源码 高亮您的代码,加速您的技术站点开发【有源码,支持大部分常用语言的高亮显示,如C#,JAVA等】 在没有高亮方法时,我们常常自己写样式,当然也有直接使用微软的Word转换成...