Welcome to Geeklog, Anonymous Monday, May 06 2024 @ 02:52 pm EDT

Geeklog Forums

Syntax Highlighting in CKEditor

Post New Reply

Author:

Mood:

Code

Font Color Font Size Close Tags

Forum BBCode Help

BBCode	Effect
[b]bolded text[/b]	bolded text
[i]italicized text[/i]	italicized text
[u]underlined text[/u]	underlined text
[s]strikethrough text[/s]	strikethrough text
[img]http://www.site.com/forum/images/forum.png[/img] OR [img h=65 w=50]http://www.site.com/forum/images/forum.png[/img]
[url=https://www.geeklog.net]Geeklog[/url]	Geeklog
[quote]quoted text[/quote]	To quote: quoted text
[size=15]Your Text[/size] "12" is usually standard on message boards. Usually measured in pixels (px).	Your Text
[color=red]Red Text[/color] OR [color=#FF0000]Red Text[/color] Can use many different color names or hex codes.	Red Text
[list] []List item 1 []List item 2 [/list] OR [list=1] []List item 1 []List item 2 [/list]	List item 1 List item 2 List item 1 List item 2
[code]monospaced text[/code]	monospaced text
[code=XYX]formatted code[/code] Where XYZ can be any of the following: c css html4strict java javascript jquery perl php plain python SQL and many more...	formatted code
To enter a backslash (\) in your post, use \\\\	\

Subject

[QUOTE][u]Quote by: alb3rt[/u][p]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:
[url]https://ckeditor.com/cke4/addon/codemirror[/url]

Just download and install it on
[code]~/public_html/editors/ckeditor/plugins[/code]

Activate it from:
[code]~/public_html/editors/ckeditor/config.js[/code]

[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,
     };
[/code]

There are several themes within the plugin, choose your favorite.

And finally we will have something like:

[img]https://gcdnb.pbrd.co/images/yInMvntAc7a7.jpg?o=1[/img]

It seems to me that for future releases, this plugin should be included and enabled by default.[/p][/QUOTE]

Options:

HTML Mode

Geeklog Forums

Search

Resources

About

Getting started

Support

Development

Topics

User Functions

What's New

Articles last 4 weeks

Comments last 4 weeks

Pages last 4 weeks

Links last 4 weeks

Downloads last 4 weeks