settings
settings
https://gyazo.com/0936d68b12c9fcbd94be0ac2abac4322
UserScripts
ピン止めのページだけ独立させる
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code: style.css
/* 行間調整 */
.line .section-0{
line-height: 2.0em !important;
}
文字の位置揃えをする]
俺がセンタリングだ！
俺が右寄せだ！
俺が左寄せだ！
code:style.css
/* 中央寄せ */
.deco-\| { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.deco-\< { position: absolute; width: 100%; text-align: left }
リンクをわかりやすくする]
/scrasobox/settings#59c9c7c996b9040000063c35 をカスタマイズ
外部リンクは https://www.google.co.jp/ のようにする
code:style.css
/* External links */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
フォントを変える
code:style.css
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');
.editor, .stream {
font-family: 'MORISAWA PASSPORT', sans-serif;
}
code: script.js
(function(){
// 文字の大きさ デフォルト値は '15px'
const fontSize = '20px';
// 行の高さ デフォルト値は '27px'
const lineHeight = '27px';
function addNewStyle(cssString, id) {
const elemById = document.getElementById(id);
if (elemById) {
elemById.innerHTML = cssString;
} else {
const style = document.createElement('style');
style.innerHTML = cssString;
style.setAttribute('id', id);
document.head.appendChild(style);
}
}
const cssString = `
.editor {
font-size: ${fontSize} !important;
line-height: ${lineHeight} !important;
}
`;
addNewStyle(cssString, 'custom-editor-font-size-style');
})();
［**　］<-これを見出し風にする
code:style.css
/* ** <ーこれを見出し風にする */
.line strong.level-2{
display: block;
position: relative;
font-size: 200%;
line-height: 160%;
text-align: center;
margin: 12px auto 18px;
font-weight: 100;
}
.line strong.level-2:after{
position: absolute;
content: '';
border-bottom: 3px solid #ffeb36;
width: 100px;
top: 0;
bottom: -0.5em;
left: 0;
right: 0;
margin: 0 auto;
}
［*　］<-これに蛍光のラインを足す
code:style.css
/* * <ーこれに蛍光のラインを足す */
.level-1{
background: linear-gradient(transparent 60%, #ffeb36 60%);
}
code:style.css
/* *** <-これを小見出しに */
.line strong.level-3{
display: block;
position: relative;
padding-left: 16px;
}
.line strong.level-3:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
top: 0;
left: 0;
background: #ffeb36;
}
文字数カウントメニュ
code:script.js
scrapbox.PageMenu.addItem({
title: () => {
if (!scrapbox.Page.lines) return
const chars = scrapbox.Page.lines.map(line => line.text.length).reduce((a,b) => a + b)
const words = scrapbox.Page.lines.map(line => line.text.split(/\s+/).length).reduce((a,b) => a + b)
return ${chars}文字 ${words}単語 ${scrapbox.Page.lines.length}行
},
onClick: () => null
})
文字カウントポップアップ
code:script.js
scrapbox.PopupMenu.addButton({
title: function (text) {
const chars = text.replace(/\r\n/g, '').length
const words = text.trim().split(/\r\n\s+/).length
return ${chars}c ${words}w
},
onClick: () => null
})
日付書式
code:script.js
// Formats: https://momentjs.com/
scrapbox.TimeStamp.addFormat("]YYMMDD[ HH:mm:ss")
scrapbox.TimeStamp.addFormat("]YYYY/MM/DD[")
選択範囲に引用符をつける
code:script.js
scrapbox.PopupMenu.addButton({
title: 'quote',
onClick: text => text.split(/\n/).map(line => > ${line})
/shokai/行頭に引用符を付けるUserScript
これで日本語も引用可能です。
見える文字数カウンター/scrasobox/見える文字数カウンター
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__'
counterWrapper.innerHTML = <span>${fmt(chars)} chars</span> +
'<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
popup.innerHTML = ${fmt(chars)} chars\n +
${fmt(words)} words\n +
${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
counter.innerText = ${fmt(chars)} chars
counterWrapper.style.display = 'block'
}
}
// 数え直すタイミングは、テキスト入力時とペースト時
$id('text-input').addEventListener('input', updateCounter)
$id('text-input').addEventListener('paste', updateCounter)
// 何もしなくても3秒ごとに数え直す
setInterval(updateCounter, 3000)
}, 3000)
選択文字列をプロジェクト内で検索ポップアップ
code:script.js
// 選択された文字列をScrapboxプロジェクト内で検索する
// Scapbox検索ボックスを使ったときと同じ結果ページを開く
scrapbox.PopupMenu.addButton({
title: 'SB内検索',
onClick: function (text) {
var projectName = 'shio';
window.open('https://scrapbox.io/'+ projectName +'/search/page?q=' + text);
}
});
Gyazoに飛ぶメニュウの追加
code:script.js
scrapbox.PageMenu.addMenu(
{title:"Gyazo",
image:"https://gyazo.com/apple-touch-icon.png",
onClick:function(){location="https://gyazo.com"}
})
全角半角変換メニュ
1. 箇条書きの先頭を全てTabに置き換える
2. 文中の全角・半角空白を取り除く
3. 文字化けを修正する (今回は での を での に直す)
4. 全角英数字を半角英数字に置き換える
5. 全角括弧を半角括弧に置き換える
6. 括弧で囲まれた前後に空白を入れる
7. コードブロック記法の前後に空白を入れる
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(/ 　/g, '')
.replace(/ぁ-ん|ァ-ヴ゙/g, s => String.fromCharCode(s.charCodeAt(0) + 1))
.replace(/Ａ-Ｚａ-ｚ０-９/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
.replace('（', '(')
.replace('）', ')')
.replace(/\S\(/g, s => s.charAt(0) + ()
.replace(/\)\S/g, s => ') ' + s.charAt(1))
.replace(/\S.*/g, s => s.charAt(0) + ' ' + s.slice(1))
.replace(/.*\S/g, s => s.slice(0, -1) + ' ' + s.slice(-1))
}).join('\n')
})
箇条書きナンバリング
code:script.js
scrapbox.PopupMenu.addButton({
title: 'No.',
onClick: text => text.split(/\n/).map((line, index) => ${index+1}. ${line}).join('\n')
})
Zen Mode /scrasobox/禅モード (Zen mode)
code:script.js
scrapbox.PageMenu.addItem({
title: 'Zen mode',
onClick: (e) => {
var bg = 'white' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）
var style = document.getElementById('__zen__')
if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }
else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'
var css = body, .page { background-color:${bg} !important; background-image:none !important } +
'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'
style = document.createElement('style')
style.setAttribute('id', '__zen__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})
太字に色をつける
strong要素に文字色をつける
code:style.css
.line strong {
color: #009999;
}
マーカーで文字の背景を塗る
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)
}
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: 'マーカー',
onClick: text => [[${text}]]
})
黄色：#ffe54f
緑色：#abff4f
薄い緑色：#bfff00
フキダシを指定する
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
吹き出し
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #5d6966;
padding: 0.3em 0.2em 0.3em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
左吹き出し
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #5d6966 transparent;
}
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #5d6966 transparent;
}
赤吹き出し
code:style.css
.deco-\! {
background-color: #ee6666;
}
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
吹き出し内のリンク色
code:style.css
.deco-\{ a,
.deco-\} a {
color: #87CEEB;;
}
太字に色をつける
strong要素に文字色をつける
code:script.js
scrapbox.PopupMenu.addButton({
title: '📕',
onClick: text => text.split('\n').map(line => [! ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📙',
onClick: text => text.split('\n').map(line => [% ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📗',
onClick: text => text.split('\n').map(line => [# ${line}]).join('\n')
})
scrapbox.PopupMenu.addButton({
title: '📘',
onClick: text => text.split('\n').map(line => [~ ${line}]).join('\n')
})
code:style.css
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
code:style.css
/* 「 で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/li9ri9/%E3%80%8C":not(.icon) {
color: #000 ;
background-color: #d8d8d8;
}
.line ahref^="/li9ri9/%E3%80%8C":not(.icon):after {
border-color: #d8d8d8 transparent;
}
モノローグ用吹き出し
code:style.css
/* ( で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/li9ri9/(":not(.icon), .line ahref^="/li9ri9/(":not(.icon):before, .line ahref^="/li9ri9/(":not(.icon):after {
background-color: #a0a0a0;
}
.line ahref^="/li9ri9/(":not(.icon) {
color: #FFF !important;
padding: 6px 7px 6px 7px;
border-radius: 17px;
}
.line ahref^="/li9ri9/(":not(.icon):before {
top: 10px;
left: -6px;
width: 12px;
height: 8px;
border-radius: 8px;
border-style: hidden;
}
.line ahref^="/li9ri9/(":not(.icon):after {
top: 7px;
left: -12px;
width: 6px;
height: 4px;
border-radius: 8px;
border-style: hidden;
}
.line.cursor-line ahref^="/li9ri9/(":not(.icon){
background-color: #a0a0a0;
color: #000 ;
}
.line.cursor-line ahref^="/li9ri9/(":not(.icon):before {
all:initial;
}
LINE風吹き出し
code:style.css
/* < で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/li9ri9/%3C":not(.icon) {
color: #FFF ;
background-color: #17ce61;
}
.line ahref^="/li9ri9/%3C":not(.icon):after {
border-color: #17ce61 transparent;
}
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: 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 }
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)
}
})
})
}
})
箇条書きを控えめにする
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
アイコンを大きくする
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em }
アイコンをもっと大きくする
code:style.css
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 7em; height: auto }
タグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
ピンの形を変える
code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'FontAwesome'; font-size: 20px; color: #8B0000; bottom: 0 }
ポップアップの追加
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: normal 100%/normal FontAwesome;
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
ポップアップメニューのボタンを作るスクリプトはこんな感じ。
code:script.js
// フキダシ
scrapbox.PopupMenu.addButton({
title: '💬',
onClick: text => [{ ${text}]
})