首页> 文章> 详情

CKeditor4.4.X版本添加程序代码高亮插件图文详解

教程分享 > Java教程 (2251) 2024-03-11 19:26:30

[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet

1.去CKeditor官网下载4.4.X及以上版本

官网直通车:点击

1

2.下载CKeditor插件codesnippet 

直通车:点击

3

3.打开CKeditor的配置文件config.js

加入配置
1
加入后
3
编辑器上就多了个图标
213
点击即可插入程序代码。
12311
展示页面需要导入CSS.JS以及初始化,具体如下

<!-- code高亮模块CSS -->
<link rel="stylesheet" type="text/css"
	href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" />
<!-- code高亮模块JS -->
<script type="text/javascript"
	src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>


<!--注意此初始化方法需要导入jQuery支持-->
<script>
$(function() {
	// 初始化代码高亮
	hljs.initHighlightingOnLoad();
});
</script>

现在就可以在该页面显示高亮代码了:
dsf

https://www.leftso.com/article/38.html

相关文章

[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet,ckeditor
Apache Shiro教程,您的第一个Apache Shiro应用程序(翻译)-编程技术
Java如何复制目录,Java基础教程系列,如果要将目录及其包含的所有子文件夹和文件从一个位置复制到另一个位置,请使用下面的代码,该代码使用递归遍历目录结构,然后使用Files.copy()函数...
ckeditor绑定keyup/keydown等事件实现一些功能,比如实时保存$(function(){//1编辑器初始化$('textarea#blog_content').ckeditor();
docker入门使用教程/linux(centos)系统docker制作教程
Vert.x 入门教程通过maven shade plugin插件打包发布项目,上一篇文章,我们主要初步的了解了下eclipse vert.x是什么有什么用。当然一个程序编写完成后最终还是需要打...
CKeditor 5.0 如何获取纯文本数据,ckeditor官方其实提供了获取带html脚本的内容方法,只需要配合jQuery简单就获取到了文本内容,详细操作如下
Java编程转义HTML标签格式内容,在许多的cms模块业务的时候我们需要保存大量的HTML文档,某些情况我们也可能会进行HTML文档的转义防止一些变故。
CKEditor4.4整合SprngMVC实现上传图片
ReactJs入门教程,基础学习
随着Spring Cloud 的越来越流行,国内很多公司也在开始使用该框架了
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
java HashSet使用教程,HashSet常见的内置方法使用,HashSet 排序/迭代循环
JDK 11 String 新方法使用教程