Welcome to Geeklog, Anonymous Sunday, September 01 2024 @ 12:32 am EDT
Geeklog Forums
Syntax Highlighting in CKEditor
Status: offline
alb3rt
Forum User
Regular Poster
Registered: 10/30/06
Posts: 71
Location:Mexico City
Working with source code in CKEditor (sometimes it is necessary), many times you can make a mistake and it is not visible, researching I found a plugin that can help make the code a little more readable.
Plugin:
https://ckeditor.com/cke4/addon/codemirror
Just download and install it on
Activate it from:
config.extraPlugins = 'showprotected,codemirror';
config.codemirror = {
// Set this to the theme you wish to use (codemirror themes)
theme: 'ayu-dark',
// Whether or not you want to show line numbers
lineNumbers: true,
// Whether or not you want to use line wrapping
lineWrapping: true,
// Whether or not you want to highlight matching braces
matchBrackets: true,
// Whether or not you want tags to automatically close themselves
autoCloseTags: true,
// Whether or not you want Brackets to automatically close themselves
autoCloseBrackets: true,
// Whether or not to enable search tools, CTRL+F (Find), CTRL+SHIFT+F (Replace), CTRL+SHIFT+R (Replace All), CTRL+G (Find Next), CTRL+SHIFT+G ( Find Previous)
enableSearchTools: true,
// Whether or not you wish to enable code folding (requires 'lineNumbers' to be set to 'true')
enableCodeFolding: true,
// Whether or not to enable code formatting
enableCodeFormatting: true,
// Whether or not to automatically format code should be done when the editor is loaded
autoFormatOnStart: true,
// Whether or not to automatically format code should be done every time the source view is opened
autoFormatOnModeChange: true,
// Whether or not to automatically format code which has just been uncommented
autoFormatOnUncomment: true,
// Define the language specific mode 'htmlmixed' for html including (css, xml, javascript), 'application/x-httpd-php' for php mode including html, or 'text/javascript' for using java script only
mode: 'htmlmixed',
// Whether or not to show the search Code button on the toolbar
showSearchButton: true,
// Whether or not to show Trailing Spaces
showTrailingSpace: true,
// Whether or not to highlight all matches of current word/selection
highlight Matches: true,
// Whether or not to show the format button on the toolbar
showFormatButton: true,
// Whether or not to show the comment button on the toolbar
showCommentButton: true,
// Whether or not to show the uncomment button on the toolbar
showUncommentButton: true,
// Whether or not to show the showAutoCompleteButton button on the toolbar
showAutoCompleteButton: true,
// Whether or not to highlight the currently active line
styleActiveLine: true,
};
There are several themes within the plugin, choose your favorite.
And finally we will have something like:
![](https://gcdnb.pbrd.co/images/yInMvntAc7a7.jpg?o=1)
It seems to me that for future releases, this plugin should be included and enabled by default.
D Web Studio - www.d-webstudio.net
Plugin:
https://ckeditor.com/cke4/addon/codemirror
Just download and install it on
Text Formatted Code
~/public_html/editors/ckeditor/pluginsActivate it from:
Text Formatted Code
~/public_html/editors/ckeditor/config.jsText Formatted Code
config.extraPlugins = 'showprotected,codemirror';
config.codemirror = {
// Set this to the theme you wish to use (codemirror themes)
theme: 'ayu-dark',
// Whether or not you want to show line numbers
lineNumbers: true,
// Whether or not you want to use line wrapping
lineWrapping: true,
// Whether or not you want to highlight matching braces
matchBrackets: true,
// Whether or not you want tags to automatically close themselves
autoCloseTags: true,
// Whether or not you want Brackets to automatically close themselves
autoCloseBrackets: true,
// Whether or not to enable search tools, CTRL+F (Find), CTRL+SHIFT+F (Replace), CTRL+SHIFT+R (Replace All), CTRL+G (Find Next), CTRL+SHIFT+G ( Find Previous)
enableSearchTools: true,
// Whether or not you wish to enable code folding (requires 'lineNumbers' to be set to 'true')
enableCodeFolding: true,
// Whether or not to enable code formatting
enableCodeFormatting: true,
// Whether or not to automatically format code should be done when the editor is loaded
autoFormatOnStart: true,
// Whether or not to automatically format code should be done every time the source view is opened
autoFormatOnModeChange: true,
// Whether or not to automatically format code which has just been uncommented
autoFormatOnUncomment: true,
// Define the language specific mode 'htmlmixed' for html including (css, xml, javascript), 'application/x-httpd-php' for php mode including html, or 'text/javascript' for using java script only
mode: 'htmlmixed',
// Whether or not to show the search Code button on the toolbar
showSearchButton: true,
// Whether or not to show Trailing Spaces
showTrailingSpace: true,
// Whether or not to highlight all matches of current word/selection
highlight Matches: true,
// Whether or not to show the format button on the toolbar
showFormatButton: true,
// Whether or not to show the comment button on the toolbar
showCommentButton: true,
// Whether or not to show the uncomment button on the toolbar
showUncommentButton: true,
// Whether or not to show the showAutoCompleteButton button on the toolbar
showAutoCompleteButton: true,
// Whether or not to highlight the currently active line
styleActiveLine: true,
};
There are several themes within the plugin, choose your favorite.
And finally we will have something like:
![](https://gcdnb.pbrd.co/images/yInMvntAc7a7.jpg?o=1)
It seems to me that for future releases, this plugin should be included and enabled by default.
D Web Studio - www.d-webstudio.net
18
18
Quote
All times are EDT. The time is now 12:32 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content