Jekyllの記事にJavaScriptを書く

kramdownにはHTMLだけじゃなくてJavaScriptもそのまま書けるんだ。

例えば、下記のようなフォームとコードを原稿に直書きしておくと、上記のように実行できるようです。Jekyllはページをビルドする時にLiquidテンプレートエンジンを適用するので、HTMLやJavaScript中にLiquidのタグが現れる場合にはrawタグで囲むなどの注意が必要かもしれません。

<p>
<form id="form">
<input type="text" id="src" placeholder="元の文字列" />に
<select id="mark">
<option value="full" selected>濁点</option>
<option value="half">半濁点</option>
</select>を<button>くっつける</button>と
<input type="text" id="dst" placeholder="こうなる" />
</form>
</p>
<script>
const form = document.getElementById("form");
const mark = document.getElementById("mark");
const src = document.getElementById("src");
const dst = document.getElementById("dst");
function convert(event) {
  event.preventDefault();
  var m = "\u3099";
  if (mark.value == "half") { m = "\u309A"; }
  dst.value = Array.from(src.value).map((c) => c + m).join("");
}
form.addEventListener("submit", convert);
</script>