【JavaScript】注釈・脚注を補完する「AutocompleteAnnotations」

2014/06/12JavaScriptTipsしぐれ

注釈・脚注を補完するスクリプト「autocompleteAnnotations」を書いた。

ブログを書いていると【1】のように注釈や脚注を付けたい時がある。しかし、一々ハッシュリンク貼ったりa要素のtitle属性に内容を書いたりするのは面倒くさいので自動化する。以下サンプル

See the Pen AutocompleteAnnotations by shigure (@webkatu) on CodePen.

使い方

「autocompleteAnnotations.js」をdefer属性をつけて呼び出し、注釈部分の要素に「class=”annotations”」という属性をつけて、説明部分の要素に「class=”footnotes”」という属性をつければOK。

<head>
	<!-- defer属性をつけてscriptを呼び出す -->
	<script defer src="autocompleteAnnotations.js"></script>
</head>
<body>
	<!-- 注釈部分を"annotations"というclass名の要素で囲む -->
	<p>hogehoge<span class="annotations">【1】</span></p>
	<p>fugafuga</p>
	<!-- 説明部分(脚注)を"footnotes"というクラス名の要素で囲む -->
	<p class="footnotes">piyopiyo</p>
</body>

<head>
	<script defer src="autocompleteAnnotations.js"></script>
</head>
<body>
	<p>hogehoge<span class="annotations"><a id="annotation0" href="#footnote0" title="piyopiyo">【1】</a></span></p>
	<p>fugafuga</p>
	<p class="footnotes"><a id="footnote0" href="#annotation0">【1】</a>： piyopiyo</p>
</body>

コメントを残すコメントをキャンセル