引子

WaveDrom可以根据特定指令生成时序/波形图（SVG/PNG），并且也可以在浏览器中运行。同时也提供了在线编辑器、教程、教程2。

绘制波形

（不建议这样使用，存在很多问题）WordPress中有一个简码（shortcode）功能，能调用特定的函数，因此我们使用简码来包装WaveDrom，为了方便使用，我们使用插件来创建WaveDrom简码。首先创建文件夹wp-content/plugins/wavedrom，并在该文件夹下创建一个wavedrom-shortcode.php文件：

<?php
/*
Plugin Name: WaveDrom Shortcode
Description: A simple plugin to embed WaveDrom diagrams using a shortcode.
Version: 1.0
Author: hadongzhu
*/

function wavedrom_shortcode($atts, $content = null) {
    // Enqueue WaveDrom script only once
    wp_enqueue_script('wavedrom', 'https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.2.0/wavedrom.min.js', array(), '3.2.0', true);
    wp_enqueue_script('wavedromskin', 'https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.2.0/skins/default.js', array('wavedrom'), '3.2.0', true);

    // Remove automatic <p> and <br> tags added by WordPress
    $content = shortcode_unautop($content);
    // Decode HTML entities in the content
    $decoded_content = html_entity_decode($content);
    // Remove <br> tags
    $cleaned_content = str_replace(array('<br>', '<br/>', '<br />', '</p>', '<p>'), '', $decoded_content);
    $cleaned_content = str_replace(array('“', '”', '‘', '’'), '"', $cleaned_content);
    $cleaned_content = str_replace(array('…'), '...', $cleaned_content);
    // Sanitize content to avoid security issues
    $safe_content = wp_kses_post($cleaned_content);

    // Output the WaveDrom container and script
    ob_start();
    ?>
    <script type="WaveDrom">
    <?php echo $safe_content; ?>
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            WaveDrom.ProcessAll();
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wavedrom', 'wavedrom_shortcode');
?>

需要注意，简码的内容会被转码，在代码中需要进行解码和转换。在插件界面启用此插件，即可在简码中使用：

[wavedrom]
{ signal : [
  { name: "clk",  wave: "p......" },
  { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
  { name: "wire", wave: "0.1..0." },
]}
[/wavedrom]

直接使用『自定义HTML』：

<script type="WaveDrom">
{ signal : [
  { name: "clk",  wave: "p......" },
  { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
  { name: "wire", wave: "0.1..0." },
]}
</script>

对应的效果为：

在使用pjax刷新时可能导致无法正常引入相应的js文件，这需要在全局引用对应js文件，并在pjax加载的时候调用WaveDrom.ProcessAll();：

<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/wavedrom/3.2.0/wavedrom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.2.0/skins/default.js"></script>
<script type="text/javascript">
    window.pjaxLoaded = function () {
        WaveDrom.ProcessAll();
    };
    document.addEventListener('DOMContentLoaded', function () {
        WaveDrom.ProcessAll();
    });
</script>

这样做会导致页面中不存在WaveDrom也会映入对应的js文件。

其他

本来想让WaveDrom能够自动切换黑暗模式，但是发现这样做很麻烦，最简单的方法还是直接在黑暗模式下加个滤镜反转颜色：

filter:invert(1)

对于波形图太宽超过容器并且没有居中的问题可以使用以下css解决：

    .WaveDrom {
        max-width: 100%;
        height: auto;
        display: block;
        margin: auto auto;
    }