code block class and wavedrom plugin

[madeinoz67]

Hi All,

I'm trying to get the mkdocs-wavedrom-plugin plugin working that renders wavedrom waveforms for some technical docs with materials (issue #2380).

What I'm seeing is that rendering a page with a wavedrom code block isn't working as it should and just sees it as general code block, this seems due to the fact that the code block is removing / not seeing the code class wavedrom therefore plugin is not processing the code and replacing the <pre> block with the relevant render script.

Can I override this at all?

```wavedrom
{ signal: [
  { name: "clk",  wave: "P......" },
  { name: "bus",  wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
  { name: "wire", wave: "0.1..0." }
]}
```

is being rendered as....

<div class="highlight"><pre><span></span><code>{ signal: [
  { name: "clk",  wave: "P......" },
  { name: "bus",  wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
  { name: "wire", wave: "0.1..0." }
  ]}
</code></pre></div>

[madeinoz67]

hmmm, ok making progress, looks like I need to create custom_fence for this class.

[squidfunk]

Yes, you'll need a custom fence, so Highlight won't push it through Pygments (syntax highlighting). Something like the following should do the trick:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: wavedrom
          class: wavedrom
          format: !!python/name:pymdownx.superfences.fence_code_format

This should wrap your sources in <pre class="wavedrom">...</pre> elements,w which you can then use to mount the plugin.

[madeinoz67]

Awesome will give it a go thanks