Skip to content

Instantly share code, notes, and snippets.

@watershed
Last active August 10, 2026 11:16
Show Gist options
  • Select an option

  • Save watershed/cb3fced9bb62c0debae41c15df8960ae to your computer and use it in GitHub Desktop.

Select an option

Save watershed/cb3fced9bb62c0debae41c15df8960ae to your computer and use it in GitHub Desktop.
Segmenting text via a Twig macro for Craft CMS
{# Arguments:
- text: string segmented with `|` -- with optional incorporation of:
- `^text^` to denote visual emphasis
- `:delim` to denote a delimiting character that can be inclusively hidden via CSS
- Markdown syntax for inline scopes
- Inline emphasis must *not* span segment boundaries that are invoked by `|`
- classArr: optional array of class names to be applied to each respective segment
#}
{% macro segText(text, classArr) %}
{% set html = [] %}
{% set segs = text|split('|') %}
{% for seg in segs %}
{% set seg = seg|trim %}
{# A default class name for each segment #}
{% set class = ["seg-#{loop.index}"] %}
{% if classArr %}
{# Extend the default class name with the relevant one from the array #}
{% set custom = classArr[loop.index0] is defined ? classArr[loop.index0] : null %}
{% set class = custom ? class|merge([custom]) : class %}
{% endif %}
{# Look for a sub-string of the form: ^text^, to denote a visually emphasised segment #}
{% set patt = '/^\\^([^\\^]+)\\^/' %}
{% set class = seg matches patt ? class|merge(['em']) : class %}
{# Remove any use of '^' #}
{% set seg = seg matches patt ? seg|replace(patt, '$1') : seg %}
{# Look for the presence of a delimter to provide the option to inclusively hide it #}
{% set patt = '/^(.*)(:|;|,)delim/' %}
{% set seg = seg matches patt ? seg|replace(patt, '$1<span class="delim">$2</span>') : seg %}
{# Allow for use of inline Markdown in the input text #}
{% set seg = seg|md(inlineOnly=true)|replace('&amp;', '&') %}
{# Create the segment and merge it into the html array #}
{% set elem = tag('span', { class: class|join(' '), html: seg }) %}
{% set html = html|merge([ elem ]) %}
{% endfor %}
{{ html|join(' ')|raw }}
{% endmacro %}
@watershed

watershed commented Aug 10, 2026

Copy link
Copy Markdown
Author

Example input string aiming for visual emphasis:

^This text is to be styled more prominently^ | than this text

HTML outcome:

<span class="seg-1 em">This text is to be styled more prominently</span> 
<span class="seg-2">than this text</span>

Example input with punctuation that is not structurally classified as a delimiter:

Colonic irrigation: | a form of hydrotherapy that can remove painful blockages

HTML outcome:

<span class="seg-1">Colonic irrigation:</span> 
<span class="seg-2">a form of hydrotherapy that can remove painful blockages</span>

Example input with delimiter:

Persistence is the key:delim | it is the steady drip of water that eventually carves through the hardest mountain of resistance.

HTML outcome:

<span class="seg-1">Persistence is the key<span class="delim">:</span> 
<span class="seg-2>it is the steady drip of water that eventually carves through the hardest mountain of resistance.</span>

Example input with inline emphasis

It is difficult to get a man to understand something | when his salary depends upon his _not_ understanding it.

HTML outcome:

<span class="seg-1">It is difficult to get a man to understand something</span> 
<span class="seg-2>when his salary depends upon his <em>not</em> understanding it.</span>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment