TL;DR

Reverse markdown code blocks is helpful when you need to edit a card's code.

If you're using npm data-code-reverse it's wise to remove the sourceCode class. -raw_html should get rid of all style attributes, but it doesn't for some reason. Don't ask me why!¹

Reverse-compiling code blocks

Currently the npm run data-code-reverse command goes from this:

<div class="sourceCode" id="cb1"><pre
  class="sourceCode python"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>residents <span class="op">=</span> {<span class="st">&#39;Puffin&#39;</span> : <span class="dv">104</span>, <span class="st">&#39;Sloth&#39;</span> : <span class="dv">105</span>, <span class="st">&#39;Burmese Python&#39;</span> : <span class="dv">106</span>}</span>
...
</code></pre></div>

to this:

::: {#cb1 .sourceCode}
``` {.sourceCode .python}
residents = {'Puffin' : 104, 'Sloth' : 105, 'Burmese Python' : 106}

print(residents['Puffin'])
...
:::

Which compiles back into .html reasonably well, but feels a bit wrong. Adding -t gfm-raw_html (output type "Github Flavoured Markdown" with raw html disabled) gives us something closer to raw Markdown code blocks:

``` sourceCode
residents = {'Puffin' : 104, 'Sloth' : 105, 'Burmese Python' : 106}

print(residents['Puffin'])
print(residents['Sloth'])
...

The caveat is that this will break formatting if you try to add (a) a language like ```python sourceCode to the back-ticks; strangely enough (b) ``` sourceCode will output nicely, but (a) is produces some funky code.

Any ideas?

If you want to play around with Pandoc's filters, you can pandoc --list-extensions=gfm to see what's available.