Welcome to Geeklog, Anonymous Friday, March 01 2024 @ 07:05 pm EST

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
Text Formatted Code
~/public_html/editors/ckeditor/plugins


Activate it from:
Text Formatted Code
~/public_html/editors/ckeditor/config.js


Text 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:



It seems to me that for future releases, this plugin should be included and enabled by default.
D Web Studio - www.d-webstudio.net
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1468
Location:Canada
Added as a feature request to the Geeklog Github repo:

https://github.com/Geeklog-Core/geeklog/issues/1154
One of the Geeklog Core Developers.
 Quote

All times are EST. The time is now 07:05 pm.

  • 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