settings
文字デコレーション
吹き出し
右
左
文字色・サイズ
~ ⇢ ＃b9b9b9 bold
& ⇢ ＃b9b9b9
" ⇢ ＃e66 1.2em
%⇢ ＃ea2 1.2em
# ⇢ ＃6ae 1.2em
. ⇢ 0.9em
背景色
! ⇢ ＃fff bg＃e66 1.4em
' ⇢ bg＃fffb8f
+ ⇢ ＃fff bg＃66afe9
| ⇢ bg#e0e0e0
背景色＋角丸
+( ⇢ ＃fff bg＃66afe9 border-radius 4px
!) ⇢ ＃fff bg＃e66 1.4em border-radius 1em
!
組み合わせ例
+(. ⇢ ＃fff bg＃66afe9 border-radius 4px font-size .9em
+(., ⇢ ＃fff bg＃66afe9 border-radius 4px font-size .9em opacity .7
独自スタイル
code:style.css
.text {
font-family: Shippori Mincho, serif;
}
.line-title .text,
.section-title .text {
font-family: "Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.deco-\* {
font-weight: 600;
}
/* 動画埋め込み */
.iframe-video-player iframe {
width: 50%;
height: 240px;
}
/* 画像境界が見づらい */
img.image {
}
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 0.95em;
padding: 0.03em 0.3em;
border-radius: 0.4em;
margin: 1px 0.4em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.7em 0.7em;
border-style: solid;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.7em 0.7em 0;
border-style: solid;
}
/* 文字色 */
.deco-\~ {
font-weight: bold;
}
.deco-\& {
}
.deco-\" {
font-size: 1.2em; /* 重要なので最初から大きな文字にする */
}
.deco-\% {
font-size: 1.2em; /* 重要なので最初から大きな文字にする */
}
.deco-\# {
font-size: 1.2em; /* 重要なので最初から大きな文字にする */
}
/* 背景色 */
.deco-\! { /* 重要な部分は!を付ける */
background-color: #e66; /* 赤背景 */ /* font-size: 1.4em; 重要なので最初から大きな文字にする */
}
.deco-\' {
padding: 0 3px;
}
.deco-\+ {
padding: 1px 3px;
color: white;
}
.deco-\| {
padding: 6px 6px;
}
/* 薄め */
.deco-\, {
opacity: .7;
}
/* 小さめ */
.deco-\. {
font-size: .9em;
}
/* 角丸 */
.deco-\( {
border-radius: 4px;
}
.deco-\) {
padding: .1em .55em;
border-radius: 1em;
}
/* アイコンの位置調整 */
.line img.icon {
vertical-align: bottom;
}
/* 画像サイズ */
.line .level-1 .image { width: 10%; max-height: none; }
.line .level-2 .image { width: 20%; max-height: none; }
.line .level-3 .image { width: 30%; max-height: none; }
.line .level-4 .image { width: 40%; max-height: none; }
.line .level-5 .image { width: 50%; max-height: none; }
.line .level-6 .image { width: 60%; max-height: none; }
.line .level-7 .image { width: 70%; max-height: none; }
.line .level-8 .image { width: 80%; max-height: none; }
.line .level-9 .image { width: 90%; max-height: none; }
.line .level-10 .image { width: 100%; max-height: none; }
インデント虹・セクション区切り
code:style.css
.random-jump-button {
display:none !important;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(4n+1) .pad {
background: lightblue !important;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+2) .pad {
background: lightpink;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+3) .pad {
background: lightyellow;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+4) .pad {
background: lightgreen;
opacity: 0.5;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 111%;
position: absolute;
left: -49px;
border: 1px lightgray solid;
}
.app {
counter-reset: section;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title):after {
z-index: 1000;
counter-increment: section;
content: counter(section);
display: inline-block;
width: 1.6em;
height: 1.6em;
position: absolute;
top: -10px;
left: -55px;
border-radius: 50%;
font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;
text-align: center;
white-space: nowrap
}
.random-jump-button {
display:none !important;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:nth-child(4n+1) .pad {
background: lightblue !important;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+2) .pad {
background: lightpink;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+3) .pad {
background: lightyellow;
opacity: 0.5;
}
.indent-mark span:nth-child(4n+4) .pad {
background: lightgreen;
opacity: 0.5;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 111%;
position: absolute;
left: -49px;
border: 1px lightgray solid;
}
.app {
counter-reset: section;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title):after {
z-index: 1000;
counter-increment: section;
content: counter(section);
display: inline-block;
width: 1.6em;
height: 1.6em;
position: absolute;
top: -10px;
left: -55px;
border-radius: 50%;
font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;
text-align: center;
white-space: nowrap
}
UserScript
code:script.js
scrapbox.PageMenu.addItem({
title: "Toggle page width",
onClick: () => {
const $colPage = document.querySelector(".col-page");
$colPage.style.width = "100%";
$colPage.style.maxWidth = "1200px";
} else {
$colPage.style = null;
}
}
})
code:script.js
scrapbox.PageMenu.addItem({
title: "テーブル to markdown",
onClick: () => {
let colLen;
let buffers = "";
// 選択文字列からテキスト抽出し buffers に代入
window.getSelection().toString()
.split("\n")
.map((line, index) => {
if (index === 0) {
colLen = line.split("\t").length;
buffers += marked(line, colLen, true);
} else {
buffers += marked(line, colLen);
}
});
// buffers をクリップボードにコピー
navigator.clipboard.writeText(buffers)
.then(_ => alert("copied."))
.catch(console.log);
// 変換用関数
function marked(tabbedText, colLen, sep = false) {
const trimline = tabbedText.trim().split("\t");
// 前後埋め
const padding = string => "|" + string + "|\n";
// 行がカラム数に満たない場合
if (trimline.length < colLen) trimline.push("");
// 整形処理
return padding(
trimline.join("|")) + (
sep ? padding(
Array.from({ length: colLen }, _ => "----").join("|")
) : ""
);
};
}
})
code:script.js
import {press} from '/api/code/programming-notes/scrapbox-keyboard-emulation/script.js';
import {goHeadLine} from '/api/code/takker/scrapbox-cursor-emulation/cursor.js';
let repeat = false;
document.addEventListener('keyup', e => {
const {ctrlKey, key} = e;
if (key !== 'p' || !ctrlKey) return;
e.preventDefault();
e.stopPropagation();
repeat = false;
});
document.addEventListener('keydown', e => {
const {ctrlKey, key} = e;
if (key !== 'p' || !ctrlKey) return;
e.preventDefault();
e.stopPropagation();
if (repeat) return;
goHeadLine();
(async () => {
await sleep(100);
// scrapbox.Page.titleへの反映までにタイムラグがある
// 代わりにDOMから取得する
const icon = document.getElementsByClassName('lines')0 .firstElementChild.textContent0; switch (icon) {
case '⬜':
press('Delete');
insertText(✅);
break;
case '✅':
press('Delete');
insertText(⬜);
break;
default:
insertText(⬜);
break;
}
})();
repeat = true;
});
const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
function insertText(text) {
const cursor = document.getElementById('text-input');
cursor.focus();
cursor.value = text;
const uiEvent = document.createEvent('UIEvent');
uiEvent.initEvent('input', true, false);
cursor.dispatchEvent(uiEvent);
}
code:script.js
function removeDeepLExtention(){
// 実行後は文字カーソルが更新されるまで待ち、更新された一定時間後にDeepL拡張機能の無効化処理を開始する。
let delayTime = 150 // カーソル移動してから削除するまでの秒数（ミリ秒）。
const target = document.querySelector(".cursor")
const observer = new MutationObserver(records => {observer.disconnect();remove(delayTime);})
observer.observe(target, {attributes: true})
function remove(delayTime){
window.setTimeout(()=>{
let target = document.querySelector("deepl-inline-translate")
if (target === null) return
target.remove();
},delayTime)
}
}
removeDeepLExtention(); // 通常起動
scrapbox.on('page:changed', removeDeepLExtention); // ページを切り替えた時にも起動
scrapbox.on('lines:changed', removeDeepLExtention); // 行を編集した時にも起動