django CKeditor代码高亮

网站搭建好以后也发布了一些文章,虽然排版这些都没问题,文章中基本上都有插入代码部分。缺点也暴露出来了,代码和其他问题都是一样的颜色,在页面中很难清晰的分辨出哪些是代码部分,因此,代码高亮的需求的很有必要了。

代码高亮的插件有很多,我的CKeditor版本为5.x,包含了一个代码高亮插件codesnippet,插件路径在

%PYTHON_HOME%\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet

,%PYTHON_HOME%\为python安装路径。

接下来来django的settings文件里添加CKeditor的配置文件:CKEDITOR_CONFIGS,

CKEDITOR_CONFIGS = {

'default': {

'toolbar': (['Styles', 'FontSize', 'CodeSnippet'],

['Bold', 'Italic', 'Underline', 'Strike', 'Undo', 'Redo'],

['Link', 'Unlink', 'Anchor'],

['Image', 'Flash', 'Table', 'HorizontalRule'],

['TextColor', 'BGColor', 'Smiley', 'SpecialChar', 'Source'],

),

'extraPlugins': 'codesnippet',

}

}

toolbar的值表示需要在工具条显示的图标,extraplugins为额外的插件,重启服务器之后即可在工具栏看到codesnippet的图标

点击代码高亮图标便可进入代码编辑框,可以选择代码的语言类型,代码添加完成之后确定即可

这样便可以在前端页面显示代码高亮了。测试完成之后上传到云服务器,git pull之后启动虚拟环境,执行python manage.py collectstatic将新添加的css和js文件收集到指定的静态文件夹中,之后重启uwsgi,刷新服务器页面即可看到高亮的效果

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181130G1QP9M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券