您现在的位置是:首页 > Javascript
当前栏目
html prism.js 代码前端高亮、代码美化
2023-03-07 09:46:41 时间
Prism 官网
Django CKeditor Prism 插件下载
- 官方下载:http://download.ckeditor.com/prism/releases/prism_1.0.1.zip
- 百度云:https://pan.baidu.com/s/1HregPZYmnEsb7Ye5wZ7vaQ 密码:1l6l
Django Ckeditor 配置文档
* https://blog.csdn.net/qq_38504396/article/details/79835475 *
- 先下载 Django CKeditor Prism
- 解压到 ckeditor/static/ckeditor/ckeditor/plugins 路径下
- 在 settings 的 CKEDITOR_CONFIGS 里的 extraPlugins 对应的 value 里加入插件 'prism' 和 另外两个插件:"lineutils"、"widget"(这两个插件无须下载,在 django-ckeditor 中已经有了)
# ckeditor configs
CKEDITOR_CONFIGS = {
'language': 'zh-cn',
'awesome_ckeditor': {
'toolbar': 'full',
'width': 'auto',
'height': '480px',
'tabSpaces': 4,
# 插件
# prism:代码高亮、代码行数
# uploadimage:允许用户直接在编辑器里粘贴(ctrl + v)图片
# codesnippet:添加代码块的功能
'extraPlugins': ','.join(['codesnippet', 'uploadimage', 'prism', 'widget', 'lineutils', ]),
},
}
前端高亮代码配置
* 内容必须是代码块,即含有 pre 标签,再选择代码语言,不选择代码语言默认黑白框 *
去 prismjs 官网下载 css 和 js 文件:选择你喜欢的主题,勾选支持的语言,以及选择 Line Highlight、Line Numbers、Copy to Clipboard Button 功能,下载后把 css 和 js 放在static 对应的目录下
前端引入两个 js 和 css
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<script src="{% static 'js/prism.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/prism.css' %}">
相关文章
- js 快速将日期格式转换为时间戳
- 如何使用r4ven检查自己的电子设备是否泄漏了IP及GPS信息
- FBI的关基情报网站遭黑客攻击,数据库在暗网出售
- 17-RabbitMQ高级特性-日志与监控
- FreeBuf周报 | FBI情报网站遭黑客攻击;国际乓联泄露运动员信息
- 如何使用Klyda在线检测Web应用程序的密码喷射和字典攻击漏洞
- Android webview 加载html 页面缩放的问题
- 网站被反诈中心停了怎么办
- CSS背景图片 自适应缩放contain/cover
- Spring:基于注解管理bean
- HTTPLoot:一款功能强大的Web安全测试工具
- 软件测试|必须遵循的UI自动化设计军规
- 火上浇油!巴尔干地区紧张局势下,塞尔维亚政府机构遭DDoS攻击
- 开心档之Vue.js 组件
- 强者来袭:UE5像素流peer-stream Stars数量突破三位数
- 网站访问速度太慢-一招完美解决,小伙伴们赶快get起来吧
- HTML 核心篇:第一个网页
- js中JSON.parse()函数与JSON.stringify()函数详解
- react使用antd中Form内联组件与Form表单默认赋值
- js对象动态赋值---融会贯通