Drupal inline code and code blocks in the WYSWIG

By cyberpuffin, 29 June, 2023

Inline code vs Code blocks

The inline code format some code or a command can be added inline with the page's text: uname -a, whereas code blocks are on the line by themselves:

root@docker01:~# docker system prune -a --filter "until=24h"                                                                            
WARNING! This will remove:                                                                                                             
  - all stopped containers                                                                                                             
  - all networks not used by at least one container                                                                                    
  - all images without at least one container associated to them
  - all build cache           
                                                                   
  Items to be pruned will be filtered with:
  - until=24h

Are you sure you want to continue? [y/N] y
Deleted Images:
deleted: sha256:c3e1ab9398d14b4efe1c408de7bc991f94b1f32cf92e14bc23f2a69aa1563db6
<snip>
deleted: sha256:6668b748b875185532cf36ad2878efa75c4b481ce6f7e76d9a4ba841bb550b0a

Total reclaimed space: 2.638GB
root@docker01:~#

Installing Code Blocks

Starting with 10.1 Drupal ships with a Code Block in core.  Prior to 10.1 the CKEditor CodeSnippet module was one way to add code blocks into the What You See Is What You Get (WYSIWYG) editor.

Text formats and editors

With the Code Blocks available it's time to go into Administration > Configuration > Content authoring > Text formats and editors.  From here each of the allowed text formats can be configured, especially the ones configured to use the CKEditor.

In the text format's configuration page look for the Toolbar configuration.  The Available buttons can be dragged over to the Active toolbar.

Code block WYSIWYG icon

Next under the CKEditor 5 plugin settings, find the Code Block tab and add in any additional programming languages to be available when defining a code block.

Make any other changes that seem sane and click Save Configuration.  Code blocks should now be available for the choses text format.

Version

Drupal: 10.1

Technology

Comments