settings

スクリプト

参考

白いScrapbox

code:style.css

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

しおり記法

code:style.css

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

@media screen {

.app:not(.presentation) .line .deco-\.::after {

position: absolute; top: 3px; left: -1.4em;

content: '\f02e'; font: 1.7rem/1 'FontAwesome'; 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; left: calc(46px/3); content: '\f097'; font: 20px/46px 'FontAwesome' }

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

/icons/水平線.icon

文字列を選択してScrapbox内検索

code:script.js

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

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

scrapbox.PopupMenu.addButton({

title: 'スクボ内検索',

onClick: function (text) {

var projectName = '221B';

}

});

/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

/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 {