Creating Code Blocks <code> or <pre> in CKEditor

Question

Is there a plugin to allow users to create <code/> or <pre/> blocks?

If I pass in some html that includes <code> </code> blocks the contents shows up, but with no visual indication that it is different from any other text. Thats inconvenient, but I can't seem to find a way that a user could select a block of code they typed that they want to appear literally and click a button to indicate that.

I'm still pretty new to the CKEditor, but I know Telerik has a pretty graceful implementation of this. (just click the upper right toolbar button titled "Format Code Block").

Does this editor support that? Are their any plugins that add this functionality?

Answer 1

As for pre-elements, there is this plugin by wwalc: http://ckeditor.com/addon/insertpre

It is also available in GitHub: https://github.com/wwalc/insertpre

The only issue is that it hasn't been updated in a while - It officially only supports CKE up to version 4.1 - so there might be some ACF problems at least. You can search for alternatives at http://ckeditor.com/addons/plugins/all using keywords like code and pre, this will always show the most up to date results.

Answer 2

For code blocks you can also use the Text Formats feature - by default it is available in the Standard and Full presets, though you can also add it to your custom build.

When the Format plugin is enabled, it adds the Format drop-down list to your toolbar. Check the Formatted text format - it wraps the active text block with <pre> tags. Note that it works on block-level, so you don't even need to perform any text selection. However, this also means it's not appropriate for inline formatting.

You can also add some custom styling to the Formatted format by adjusting the config.format_pre definition. See the Applying Block-Level Text Formats sample for demos of both the default implementation and custom format definition (scroll down the sample page to get the complete source code for both solutions).

As for inline code formatting, the Styles drop-down list contains the inline Computer Code style that wraps a text selection with <code> tags. Likewise, you can (and actually should) customize the styling that is applied with this feature.

Additionally, for some really fancy code formatting, see the optional Code Snippet plugin. It lets you insert code snippets with syntax highlighting into the editor. These snippets look great (you can also choose a theme that you like) and since they are implemented as widgets, they have all advantages of CKEditor widgets: a code snippet is treated as a single entity inside the editor, you can select it as a whole, delete, change its position with drag&drop etc. See the documentation and sample for more information and examples.