egumasa
Profile
Masaki Eguchi
PhD student, the Department of Linguistics, University of Oregon
Scrapbox settings below
Scrapbox allows users to customize your page through css and Javascripts.
This is my profile page and I put my scripts for my page below. You can browse them and copy into your pages (remember that you may need to change some part since it may contain a specific reference to my pages).
1. Add templates to your Scrapbox
This is a very powerful addition to your scrapbox. It allows you to set your own templates and load to a new Scrapbox page as you want. I use this mainly for:
First, this is a css setting that makes a new button ("+") on your page. It will be a button you press to use the template.
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }
a#Templates.tool-btn img { opacity: 0 }
Second, you need to copy and paste the following lines of code, which allows you to loads templates to the created "+" button.
code:script.js
addTemplateItemsToPageMenu()
function addTemplateItemsToPageMenu() {
// defining the titles from here ---------- 下の解説を見てね!! ----------
const __templates = [
{title: 'Daily reflection', template: '/api/code/egumasa-lab/templates/daily_reflection.txt'},
{title: 'Article', template: '/api/code/egumasa-lab/templates/article.txt' },
{title: 'Synthesis (QA)', template: '/api/code/egumasa-lab/templates/synthesis.txt' },
{title: 'Terminology', template: '/api/code/egumasa-lab/templates/terminology_topic.txt' },
{title: 'Quote/Statement', template: '/api/code/egumasa-lab/templates/quote_statement.txt' },
{title: 'Project page', template: '/api/code/egumasa-lab/templates/project.txt' },
{title: 'Review article', template: '/api/code/egumasa-lab/templates/review_article.txt' },
{title: 'New Python Entry', template: '/api/code/egumasa-lab/templates/Pythoncode.txt' },
{title: 'New Rscripts', template: '/api/code/egumasa-lab/templates/Rscript.txt' }
]
// The end of the template definition ----------
const __templMenuTitle = 'Templates'
scrapbox.PageMenu.addMenu({ title: __templMenuTitle, image: 'dummy.png', onClick: () => { } })
__templates.forEach((i) => {
scrapbox.PageMenu(__templMenuTitle).addItem({
title: i.title,
onClick: () => { __loadTemplate(i.template) }})
})
var __loadTemplate = function (templateUrl) {
if (scrapbox.Page.lines && scrapbox.Page.lines.length < 10) {
// clicking the title line
const line = document.getElementById('L' + scrapbox.Page.lines0.id) const lastChar = $(line).find('spanclass^="c-"').last().get(0) __mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10)
// reading the template
$('#text-input').load(templateUrl, function (response, status, xhr) {
if (status == "success") {
try {
// setting the template to the text area
const textarea = document.getElementById('text-input')
textarea.value = /\.js$/.test(templateUrl) ? eval(response) : response
// pasting to the text area
const event = document.createEvent('Event')
event.initEvent('input', true, true)
textarea.dispatchEvent(event)
// clicking the text area to cancel the selection
__mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10)
} catch (ex) {
console.log("it did not work>< \n" + ex)
}
} else {
console.log("it did not work>< \n" + status)
}
})
}
}
const __mimicClick = (targetId, left, top) => {
const genEvent = type => {
const event = document.createEvent("MouseEvents")
event.initMouseEvent(type, true, true, window, 1, 0, 0,
left, top, false, false, false, false, 0, null)
return event
}
const elm = document.getElementById(targetId)
elm.dispatchEvent(genEvent("mousedown"))
elm.dispatchEvent(genEvent("mouseup"))
elm.dispatchEvent(genEvent("click"))
}
}
2. Change font settings
3. Add a pop up button to make the selected line "quote"
code:script.js
scrapbox.PopupMenu.addButton({
title: 'Quote',
onClick: text => text.split(/\n/).map(line => > ${line}).join('\n')
})
4. Add a pop up button to make the selected area "bold" face
code:script.js
scrapbox.PopupMenu.addButton({
title: 'Bold',
onClick: text => text.split(/\n/).map(line => [+ ${line}]).join('\n')
})
Making the font size in the code block smaller
Changes the bullet point color and shape
This code allows me to copy and paste markdown files as I wanted.
code:script.js
if (sessionStorage.getItem('scrasobox-paste') !== 'true') {
document.addEventListener('paste', event => {
const type = 'text/html'
const d = event.clipboardData
if (d.types && d.types.indexOf('Files') == -1 && -1 < d.types.indexOf(type)) {
event.preventDefault()
const dom = new DOMParser().parseFromString(d.getData(type), type)
const ng = text => text.trim().replace(/[\\\n]/g, ' ') const q = query => dom.querySelectorAll(query)
const f = (text, deco) =>
[].concat(text.split(/\n/)
.filter(l => l.trim()).map(l => [${deco} ${l.trim()}] )).join('')
const c = (text, deco) =>
[].concat(text.split(/\n/)
.filter(l => l.trim()).map(l => ${deco} ${l.trim()} )).join('')
q('pre').forEach(d => {
d.innerText = 'code:code.*\n' + d.innerText.split('\n').map(l => ${l}).join('\n') })
q('h5').forEach(d => { d.innerText = "\n" + f(d.innerText, '**') })
q('h4').forEach(d => { d.innerText = "\n" + f(d.innerText, '***') })
q('h3').forEach(d => { d.innerText = "\n" + f(d.innerText, '**') })
q('h2').forEach(d => { d.innerText = f(d.innerText, '**') })
q('h1').forEach(d => { d.innerText = d.innerText })
q('blockquote').forEach(d => { d.innerText = "\t >" + c(d.innerText, '') })
q('em, i').forEach(d => { d.innerText = f(d.innerText, '/') })
q('strong, b').forEach(d => { d.innerText = f(d.innerText, '*') })
d.closest('a').outerHTML = [${d.src.trim()}#.png ${d.closest('a').href}] })
q('ahref').forEach(d => { d.outerHTML = [${d.href} ${ng(d.text).trim()}] }) q('imgsrc').forEach(d => { d.outerHTML = [${d.src.trim()}#.png] }) d.outerHTML = [https://www.youtube.com/watch?v=${d.src.split('/embed/')[1].split('?')[0]}] })
q('code').forEach(d => { d.innerText = '' + d.innerText + '' })
let depth = -1
const li = node => {
depth++
node.querySelectorAll('li').forEach(n => li(n))
return node.innerHTML = '@sp@'.repeat(depth--) + node.innerHTML
}
li(dom.body)
const div = document.createElement('div')
div.innerHTML = dom.body.innerHTML
document.body.appendChild(div)
const range = document.createRange()
range.selectNode(div)
//const text = range.toString()
const text = div.innerText
document.execCommand('insertText', null, text.replace(/(\s*\n){3,}/g, '\n\n').replace(/@sp@/gi, ' '))
document.body.removeChild(div)
}
})
sessionStorage.setItem('scrasobox-paste', true)
}
window.addEventListener('unload', () => { sessionStorage.setItem('scrasobox-paste', false) })
This allows me to set short cut as I want
code:script.js
document.addEventListener('keydown', (e) => {
if (e.key === 'c' && e.ctrlKey && !e.shiftKey) {
document.execCommand('insertText', null, 'check.icon')
}
})
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: '赤付箋',
onClick: text => [! ${text}]
})
scrapbox.PopupMenu.addButton({
title: '緑付箋',
onClick: text => [{ ${text}]
})
scrapbox.PopupMenu.addButton({
title: '青付箋',
onClick: text => [) ${text}]
})
scrapbox.PopupMenu.addButton({
title: 'RQ',
onClick: text => [# ${text}]
})
APA2Tags
code:script.js
scrapbox.PopupMenu.addButton({
title: 'APA2Tags',
onClick: text => text.split(';').map(function(line) {
return line.replace(/e\.g\.(,|)\s/, "") //delete "e.g.,"
.replace(/i\.e\.(,|)\s/, "") //delete "i.e.,"
.replace(/et al./, "_et_al") //reformat et al.
.replace(/(but\s|\,\s|\s)for.*?(see|\))/, "") //intended to delete "for a discussion see" or similar strings
.replace(/(but\s|)see/,'') //intended to delete "see"
.replace(/,/g, '_')
.replace(/&|\sand\s/g, '_&_')
.replace(/\(|\)|\.|\?/g, "") // delete unnecessary punctuations
.replace(/ /g, "")
.replace (/^/,'#')
.replace(/__/, '_')
.replace(/\d{4}/gm, "($&)") //adding parenthesis around the publication year
}).join(' ')
})
code:script.js
// ここからアイコンとスタイルの定義
// - アイコンの名前はエンコードしなくてOK、日本語でもOK
// - スタイル部分は content だけ必須、バックスラッシュ2個必要なので注意、あとはお好みで
const tagIconStyles = {
"!" : "{ content: '\\f06a'; color: #F6AE2D }", /* ひらめき */ "?" : "{ content: '\\f059'; color: #758E4F }", /* 疑問、要調査 */ "*" : "{ content: '\\f069'; color: #F26419 }", /* 重要 */ "_" : "{ content: '\\f096'; color: #08BDBD }", /* タスク */ "x" : "{ content: '\\f046'; color: #2489C5 }", /* 完了タスク */ ">" : "{ content: '\\f045'; color: lightgrey }", /* 先送りしたタスク */
"<" : "{ content: '\\f274'; color: lightgrey }", /* 日付を決めたタスク */
"e" : "{ content: '\\f10c'; color: #F26419 }", /* イベント */ "good" : "{ content: '\\f087' }", /* おまけ。下に説明があるよ */
"bad" : "{ content: '\\f088' }",
"good_meal" : "{ content: '\\f0f5\\f087\\f069'; letter-spacing: .2em }"
};
// ここから下は無視してね ---------------------
(function(m){
let charSelectors = [], afterLinkSelectors = [], iconStyle = ""
const linkSelFmt = ".line:not(.cursor-line) ahref='./#':not(.icon)" const charStyle = "{display:inline-block;width:0;text-indent:-9999px}"
const afterLinkStyle = "{display:inline-block;min-width:1.15em;padding-left:1px;font: normal 110%/normal FontAwesome;text-align:center}"
const a = "::after", f = " span"
const encode = tag => Array.from(tag).map(c => {
const i = enc0.indexOf(c) return -1 < i && enc1i ? enc1i : encodeURIComponent(c) }).join(""); for (var k in m) {
const href = encode(k)
charSelectors.push(linkSelFmt.replace(/#/, href) + f)
afterLinkSelectors.push(linkSelFmt.replace(/#/, href) + a)
iconStyle += linkSelFmt.replace(/#/, href) + a + mk }
let style = document.createElement('style')
style.appendChild(document.createTextNode(charSelectors.join(",") + charStyle))
style.appendChild(document.createTextNode(afterLinkSelectors.join(",") + afterLinkStyle))
style.appendChild(document.createTextNode(iconStyle))
document.head.appendChild(style)
})(tagIconStyles)
code:style.css
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) ahref='./!':not(.icon) span, .line:not(.cursor-line) ahref='./*':not(.icon) span, .line:not(.cursor-line) ahref='./_':not(.icon) span, .line:not(.cursor-line) ahref='./x':not(.icon) span, .line:not(.cursor-line) ahref='./e':not(.icon) span { display: inline-block; width: 0; text-indent: -9999px }
/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) ahref='./!':not(.icon)::after, .line:not(.cursor-line) ahref='./*':not(.icon)::after, .line:not(.cursor-line) ahref='./_':not(.icon)::after, .line:not(.cursor-line) ahref='./x':not(.icon)::after, .line:not(.cursor-line) ahref='./e':not(.icon)::after { display: inline-block; min-width: 1.15em; padding-left: 1px;
font: normal 110%/normal FontAwesome; text-align: center }
/* ここから各アイコンの設定 */
.line:not(.cursor-line) ahref='./!':not(.icon)::after { content: '\f06a'; color: #F6AE2D } .line:not(.cursor-line) ahref='./*':not(.icon)::after { content: '\f069'; color: #F26419 } .line:not(.cursor-line) ahref='./_':not(.icon)::after { content: '\f096'; color: #08BDBD } .line:not(.cursor-line) ahref='./x':not(.icon)::after { content: '\f046'; color: #2489C5 } .line:not(.cursor-line) ahref='./%3E':not(.icon)::after { content: '\f045'; color: lightgrey } .line:not(.cursor-line) ahref='./%3C':not(.icon)::after { content: '\f274'; color: lightgrey } .line:not(.cursor-line) ahref='./e':not(.icon)::after { content: '\f10c'; color: #F26419 } Table format
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 } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}