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

位置:首页>博客>详情   分类:Java教程   阅读(569)   2023-03-28 11:29:14
[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