ko
/icons/hr.icon
https://gyazo.com/7b7ca66716f251c4cc1e792e94991900
this is ko’s page
/icons/hr.icon
UserScript
箇条書きのとき、カーソルが行頭になくてもTab / shift+tab で階層の上げ下げが出来るようにする
code:script.js
(() => {
$('#text-input').on('keydown', e => {
if (e.keyCode != 0x09) return true;
if ($('.cursor-line .code-block').length != 0) return true;
if ($('.cursor-line .table-block').length != 0) return true;
if ($('.popup-menu').length != 0) return true;
let keydown = document.createEvent('Events');
keydown.initEvent('keydown', true, true);
keydown.keyCode = e.which = (e.shiftKey ? 37 : 39);
keydown.ctrlKey = true;
$('#text-input')0.dispatchEvent(keydown); return false;
});
})();
右上のページメニュー
先頭まで一気にスクロールするボタン
//code:script.js
scrapbox.PageMenu.addMenu({
title: '先頭',
onClick: () => {
$("html,body").animate({scrollTop:$('.app').offset().top});
//$("html,body").animate({scrollTop:$('.project-home').offset().top});
}
})
関連ページのところまで一気にスクロールするボタン
code:script.js
scrapbox.PageMenu.addMenu({
title: '末尾',
onClick: () => {
$("html,body").animate({scrollTop:$('.related-page-sort-menu').offset().top});
}
})
開いているページの関連ページ(1 hop link)をランダムに表示する
//code:script.js
let cachedKeyword = null;
let cachedList = null;
let keywordDisplayElement = null; // 表示用要素の参照
// 関連ページリストを取得
async function getrefPagesList(title) {
const url = https://scrapbox.io/api/pages/${scrapbox.Project.name}/${title};
const response = await fetch(url);
if (!response.ok) throw new Error(${response.status} ${response.statusText});
const json = await response.json();
return json.relatedPages.links1hop;
}
// ページを表示
async function tempPageLink(link) {
await cosense.Page.show(link);
}
// 現在の対象キーワードを画面右下にリンク付きで表示
function displayCurrentKeyword(keyword) {
const projectName = scrapbox.Project.name;
if (!keywordDisplayElement) {
keywordDisplayElement = document.createElement('a');
keywordDisplayElement.style.position = 'fixed';
keywordDisplayElement.style.bottom = '20px';
keywordDisplayElement.style.right = '0px';
keywordDisplayElement.style.background = 'rgba(0, 0, 0, 0.6)';
keywordDisplayElement.style.color = '#fff';
keywordDisplayElement.style.padding = '6px 12px';
keywordDisplayElement.style.borderRadius = '8px';
keywordDisplayElement.style.zIndex = 9999;
keywordDisplayElement.style.fontSize = '14px';
keywordDisplayElement.style.textDecoration = 'none';
keywordDisplayElement.style.cursor = 'pointer';
//keywordDisplayElement.target = '_blank'; // 新しいタブで開く
document.body.appendChild(keywordDisplayElement);
}
const url = https://scrapbox.io/${projectName}/${encodeURIComponent(keyword)};
keywordDisplayElement.href = url;
keywordDisplayElement.textContent = 現在のキーワード: ${keyword};
}
// キーワード表示を消す
function clearKeywordDisplay() {
if (keywordDisplayElement) {
keywordDisplayElement.remove();
keywordDisplayElement = null;
}
}
// ランダムページに移動するメニュー
scrapbox.PageMenu.addMenu({
title: '関連ページをランダム表示', //ボタンのタイトル(変更可能)
onClick: async () => {
try {
if (!cachedKeyword || !cachedList) {
const keyword = cosense.Page.title;
if (!keyword || keyword.trim() === '') return;
cachedKeyword = keyword;
cachedList = await getrefPagesList(encodeURIComponent(keyword));
if (!cachedList || cachedList.length === 0) {
cachedKeyword = null;
cachedList = null;
alert(「${keyword}」の関連ページが見つかりませんでした。);
return;
}
displayCurrentKeyword(keyword);
}
const candidates = cachedList.filter(p => p.title !== cosense.Page.title);
if (candidates.length === 0) {
alert('遷移できるページがありません。');
return;
}
tempPageLink(randomPage.title);
} catch (e) {
alert('エラーが発生しました: ' + e.message);
}
}
});
// キーワードをリセットするメニュー
scrapbox.PageMenu.addMenu({
title: 'キーワードリセット', //ボタンのタイトル(変更可能)
onClick: () => {
cachedKeyword = null;
cachedList = null;
clearKeywordDisplay();
alert('キーワードをリセットしました。');
}
});
ポップアップボタン
Dynalist記法とMarkdownをScrapbox記法へ置換
//code:script.js
scrapbox.PopupMenu.addButton({
title: 'Dynalist', //"Dynalist" is the name of popup button.
onClick: text =>{
////Markdown////
////Hyperlink without linktext / Image without alt text
////Image with alt text
////Hyperlink with linktext
////Emphasis
//Bold
text=text.split(/\n/).map(line => line.replace(/\*\*(\*+|^*+)\*\*/g,'$1')).join('\n') //Italic
text=text.split(/\n/).map(line => line.replace(/\_\_(\_+|^_+)\_\_/g,'$1')).join('\n') ////Line strikethrough
text=text.split(/\n/).map(line => line.replace(/\~\~(\~+|^~+)\~\~/g,'$1')).join('\n') ////Date e.g. !(2019-09-11) or !(2019-09-11 10:00)////
text=text.split(/\n/).map(line => line.replace(/\!\((0-9{4}\-0-9{2}\-0-9{2}( 0-9{2}:0-9{2})*)\)/g,'$1')).join('\n') ////@ for hashtag////
//@ at the beginning of a line
text=text.split(/\n/).map(line => line.replace(/^(\s*)@/g,'$1#')).join('\n')
//@ at after a space
text=text.split(/\n/).map(line => line.replace(/( )@/g,'$1#')).join('\n')
////Latex e.g. $$E=mc^2$$////
text=text.split(/\n/).map(line => line.replace(/\$\$(^$$+)\$\$/g,'\$ $1')).join('\n') ////Each four indents in a item(=a line)////
text=text.split(/\n/).map(line => line.replace(/\s{4}/g,' ')).join('\n')
return text;
}
})
画像に枠線をつける
//code:script.js
scrapbox.PopupMenu.addButton({
title: 'IMG Border',
onClick: text =>{
text=text.split(/\n/).map(line => line.replace(/\[/g,'[| [')).join('\n')
text=text.split(/\n/).map(line => line.replace(/\]/g,']]')).join('\n')
return text;
}
})
その他
日付のフォーマット(alt+tで記入)
code:script.js
scrapbox.TimeStamp.addFormat('YYYY-MM-DD')
/icons/hr.icon
UserCSS
画像のサイズ変更
//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; }
縦に長い画像でも全体が見えるようにする
//code:style.css
.grid li.page-list-item a .icon img {
max-width: 100%;
max-height: 100%;
width: auto !important;
}
デフォルトで表示されるポップアップボタンの中で不要なものを非表示
code:style.css
div.italic-button,div.strike-button{display:none !important}/*イタリックと取り消し線*/
画像に枠線をつける(画像のサイズを変えると機能しない)
code:style.css
img.image, img.strong-image{border:solid 1px #ddd} 各ページ右上のメニューのアイコンの明度を変える
//code:style.css
img.extension-btn/*, div.dropdown button, a.random-jump-button*/{filter:invert(80%);/*filter: drop-shadow(0px 0px 10px #000);*/} ※img.extension-btnがユーザー設置のアイコン