hitsujimochi
https://lh3.googleusercontent.com/a-/AOh14Ghnr19oFFve1thP24XgnpMUN0bNXq6Zn-aCMDQcrak=s96-c#.png
this is hitsujimochi’s page
code:script.js
function getHtml (dateString) {
return '<span class="page-last-update" style="position: absolute; bottom: -28px; right: 0; color: #888;">Last updated on: ' + dateString + '</span>' }
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(1).attr('title')
if ($('.page-last-update').length > 0) {
$('.page-last-update').text('Last updated on: ' + dateString)
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime()
popclipと干渉しない様にする
code:script.js
if (/Macintosh/.test(navigator.userAgent) && !/Porter/.test(navigator.userAgent)) {
setTimeout(() => {
const observer = new MutationObserver(records => {
for (const record of records) {
for (const node of record.addedNodes) {
if (node.getAttribute('class') !== 'selections') {
continue;
}
const popup = node.getElementsByClassName('popup-menu')0; if (!popup) return;
popup.style.top = (() => {
const selectionList = document.getElementsByClassName('selection');
let lowestSelection = selectionList0; const length = selectionList.length;
if (length !== 1) {
for (let i = 1; i < length; i++) {
if (parseInt(selectionListi-1.style.top) < parseInt(selectionListi.style.top)) { lowestSelection = selectionListi; }
}
}
return (parseInt(lowestSelection.style.top) + parseInt(lowestSelection.style.height) + popup.clientHeight + 25) + 'px';
})();
const triangleStyle = popup.getElementsByClassName('triangle')0.style; triangleStyle.borderTop = 'none';
triangleStyle.borderBottom = '6px solid #111'; triangleStyle.top = '-6px';
break;
}
}
});
observer.observe(document.getElementById('editor'), { childList: true });
}, 2000);
}
popclip的なやつにハイライトを追加する
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: '強調',
onClick: text => [! ${text}]
})
popclip的なやつに
見出し
code:script.js
scrapbox.PopupMenu.addButton({
title: '見出し',
onClick: text => [#* ${text}]
})
行頭に引用符を付けるpop
code:script.js
scrapbox.PopupMenu.addButton({
title: '引用',
onClick: text => text.split(/\n/).map(line => > ${line}).join('\n')
})
画像にキャプションを付けるpop
code:script.js
scrapbox.PopupMenu.addButton({
title: 'キャプション',
onClick: text => [" ${text}]
})
文字列をscrapbox内で検索する
code:script.js
// 選択された文字列をScrapboxプロジェクト内で検索する
// Scapbox検索ボックスを使ったときと同じ結果ページを開く
scrapbox.PopupMenu.addButton({
title: 'スクボ内検索',
onClick: function (text) {
var projectName = 'daiiz';
}
});
popclip的なやつに太字を追加する
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: '太字',
onClick: text => [* ${text}]
})
scrapbox.PopupMenu.addButton({
title: 'もっと太字',
onClick: text => [** ${text}]
})
行頭に引用符を付ける
//code:script.js
scrapbox.PopupMenu.addButton({
title: 'quote',
onClick: text => text.split(/\n/).map(line => > ${line}).join('\n')
})
基本の記法は|（パイプ、縦線）で、[| ここに画像URLを並べる] こんな感じに書けます。
太字記法のアスタリスクの数で列数を変えられるようにしてみた。
一行に敷き詰め [| [画像URL][画像URL][画像URL]…]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } [*** [画像のURL]]
という記法で画像の表示サイズを変えられるようにするUserCSSです。 記法の*の数と
cssの.level-xxのxxの部分
が対応しています。
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }