settings

UserStyle

関連ページ一覧をページの横に表示する

code:style.css

@import "/api/code/Mijinko/%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8%E4%B8%80%E8%A6%A7%E3%82%92%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%A8%AA%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8BUserCSS(%E6%9C%80%E5%B0%8F%E7%89%88)/style.css";

行番号を出す

code:style.css

/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */

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

.lines { counter-reset: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.line:not(.line-title) { counter-increment: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.app:not(.presentation) .lines > .line:not(.line-title)::before {

content: counter(line);

position: absolute; display: inline-block; left: -110px; z-index: 10;

min-width: 50px; text-align: right; vertical-align: middle;

/* 行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

.line:not(.line-title)::before { opacity: .5 }

.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder }

}

コードの行番号を表示

code:style.css

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

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

.section-title, .code-block-start { counter-reset: codeline }

content: counter(codeline);

position: absolute; display: inline-block; left: -2.4em; z-index: 10;

min-width: 2em; text-align: right; vertical-align: bottom;

/* ↓行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

インデントレベルを見やすくする

code:style.css

.app:not(.presentation) .indent-mark {

height: 100%;

}

.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {

position: relative;

display: inline-block;

height: 100%;

}

.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {

content: " ";

position: absolute;

left: 43%;

margin: -4px 0;

height: 100%;

}

.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)):nth-child(2n + 1)::before {

border-left-style: solid;

}

ピン留め記事と通常の記事の段を分けて表示

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

ヘッダーに下線を引く

code:style.css

.line strong.level-1 {

font-weight: bold;

}

.line strong.level-2 {

font-weight: bold;

}

}

コードブロックの行間を狭める

code:style.css

.line span.code-block {

line-height: 2rem;

}

色変える

code:style.css

body {

}

.line span.code-block .code-block-start {

}

}

}

ページ一覧で太字にしない

code:style.css

.grid li.page-list-item a .title {

font-weight: unset;

}

プランを隠す

code:style.css

.plan-badge {

display: none !important;

}

外部リンクを分かりやすくする

code:style.css

.line a.link:not(.icon):after {

content: "\f35d";

font-family: "Font Awesome 5 Free";

font-weight: bold;

font-size: .8em;

margin-left: .2em;

text-decoration: none;

display: inline-block;

}

ホームボタンをナビゲーションバー内に固定

code:style.css

.quick-launch .project-home {

left: 60px;

color: white;

position: relative;

pointer-events: auto;

}

.quick-launch {

margin-bottom: 1rem;

}

.quick-launch .project-home:hover {

background-color: rgba(0, 0, 0, .08) !important;

color: snow !important;

}

.quick-launch .left-box {

position: fixed;

top: 0;

color: white;

z-index: 1000;

width: 100%;

pointer-events: none;

}

.quick-launch .private-badge {

margin: 0 0 0 64px;

}

.navbar {

height: 42.5px;

}

ピン留めページにピンのアイコンを表示

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: "Font Awesome 5 Free";

font-size: 20px;

bottom: 0;

display: inline-block;

transform: rotate(35deg);

font-weight: 900;

}

画像を大きくする

code:style.css

.line img.image {

max-height: none !important;

max-width: 50% !important;

}

存在しないページのリンクを点線で囲む

code:style.css

.line a.empty-page-link {

border: 1px dashed;

}

code:style.css

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

.table-block table tr td:nth-child(odd) { 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列目を太字・中央揃え */

.table-block-row > span.cell.col-1 {

font-weight: bolder;

text-align: center;

}

code:style.css

.deco-\| {

padding: 0.4rem 1rem;

width: 100%;

display: inline-block;

}

code:style.css

.deco-\% {

color: black;

background-color: black;

}

.deco-\%:hover {

font-color: unset;

background-color: unset;

}

ハッシュタグを強調する

code:style.css

padding: 0.2em;

border-radius: 2px;

}

code:style.css

display: inline-block;

width: 0;

text-indent: -9999px;

}

display: inline-block;

min-width: 1.15em;

padding-left: 1px;

font: normal 110%/normal "Font Awesome 5 Free";

text-align: center;

}

border: none;

}

}

}

}

}

}

}

Delete this page を赤くする

code:style.css

background-color: rgb(255 0 0);

color: white;

}

background-color: rgb(205 29 29);

color: white;

}

範囲選択時に色を反転する

code:style.css

.selection {

opacity: 1;

mix-blend-mode: difference;

}

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0 0.2em 0 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

line-height: 1.5;

}

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

}

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

}

.deco-\!:before, .deco-\!:after {

}

.deco-\{ a, .deco-\} a {

}

code:style.css

.deco-\' {

vertical-align: super;

font-size: smaller;

}

.deco-\, {

vertical-align: sub;

font-size: smaller;

}

コードブロックのコピーボタンを強調する

code:style.css

.code-block .tool-buttons {

position: absolute;

right: 0px;

font-size: 2em;

color: gray;

}

.code-block:hover .tool-buttons>*:after {

content: attr(title);

}

存在しないページのリンクを点線で囲む

code:style.css

.line a.empty-page-link {

border: 1px dashed;

}

code:style.css

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

code:style.css

.deco-\~ {

padding: 0.1em 0.2em 0.1em 0.2em;

}

code:style.css

.deco-\+ {

background: linear-gradient(transparent 60%, rgb(254, 244, 0) 60%);

}

code:style.css

.line:not(.cursor-line) .deco-\# {

position: absolute;

width: 100%;

text-align: center;

}

code:style.css

display: none;

visibility: hidden;

height: 0;

width: 0;

margin: 0;

}

display: none;

}

UserScript

code:script.js

import { EmojiCompletion } from '/api/code/takker/emoji-completion/script.js';

const emojiCompletion = new EmojiCompletion({

includeYourProject: true,

// maxSuggestionNum: 30,

// enableOnMobile: false,

});

emojiCompletion.start();

code:script.js

import { registerIconSuggestion, fetchMemberPageIcons } from '/api/code/customize/icon-suggestion/script.js';

registerIconSuggestion({

presetIcons: [

// プロジェクトに所属するメンバーのアイコン全てを一括で登録できます。

// 注意: そのプロジェクトにアクセスする権限を持っていないとエラーになります

fetchMemberPageIcons('slashnephy'),

// 指定したプロジェクトのハッシュタグにリンクされている、全てのページのアイコンを一括で登録できます。

// 注意: そのプロジェクトにアクセスする権限を持っていないとエラーになります

// fetchRelatedPageIconsByHashTag('customize', 'member'),

],

defaultIsShownPresetIcons: false,

});

code:script.js

import '/api/code/cockscomb/Mermaid/script.js';

code:script.js

const setFavicon = () => {

if (scrapbox.Page.title) {

}

};

window.scrapbox.addListener("page:changed", setFavicon);

setFavicon();