しおり記法
せっかく拡張装飾記法ができたので、「UserScriptと組み合わせて動く」系の記法ができないかな？ と思って作ってみたよ！
元々は、みんな知ってるshokaiさん/shokai/shokai.iconとdaiizさん/daiiz/daiiz.iconの
/shokai/ページの見出しを作るUserScript ←ここと
/daiiz/ページの見出しを作るUserScript ←ここを見て
madobe.iconこんなことできるんだすげー！！ ってなって、ずっとカスタマイズしてみたいと思ってたんで
「記法で任意の箇所に栞をはさむ」と、「ページメニューから栞の場所にジャンプできる」
って感じにしてみた！名付けてしおり記法。
↓しおり記法の記号はドット.にしてみたよ。
[. しおりでございま～す！]
しおりでございま～す！ ←ページ幅に余裕があるときは行頭に栞マークが出る。狭いときは栞箇所の右に出る。
スタイル不要な人は設定しなくてもOK。
印刷時は栞マークは意味ないので出ないです。
行全体を囲む必要はない。
それから、ページ内の栞一覧を出すページメニューを追加！ クリックすると栞箇所までスクロール！
https://gyazo.com/c3b5f86fe83fbadc25669782cbc6e4df
これで、文の途中だろうがアウトラインの中だろうが、好きなところに好きな文字列でジャンプできるようになった！
つかいかた
これはUserCSSとUserScript両方の設定が必要なので、どっちもユーザーのページにスクリプト追加してね。
code:style.css
/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */
@media screen {
.app:not(.presentation) .line .deco-\. { background-color: #F5FAEA }
.app:not(.presentation) .line .deco-\.::after {
position: absolute; top: 3px; left: -1.4em;
content: '\f02e'; font: 900 1.7rem/1 'Font Awesome 5 Free'; color: yellowgreen } }
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
button#Bookmarks.tool-btn:hover { text-decoration: none }
button#Bookmarks.tool-btn::before {
position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }
button#Bookmarks.tool-btn img { opacity: 0 }
code:script.js
const __bkmClass = '.deco-\\.' /* ここで記法のセレクタを設定してね。デフォルトはドットです */
const __bkmMenuTitle = 'Bookmarks'
scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: '/assets/img/logo.png',
onClick: function() {
const __fixedHeaderHeight = ($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0) +
($('.navbar-pagemenu').height() || 0)
scrapbox.PageMenu(__bkmMenuTitle).removeAllItems()
$(__bkmClass).closest('.line').each(function(i, e){
scrapbox.PageMenu(__bkmMenuTitle).addItem({
title: $(e).find(__bkmClass).text(),
onClick: function() {
$('html,body').animate({
scrollTop: $(e).offset().top - $('body').offset().top - __fixedHeaderHeight
}, 150)
}
})
})
}
})
#記法とあそぶ
初出 2017-11-04
2018-05-16 プレゼンモード回避用にCSSを修正
2018-06-17 ページメニューのボタンサイズを微調整
2019-04-18 ボタン表示位置がずれてたのを直したつもり
2021-07-06 Font Awesome のアップデートに対応
2021-08-12 ページメニューボタンのスタイルを修正
2023-03-27 ページメニューボタンのスタイルを修正