Skip to content

Shortcodes, white space, and encoding #402

@Heydon

Description

@Heydon

Hi,

I'm having fun with shortcodes and (if I'm not missing something obvious) there are issues with the way white space is handled.

Here is my shortcode for creating a little aside thingy (note the wrapping for readability inside the template literal):

  eleventyConfig.addPairedShortcode('note', function (content, title) {
    const slug = slugify(title).toLowerCase();
    return `
      <aside aria-labelledby="${slug}">
        <h4 id="${slug}">${title}</h4>
        ${content}
      </aside>
    `;
  });

Using

{% note 'Title' %}

Some text.

Some other text

{% endnote %}

I get

<pre><code>  &lt;aside aria-labelledby=&quot;title&quot;&gt;
    &lt;h4 id=&quot;title&quot;&gt;Title&lt;/h4&gt;
</code></pre>
<p>Some text.</p>
<p>Some other text</p>
<pre><code>  &lt;/aside&gt;
</code></pre>

Weird, because it encodes and renders as a <pre>. So I tried removing the white space with the hyphens:

{%- note 'Title' -%}

Some text.

Some other text

{%- endnote -%}

The result is... different:

<aside aria-labelledby="title">
<h4 id="title">Title</h4>
Some text.</p>
<p>Some other text
</aside>

Looks like all the white space is collapsed, so my two markdown paragraphs are broken. The only way I seem to be able to fix it is by putting the template on one line (and not using the nunjucks white space removal):

  eleventyConfig.addPairedShortcode('note', function (content, title) {
    const slug = slugify(title).toLowerCase();
    return `<aside aria-labelledby="${slug}"><h4 id="${slug}">${title}</h4>${content}</aside>`;
  });

Is there something else to manage this? Perhaps I need to switch to a different template language?

Metadata

Metadata

Assignees

No one assigned

    Labels

    education: template languageLearning about a template language.waiting-to-closeIssue that is probably resolved, waiting on OP confirmation.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions