settings

code:style.css

.editor, .stream, .page-list-item .title, .app:not(.presentation) .page::after {

font-family: 'Times New Roman','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝体','YuMincho','游明朝','Yu Mincho',serif;

}

インデントレベルに合わせてイメージサイズをいい感じに

code:style.css

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

箇条書きをいい感じに

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 }

.navbar .navbar-menu>li.stream-btn,

.navbar .navbar-menu>li.stream-btn.hidden-xs

{ display: block !important; }

.line .indent-mark .dot {

margin-top: 1px;

}

.line .indent-mark .c-1 + .dot {

}

.line .indent-mark .c-2 + .dot {

}

.line .indent-mark .c-3 + .dot {

}

コードの行番号表示

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: -4em; z-index: 10;

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

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

font-family: monospace; color: grey }

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

badge tag

code:style.css

/* バッヂ風 */

display: inline-block; min-width: 3.2em; border-radius: .2em;

付箋記法

付箋っぽくかける

code:style.css

/* 付箋記法のスタイル例 */

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

display: inline-block; position: absolute; top: -0.6em; right: -6vw;

max-width: 40%; padding: .3rem 1rem;

transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }

.presentation .line .deco-\~ { position: static; max-width: 100% }

@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }

@media print { .line:not(.cursor-line) .deco-\~ {

/* 太字記法との組み合わせでスタイルを変える場合 */

/* 付箋記法内で打消し線記法と下線記法を併用する場合 */

.line .deco-\~.deco-- { text-decoration: line-through }

.line .deco-\~.deco-_ { text-decoration: underline }

フキダシ記法

code:style.css

/* フキダシ記法版 */

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

display: inline-block; position: relative; max-width: calc(100% - 4em);

padding: 3px 4px 2px 5px; margin-left: .6em;

border-radius: .4em; border-bottom-left-radius: 0 }

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

display: block; /* reduce the damage in FF3.0 */

position: absolute; bottom: 0; left: -0.45em;

width: 0; content: '';

border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }

Callout

Callout

code:style.css

/* ノート・コールアウトの基本設定 */

.line .deco-\! {

padding: 0.2em 0.5em;

display: inline-block;

border-radius: 2px;

margin: 2px 0;

}

フッター

code: style.css

.app:not(.presentation) .page::after {

content: 'コメント・ご質問は Twitter(X) @yuseiito_ / me@yuseiito.com / Instagram @yusei_ito へ';

display: block;

margin-top: 5rem;

padding: 1rem 0;

text-align: center;

border-width: 1px 0;

}