wavedrom

目的

Web 上にディジタル波形を描画できるようになるJavascript ライブラリを導入する。

Hatena Blog 上で使えることの確認

記事の編集はMarkdown で行っているが、直接 HTML タグを埋め込めるので記述できる。

表示

一時的に非表示

ソース

直接以下の記述を記事内に書いている。 4つある script タグのうち、最後の記述が波形の内容で、それ以外は一回書けば大丈夫なはず。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.3.0/wavedrom.min.js" type="text/javascript"></script>

<script type="text/javascript">
window.onload = WaveDrom.ProcessAll;
</script>

<script type="WaveDrom">
{ signal: [
  { name: "clk",         wave: "p.....|..." },
  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}
</script>

他の記事でも利用する場合

一つの記事だけなら上記のようにその場で読みこめば良いが、 複数の記事で共通して使うならはてなブログのデザイン設定でタイトル下に入れ込んでしまうのが良いと思う。