回到顶部

CONTENTS

ckeditor 代码前端高亮

参考资料:

1. highlightjs 官方使用文档

2. highlightjs 代码各种风格

3. ckeditor 代码高亮插件 Code Snippet 官方使用文档

4. Code Snippet 插件下载地址

配置步骤:

1. 让 pre 按钮在Django 后台 ckeditor 富文本编辑器中显示出来,ckeditor 的 config.js 文件里添加插件:codesnippet

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    //添加插件,多个插件用逗号隔开
    config.extraPlugins = 'codesnippet';
    //设置高亮风格, 如果不设置着默认风格为default
    config.codeSnippet_theme = 'monokai_sublime';
};
# 富文本编辑器中显示出来的输入的代码按钮

ckeditor 的 config.js 路径:

Django collectstatic 后的 static_root 路径:joyoo\static_root\ckeditor\ckeditor\config.js,如果想在 debug 模式下显示 代码按钮 可以把 ckeditor 的 config.js 源码改成上面那样,也可以在 settings  里配置,详情 点这里

源码 ckeditor 路径:E:\Python35\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\config.js

2. 前端模板 HTML 文件引入对应的 css 和 js (styles 使用的 css 文件,可以修改成自己喜欢的样式,css 文件路径:joyoo\static_root\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles,前端代码高亮还可以使用 https://prismjs.com/plugins/line-numbers/详情

<link rel="stylesheet" href="/static/styles/monokai_sublime.css">
<script src="/static/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

^_^
请喝咖啡 ×

前一篇: django admin 使用 ckeditor 富文本编辑器
下一篇: 创建博客网站准备的一些材料