Hey! I’m trying to add a feature to a documentation website where a JavaScript version of each TypeScript code block is automatically generated, and the user can toggle between them.

The idea is that every TypeScript code block should be immediately followed by its automatically generated JavaScript equivalent. Then, I can hide one of them with CSS depending on which version the user wants to see.

I’m struggling to figure out how to manipulate the AST to achieve this. For internal reasons, I can’t use a Remark plugin, so I’d like to implement this as an Expressive Code plugin.

For example, given this input HTML (the figure and figcaption elements are added by the frames plugin):

<div class="expressive-code">
  <figure>
    <figcaption>...</figcaption>
    <pre data-language="ts">...</pre>
  </figure>
</div>

I want it transformed into this:

<div class="expressive-code">
  <figure>
    <figcaption>...</figcaption>
    <pre data-language="ts">...</pre>
  </figure>

  <figure>
    <figcaption>...</figcaption>
    <pre data-language="js">...</pre>
  </figure>
</div>

The second code block should behave exactly like any other Expressive Code block.

I’ve tried using the postprocessRenderedBlockGroup hook, where I have access to renderedGroupContents. However, I can’t figure out how to determine the position of each code block so I can insert the corresponding JS version.