Process eleventy shortcodes in markdown-rendered FrontMatter data

Question

I'm using 11ty with Decap CMS for a client webiste.

I have several front-matter fields to add markdown content (I need to add Markdown content to boxes in several locations) .

I render the markdown content using a markdown-it filter. This is working very well.

However I also implemented shortcodes, for example to add YouTube iframes within the markdown. The shortcode render without a problem when they are in the markdown body, but not if they are in the front matter.

How to make sure they are rendered too?

CURRENT SETUP

.eleventy.js

// my youtube shortcode 


    //YouTube embed 
    eleventyConfig.addNunjucksShortcode("youtube", (classes, videoURL, title, caption) => {
        const url = new URL(videoURL);
        const id = url.searchParams.get("v");
        var caption= mdSetup.render(caption);
 
        return `
        <figure class= "${classes}">
        <iframe src="https://www.youtube-nocookie.com/embed/${id}" title="${
          title ? ` for ${title}` : ""
        }" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope;  web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        <figcaption class="caption">
        <span class="wrapper">${caption}</span>
        </figcaption>
        </figure>
        `;
      });

// to process markdown 
 eleventyConfig.addFilter("in_markdownify", (markdownString) =>
        mdSetup.renderInline(markdownString)
    );

My .md file with YAML front matter

---
title: Testing Image Compression
layout: layouts/banners.njk
banners:
  - bg:
      - label: White Background / Purple text
        name: whitebg
    imgstyle:
      - label: Green text / Purple Shadow
        value: img-green
    id: banner1
    boxes:
      - type: dc-box
        left: Test
        right: >
          {% youtube "Class" , "https://www.youtube.com/watch?v=JC7MNybwnTA" , "Comment" , "Caption" %}

          
          ## MARKDOWN
---

template .njk

<div class="doublec-box text">

        <div class="leftc">
     {{ box.left | markdownify | safe}}
        </div>
        <div class="rightc">
     {{ box.right | markdownify | safe}}
   
        </div> 

</div>

My html output

<div class="doublec-box text">
  <div class="leftc">
     <p>Test</p>
  </div>
  <div class="rightc">
     <p>
     {% youtube “undefined” , “<a href="https://www.youtube.com/watch?v=JC7MNybwnTA">https://www.youtube.com/watch?v=JC7MNybwnTA</a>” , “Dead White man’s Clothes x Atmos” , “” %}
     </p>
     <h2 id="markdown" tabindex="-1">MARKDOWN</h2>
  </div> 
</div>
 

My expected output: rendered shortcode into youtube iframe

<p><figure class= "undefined">
<iframe src="https://www.youtube-nocookie.com/embed/JC7MNybwnTA" title=" title" frameborder="0" allow="accelerometer;  clipboard-write; encrypted-media; gyroscope;  web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<figcaption class="caption">
<span class="wrapper"></span>
</figcaption>
</figure></p>

Answer 1

@zachleat (11ty maintainer) created an improvement of the Render Plugin that does what I wanted: follow here Ships in 11ty 3.0