« See all

Feature of the month - Code support in CKEditor 5

Feature of the month - Code support in CKEditor 5

Different kinds of content require different approaches. Sometimes specialized text needs special features that allow the presentation of formatting and layouts that are otherwise unavailable and not necessary. One of such areas of content creation that requires a different approach are programming languages or more broadly: computer and web-related materials. Due to the visual nature of programming languages, high codification of their form, and the necessity to distinguish between example listings and the main body of the text, special techniques are required to visualize these. And employing real-life samples and showing actual implementations of code is a demanding task. Here at CKSource, we have brought forth tools and means to provide solutions for all kinds of challenges a technical writer or blogging developer may encounter that let them approach these kinds of tasks with confidence and produce the highest quality, easily accessible and readable output.

# Working with code

There are numerous situations in which an otherwise “regular” text needs to employ elements of programming, scripting, or markup languages. One of the most common applications would be documentation, developer blogs or forums, help sections of websites or printed user manuals, and learning books devoted to widely-understood web creation, programming, or other computer-related issues.

The main difficulty when dealing with highly codified, specialized languages such as PHP, C#, or even HTML is the need to make them stand out from the human language used to write the content. This is mostly done by utilizing special formatting — tags, operators, or commands would usually be presented with a different font to make them stand out more, draw attention, and most importantly, signal their special status.

For dealing with single words or standalone phrases or even simple lines of code, CKEditor 5 provides the inline code feature. One may wonder why we need a separate formatting feature if all that could be achieved thanks to the font feature. If this may seem an easy approach on the surface, there is more to that and it’s a current that runs wild underneath.

First of all, it is not only about the presentation. The visual side of the content is just this, one side of the problem. While it’s clear and readable for readers who can see and read it, the subtle differences like fonts or colors may get lost when higher accessibility is required (for example when the reader has some kind of sight impairment or even in the not so rare event of using an audiobook rather than simply reading).

With the employment of inline code, the writer and editor can not only control the visual, presentational style easily — and it is by far easier to apply one simple formatting, than using several separate features like size or font selection or even predefined styles — but they also immediately mark the semantic separateness of words or phrases. This, in turn, may trigger the accessibility software, is clear and readable for web indexers, and makes editing software more efficient by sensitizing it to certain types of content.

Each time, then, when you need to showcase tags, want to list operators, or mention any other kind of programming language elements, the inline code feature comes in handy. The handier, in fact, because CKEditor 5 supports autoformatting with Markdown-like shortcodes. By simply using a ` the writer can format the code on the fly, without interrupting the creation process. This is a level of accessibility and efficiency hardly available with the use of more traditional formatting tools.

Inline code formatting is generated on the fly.
Inline code formatting is generated on the fly.

Using the autoformatting feature will be surely a welcome modus operandi for all those who deal with code on a daily basis, but also for technical writers faithful to the docs as code principle and numerous other users. You can read more about it in this dedicated blog post on using CKEditor 5 as a Markdown editor.

# Going big with code

Inline code is of course fine and more than enough for listing elements or short passages of code. Sometimes, however, especially in educational materials, the code needs to be listed in full to visualize programming solutions, highlight conventions, or even provide complete solutions in the form of a complete code presentation.

Code listings were personally big for me and my friends back in the ’80s when we used to retype BASIC programs from print magazines straight into the screens of our 8-bit Ataris. The days of those wonderful machines are mostly gone except for a handful of enthusiasts, but this does not differ much from what is done today. Places like the loved-and-hated Stack Overflow keep on providing code listings for programmers and webmasters to (probably mostly) reuse, learn from and highlight certain applications.

This is where the code block feature of CKEditor 5 enters all dressed in white. Observe an example listing of a simple webpage.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Makeup">
		<meta name="keywords" content="magic makeup">
		<title>Magic Makeup</title>
	</head>
	<body style="font-family: Georgia; font-size: 12pt; margin: 75px;">
	<h1>How to perform magic makeup?</h1>
	<p>
	Today we are going to lear how to prepare a <b>stunning makeup</b>.
	</p>
	</body>
</html>

This kind of presentation, just like the inline code, provides two main functions: separates the code visually from the main content body but also supports semantical differentiation. While the inline code feature simply provides means to distinguish the code from content, the code block offers more. Not only does it produce semantic output in the form of a block but it also supports marking the language. Each code block can be marked to present certain programming, scripting of markup language that the editor or writer can choose from a toolbar dropdown. The list of languages supported is configurable and what’s more, each of them may use different, preconfigured CSS formatting making different code listing present differently based on their designated language. There is even the possibility to integrate the code block feature with code highlighters providing the most out of the reader experience.

Toolbar dropdown allowing the choice of language when inserting a new code block or changing the designated language of an existing code block.
Toolbar dropdown allowing the choice of language when inserting a new code block or changing the designated language of an existing code block.

Code block languages in CKEditor 5 are retained, which means if you choose the language of the first code block inserted into the content, the following ones will automatically be set to the same language. This greatly affects the speed and efficiency when the autoformatting function is used and code blocks are introduced by simply typing a shortcode, just like in the case of inline code. This way, utilizing even a relatively small set of interconnected features, the authors can boost the editing speed and productivity greatly. If no choice was made before (this is the very first block inserted into the content), it will default to plain text and can later be changed with the toolbar dropdown. These defaults and the list of available languages can be configured, as mentioned before.

# write()

Content with code, be it inline or listed in blocks, falls in a specific area of writing and editing. CKEditor 5, however, aims to be a versatile tool for all kinds of writing professionals. Whatever the final destination of the created or edited document would be — education, user manual, training materials — both the presentational and semantical side of the output can be fully tailored to the needs of the project and executed with ease and efficiency. Whether a technical writer or a programmer, an educator, trainer, or developer — all of them will find the ease of writing about code appealing.

We do put heart into our code formatting features, because we ourselves, in fact, love code itself. And who else can understand a programming specialist’s needs better if not a programmer?

Share this post

Linkedin Reddit
Celebrating CKSource’s highlights. 2021 in a nutshell
CKEditor 5 v31.1.0 with enhanced copy and paste and reconnection handling