Code Listing

Code Listing is a drop-in syntax highlighting for code snippets, powered by the <tcl-code-listing web component.

The module wraps the component in three thin Drupal integrations so you can pick whichever fits your content model:

• Text filter: wrap any <code class="language-xxx">… block in a long-text field; the filter attaches the component and lifts the language onto the host element. Without the wrapper, the component auto-detects.
• SDC: code_listing:tcl-code-listing for use from Twig templates, Drupal Canvas, or other SDC-aware tools. Props: code, lang, theme (light / dark / auto).
• Library: attach code_listing/code_listing yourself to a twig template and hand-author the custom element.

Features

• Syntax highlighting with language auto-detection
• Copy-to-clipboard button
• Light / dark / auto theme
• Works everywhere a custom element works, no WYSIWYG lock-in

Requirements

The tcl-code-listing JS library must live at /libraries/tcl-code-listing/tcl-code-listing.js. The install hook reports a missing file via hook_requirements on Drupal's status page.

We recommend to install the library by adding the repo to your composer.json 's repositories section:

"tcl-code-listing": {
            "type": "package",
            "package": {
                "name": "tojio-cl/tcl-code-listing",
                "version": "1.0.0",
                "type": "drupal-library",
                "dist": {
                    "type": "tar",
                    "url": "https://gitlab.com/tojio-cl/tcl-code-listing/-/archive/main/tcl-code-listing-main.tar.gz",
                    "reference": "main"
                }
            }
        }

and then composer require 'tojio-cl/tcl-code-listing:^1.0'