`
MouseLearnJava
  • 浏览: 463901 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

KindEditor代码高亮显示

 
阅读更多
使用KindEditor将Java代码存入数据库,然后将数据库的数据取出来并显示在页面上的时候,发现Java代码没有高亮显示。

加入的有关KindEditor相关的CSS 和 JS有:

  • prettify.css
  • kindeditor.js
  • prettify.js


<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/code/prettify.css" />
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/plugins/code/prettify.js"></script>
<script>




针对这个问题,一个解决方法是增加一段JS代码来显示调用 prettyPrint()方法,代码如下:


<script>
		KindEditor.ready(function(K) {
			var editor = K.create('textarea[name="content"]', {
				cssPath : '${pageContext.request.contextPath}/plugins/code/prettify.css',
		        resizeType: 1,
		        allowPreviewEmoticons: false,
		        allowImageUpload: false,
		        items: [
						'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
		    });
		    prettyPrint();
		});
	</script>


这样我们在页面上就能看到高亮的Java 代码段,效果图如下:


  • 大小: 23.4 KB
  • 大小: 24.5 KB
分享到:
评论

相关推荐

    jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

    本篇文章将详细介绍如何在KindEditor4.1.4版本中设置代码高亮显示。 首先,代码高亮显示,也就是Syntax Highlighting,是一种对代码或者文本显示的处理技术,使得代码或特定文本突出显示,通常通过不同颜色的背景、...

    高亮显示插件

    在IT领域,高亮显示插件是用于增强代码可读性和美观度的重要工具。这款名为“SimpleCodeHighLightPlugin”的插件,正如其标题所言,专注于提供一个简单且高效的代码高亮解决方案。它适用于那些希望在网页或编辑器中...

    18种KindEditor模式HTML编辑器代码

    12. **代码高亮模式**:对于编程相关的文本编辑,提供代码高亮,提高可读性。 13. **Markdown模式**:支持Markdown语法,方便熟悉Markdown的用户快速编写文档。 14. **WYSIWYG模式**:即“所见即所得”模式,用户...

    xheditor所见即所得文本编辑器(代码高亮显示修改)

    xheditor是一个所见即所得的Web文本编辑器,它具有代码高亮显示的功能,可以通过插件进行自定义扩展。所见即所得(WYSIWYG,即What You See Is What You Get)是一种编辑器的功能,它允许用户直接在编辑器界面中看到...

    kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频

    `plugins` 文件夹包含了编辑器的各种插件,这些插件扩展了编辑器的功能,例如图片处理、视频处理、表格工具、代码高亮等。在4.1.12版本中,可能有针对Flash上传图片和视频处理的新插件或者对现有插件进行了更新,以...

    asp中kindeditor实现文章分页代码

    7. **样式和用户体验**:确保分页按钮有良好的视觉反馈,例如,当前页码高亮显示,鼠标悬停效果等。同时,考虑加载状态的提示,以提高用户体验。 在DEMO文件中,你应该能找到一个简单的示例应用,包括ASP脚本和...

    kindeditor-3.4.2.zip

    7. **代码高亮**:对于程序员或技术类文章,KindEditor 支持代码高亮显示,提高阅读体验。 8. **兼容性良好**:与主流浏览器(如Chrome、Firefox、Safari、IE等)兼容,确保在各种环境下稳定运行。 9. **响应式设计*...

    kindeditor5.0

    2. **代码编辑支持**:对于需要编辑HTML、CSS或JavaScript代码的用户,KindEditor通常会提供代码模式,允许用户直接编写和预览代码,同时具备代码高亮显示,提高代码可读性。 3. **多语言支持**:考虑到全球化的...

    KindEditor

    5. **代码高亮**:对于编程人员,可以插入代码片段并自动进行语法高亮显示。 6. **插件扩展**:KindEditor允许开发者自定义插件,以满足特定需求,如图库选择、地图插入等。 在实际应用中,我们可以通过JavaScript ...

    KindEditor Html在线编辑器

    4. **插件支持**: 它支持多种插件扩展,例如图片上传、视频插入、代码高亮等,增强了编辑器的功能性和灵活性。 5. **多语言支持**: 为了适应不同地区的用户,KindEditor 提供了多种语言包,包括中文、英文、日文等...

    kindeditor编辑器

    6. **代码高亮**:对于编程人员,KindEditor还支持代码高亮显示,方便在网页中展示源代码。 7. **拖拽功能**:支持图片、文件的拖拽上传,提高用户体验。 8. **HTML过滤**:为了防止XSS攻击,KindEditor提供HTML过滤...

    kindEditor4.12 JSP

    6. **代码高亮**:对于插入的代码片段,KindEditor能进行语法高亮显示,便于代码阅读。 7. **兼容性好**:支持主流浏览器,如Chrome、Firefox、Safari、IE等,确保在各种环境下都能正常运行。 8. **API接口**:提供...

    kindeditor文件

    7. 扩展与插件:除了核心功能外,KindEditor社区还开发了许多插件,如公式编辑器、Markdown支持、代码高亮等,增强了编辑器的功能多样性。 8. 整合到项目:在Web应用中整合KindEditor时,需要注意与后端服务器的...

    kindEditor编辑器实例

    它的核心特性包括:文本格式化、插入图片、视频、表格、链接、代码高亮、撤销/重做、全屏编辑等。KindEditor通过AJAX与服务器进行交互,允许用户在客户端编辑内容,然后将数据提交到服务器端。 2. **富文本编辑器**...

    kindeditor 的asp版,有需要的下吧

    5. **代码编辑**:对于技术类文章,KindEditor支持代码高亮显示,便于插入和编辑代码片段。 6. **多语言支持**:编辑器支持多种语言界面,包括中文,方便不同地区的用户使用。 7. **插件扩展**:KindEditor拥有...

    JAVA中使用kindeditor实现在线编辑文档

    7. **插件使用**:KindEditor有丰富的插件,如图床管理、代码高亮等,可以根据需要引入并配置。例如,如果需要代码高亮,可以使用`code`插件,添加到`items`数组中,并引入对应的CSS样式。 总的来说,KindEditor在...

    kindeditor-4.1.10

    - **代码编辑**:对于编程人员友好,支持HTML、CSS、JavaScript等代码高亮显示。 - **多语言支持**:内置多种语言包,方便不同地区的用户使用。 - **自定义样式**:允许用户通过CSS定义编辑器样式,以匹配网站...

    jquery + kindEditor使用

    KindEditor具备丰富的功能,如文本格式化、图片上传、代码高亮等,非常适合用于在线文章编辑、论坛发帖等功能的开发。 在实际项目中,我们常常会结合jQuery来使用KindEditor,利用jQuery的强大DOM操作能力进一步...

Global site tag (gtag.js) - Google Analytics