html语言高亮代码,HTML highlight 代码前端高亮

最新推荐文章于 2024-08-16 08:22:46 发布

weixin_39825872

最新推荐文章于 2024-08-16 08:22:46 发布

阅读量687

点赞数

文章标签： html语言高亮代码

参考资料：

配置步骤：

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

/**

* 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/，详情)