settings

スクリプト

参考

白いScrapbox

code:style.css

@import "/api/code/madobes/settings/style.css";

/icons/水平線.icon

テーブルのセルをわかりやすくする

code:style.css

/* テーブルのセルをわかりやすくする */

.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }

.table-block table tr td { padding: .1em; background-color: rgba(0,0,0,0.04) }

.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) }

.table-block table tr:first-child td { font-weight: bolder; text-align: center }

.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }

/icons/hr.icon

/icons/hr.icon

ピン

code:style.css

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

/icons/水平線.icon

しおり記法

code:style.css

/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */

@media screen {

.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 } }

/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */

a#Bookmarks.tool-btn:hover { text-decoration: none }

a#Bookmarks.tool-btn::before {

position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }

a#Bookmarks.tool-btn img { opacity: 0 }

code:script.js

const __bkmClass = '.deco-\\.' /* ここで記法のセレクタを設定してね。デフォルトはドットです */

const __bkmMenuTitle = 'Bookmarks'

scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: 'dummy.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)

}

})

})

}

})

以上 しおり記法

/icons/水平線.icon

Scrapbox内検索

code:script.js

// 選択された文字列をScrapboxプロジェクト内で検索する

// Scapbox検索ボックスを使ったときと同じ結果ページを開く

scrapbox.PopupMenu.addButton({

title: 'スクボ内検索',

onClick: function (text) {

var projectName = 'tdl';

}

});

/icons/水平線.icon

フォント

code:style.css

body {

font-family: '游明朝体','YuMincho','游明朝','Yu Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','Times New Roman', serif;

}

.editor, .stream, li.page-list-item {font-family: unset !important;}

/icons/水平線.icon

背景色

code:style.css

body {

}

/icons/水平線.icon

文字数カウンター

code:style.css

/* カウンターのスタイル */

cursor: pointer; font: 88%/1 monospace;

opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */

transition: opacity .2s ease-out }

/* ポップアップのスタイル */

z-index: 30; position: absolute; bottom: 2em; right: -1em;

transition: opacity .3s ease-out }

/* プレゼンモードのときは非表示にする */

code:script.js

const __appliedProject__ = scrapbox.Project.name

const __charCounterSetup__ = setInterval(function() {

// ページが準備できるのを待ちたいので、スクリプトがロードされてから3秒くらいしたら処理開始↓↓

if (document.getElementById('editor') && scrapbox.Page.lines)

clearInterval(__charCounterSetup__)

else

return // ページの準備ができてないときはまた3秒待つ

// 下準備

const $id = id => document.getElementById(id)

const $query = q => document.querySelector(q)

const fmt = n => new Intl.NumberFormat('en-US').format(n).padStart(6)

// 文字数カウンター表示用のエレメントを作ってく

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

var counterWrapper = document.createElement('div')

counterWrapper.id = '__charCounter__'

'<pre id="__charCounterPopup__" style="opacity:0"></pre>'

$id('editor').appendChild(counterWrapper)

const counter = $query('#__charCounter__ span')

const popup = $id('__charCounterPopup__')

// 文字数カウンターにマウスカーソルを乗せたときに詳細をポップアップする

counter.addEventListener('mouseover',

function() {

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

const words = linesText.split(/\s+/).length

${fmt(scrapbox.Page.lines.length)} lines

popup.style.opacity = 1

})

// 文字数カウンターからマウスカーソルが離れたら詳細ポップアップを見えなくする

counter.addEventListener('mouseout', function() { popup.style.opacity = 0 })

// 文字数のみを数え直す関数

const updateCounter = function() {

if ($query('.presentation')

|| scrapbox.Project.name !== __appliedProject__) {

// プレゼンモードになってたり、よそのプロジェクトを表示してたら文字数カウンターを非表示にする

counterWrapper.style.display = 'none'

} else if (scrapbox.Page.lines) {

// ここで数え直ししてます

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

counterWrapper.style.display = 'block'

}

}

// 数え直すタイミングは、テキスト入力時とペースト時

$id('text-input').addEventListener('input', updateCounter)

$id('text-input').addEventListener('paste', updateCounter)

// 何もしなくても3秒ごとに数え直す

setInterval(updateCounter, 3000)

}, 3000)

/icons/水平線.icon

code:style.css

/* はりつくメニューバー */

@media screen and (min-height: 600px) and (min-width: 768px) {

.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }

.app:not(.presentation) .page-menu { position: fixed; top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu {

position: absolute; left: auto; top: auto;

max-height: calc(100vh - 100px); overflow-y: auto }

.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }

.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }

@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {

/*html, body { -webkit-overflow-scrolling: touch }*/

.app:not(.presentation) { padding-top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto } }

/icons/水平線.icon

/icons/水平線.icon

Tweet

code:script.js

scrapbox.PageMenu.addItem({

title: 'Tweet',

})

/icons/hr.icon

code:style.css

/* ＃で始まるタグをラベル風にする */

display: inline-block;

padding: 2px 8px;

margin: 0 8px 10px 0;

font-size: 0.8em;

border-radius: 3px;

/* transition: .3s; */

-webkit-transform: scale(1);

transform: scale(1);

}

}

/icons/hr.icon

/icons/hr.icon

強調－オレンジ

code:style.css

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

/icons/hr.icon

上付き文字

code:style.css

.deco-\" {

font-size: 50%;

vertical-align: top;

position: relative;

top: -0.2em;

}

/icons/hr.icon

/icons/hr.icon

ソートする

code:script.js

scrapbox.PopupMenu.addButton({

title: 'ソート',

onClick: text => {

const re = /^(\s*)/

const lines = text.split(/\n/)

let sorting = [], chLines = []

for (var i = 0; i < lines.length; i++) {

if (0 < chLines.length) chLines.unshift('')

sorting.push(line + chLines.join('@n@'))

chLines = []

}

return sorting.sort().join('\n').replace(/@n@/g, '\n')

}

})

/icons/hr.icon

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) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

/*

*/

/icons/hr.icon

/icons/hr.icon

文字の位置揃えをする

センタリング

/icons/hr.icon

右寄せ

/icons/hr.icon

code:style.css

/* 中央寄せ */

.deco-\< { position: absolute; width: 100%; text-align: center }

/* 右寄せ */

.deco-\> { position: absolute; width: 100%; text-align: right }

/icons/hr.icon

code:script.js

scrapbox.PopupMenu.addButton({

title: 'format',

onClick: text => text.split('\n').map(function(line) {

return line.replace(/^\s*/g, s => s.replace(/\s/g, '\t'))

.replace('（', '(')

.replace('）', ')')

.replace(/\)\S/g, s => ') ' + s.charAt(1))

}).join('\n')

})

/icons/hr.icon

code:style.css

.deco-\) ,

.dropcap:first-letter {

font-size: 64px;/*文字の大きさ*/

margin-right: 6px;

margin-top: 6px;

float: left;

line-height: 1;

}

/icons/hr.icon