CKEDITOR5的文本代码高光

edwin99
edwin99
2024-02-18 12:47
40 阅读
0 评论
文章封面
目录
正在加载目录...

方法一:用markdown

比较麻烦,但是写作效率高 markdown过的文章在经过原生ckeditor5文本编辑之后会变成纯文本,不互通,需要动点手脚

方法二:下插件prism

最方便的方法了,且自定义性强 进入官网:https://ckeditor.com/cke4/addon/prism下载解压。

将文件放进env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins里面。

前往官网选择自定css主题: https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+css-extras&plugins=inline-color

下载自己定制的css和js 在项目根目录\static中新建prism文件夹,将css和js文件让进去。

可以利用这些定制脚本来实现多语言高光,这里选的是Okaidia背景+python

setting.py的URL和DIR要改下,因为这里涉及了两个文件夹的static,应当分开存储。

不然的话后台会报错说找不到相应的css和js文件

setting.py的config的extends(取决于我用的哪个样式),添加extraPlugins:

然后在base.html或者detail.html中写入:

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">

 

输出效果:

总结:

推荐markdown,但是外行人不会用代码评论,所以建议评论区用ckeditor代码高光,但是admin写代码时切换成admin时可以换成markdown,建议两用。

评论区 (0)

登录后参与评论

暂无评论,抢沙发吧!