Access a template's content/markup with the relevant template data file?

[kachunchau]

Hey there, sorry if this is a silly question. I have a standard template file eg: example.html and in it I have some HTML markup, the content is kinda like:

<article>
  <h1>Hello</h1>
  <code>Some code</code>
  <p>World</p>
</article>
<aside>
  <p>Content</p>
</aside>

Is there a way to access the article content/markup, run a function and then return it in the template data file example.11tydata.js with something like this?

const highlightCode = require('../../_11ty/_utils/highlightCode.js');

module.exports = (content) => {  
    let article = content.querySelector('article');  
    return highlightCode(article);
}

[pdehaan]

You could potentially use a custom transform and parse the final HTML using something like cheerio.

Or else a paired shortcode if you can edit the HTML. Something like…

{% article %}
  <h1>Hello</h1>
  <code>Some code</code>
  <p>World</p>
{% endarticle %}
<aside>
  <p>Content</p>
</aside>

Where the custom {% article %} shortcode calls your highlightCode.js function and wraps the result in an <article> tag (or something).