Whisp
Whisp

Code Samples

Code samples can be added to any documentation page, regardless of the blueprint type. Code samples are highlighted on the front-end using the highlight.js JavaScript library.

Adding Code Samples to Markdown Pages

When creating a page using the Markdown blueprint, code samples can be added to the document using three backticks followed by the name of the language, if necessary.

For example, to create an Antlers code sample within a Markdown document, we could use the following:

        
        
        ```antlers
{{ partial:alert type="{callout_type}" }}
    {{ if callout_title }}
    <h3 class="p-0 m-0">{{ callout_title }}</h3>
    {{ /if }}

    {{ partial:documentation/page :content="embedded_content" /}}
{{ /partial:alert }}

```

Using the Documentation Page Builder

To add a code sample using the documentation page builder, select the "Code Sample" option from the set picker.

When using the Code Sample set, you can select a language from the available options in the top right of the fieldset.

The Code Sample set also allows for additional options; these can be made visible using the "Options" toggle. The available options are:

  • Language Override: A free-form textbox, which allows you to override the language used when rendering the code sample on the front-end.

  • File Name: An optional file name that will be displayed before the code sample.

As an example, the following configuration:

would render the following on the front-end:

        
            

                

                    
                    views/documentation/page/_code.antlers.html
{{ /code_sample }}').then(() => copied = true); setTimeout(() => copied = false, 1500)"> {{ code_sample }} <pre class=" {{ 'language-{ language_override ? language_override : mode }' }} " > {{ if file_name }} <div class="flex w-full border-b border-gray-700"> <p class="p-0 py-2 m-0 font-mono truncate text-gray-200 flex items-center"> {{ svg:code class="w-4 h-4 inline mr-1" /}} {{ file_name /}} </p> </div> {{ /if }} <code>{{ code | entities }}</code> </pre> {{ /code_sample }}

Additional Languages

Tidal ships with support for two additional languages beyond a typical highlight.js installation:

  • Antlers: Statamic's default templating language. Syntax highlighting is provided by the highlightjs-antlers package.

  • Blade: Laravel's templating language. Syntax highlight is provided by the highlightjs-blade package, an open-source package offered by Spatie.

These can be added to any code sample when using the Page Builder content mode by supplying an override language.

Laravel Blade highlighting example:

        
        
        @foreach ($users as $user)
    @continue($user->type == 1)
 
    <li>{{ $user->name }}</li>
 
    @break($user->number == 5)
@endforeach

Antlers highlighting example:

        
        
        <!doctype html>
<html lang="{{ site:short_locale }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ title }} — {{ settings:site_name }}</title>
        <meta name="description" content="{{ excerpt ?? title }}">
        <meta name="theme-color" content="00908F">
        {{ vite src="resources/js/site.js|resources/css/site.css" }}
    </head>
    <body class="bg-white font-sans leading-normal text-grey-800 px-4 sm:px-10" x-data="{ showMobileNav: false }">
        {{ partial:nav }}
        {{ template_content }}
        {{ partial:footer }}
    </body>
</html>