図番号キャプション記法
図キャプションとして自動で「図1, 」を挿入する記法
キャプション:
[+ キャプションの中身 ] 直前の番号を参照:
[+ ] 後述のソースコードを直せば "直前" でなく "直後" にもできる
様子 ↓
LaTeX の図に使う
\label のような挙動つまり
[+ ] は \ref に準ずるここでは自動で「図1, 」などと入れているが、自動で入るのは数字のみにして、自分で「図」とか「表」とか入れてもよさそう
:before 疑似要素を使っているのでカーソル位置のレンダリングがちょっと狂ったりする data-caption 属性というのを追加したりするのでたまに元の挙動で消える(keydown/clickで復活するけど)何かもっと上手い方法があれば……
style.css/* 図番号のつくキャプション記法 */
.deco-\+:before {
content: attr(data-caption);
}script.js// 対象のエレメントが指定のクラス名を持つか
const isClassOf = (elem, className) => {
const elemClassName = elem.getAttribute('class')
if (elemClassName) {
return elem.getAttribute('class').split(' ').some(c => c.match(new RegExp(className)))
}
return false
}
// 対象のエレメントがカーソルのある行かどうか
const isInCursorLine = elem => {
let parent = elem.parentNode
while (!isClassOf(parent, 'line')) {
parent = parent.parentNode
}
if (isClassOf(parent, 'cursor-line')) {
return true
}
return false
}
// 図のキャプションに図番号を振る
// 中身が空 `[+ ]` のとき、直前の図番号を参照する
const setFigureNumber = () => {
[0, ...Array.from(document.getElementsByClassName('deco-+'))].reduce((index, cap) => {
if (Array.from(cap.querySelectorAll('span')).every(s => !s.innerHTML.match(/[^\s\[\+\]]/))) {
// ここの `${index}` を `${index + 1}` にすれば直後を参照する
cap.setAttribute('data-caption', `${index}`)
return index
}
cap.setAttribute('data-caption', `図${index + 1}, `)
return index + 1;
})
}
setFigureNumber()
document.addEventListener('keydown', setFigureNumber)
document.addEventListener('click', setFigureNumber)