settings
https://gyazo.com/67ef96864dc8fce99dfd36feef22f274
自分の設定
code:style.css
/*強調表現の色変更用*/
.line strong {
}
/*deco練習用script*/
.deco-\! {
background:linear-gradient(#ffffff 30%,#00ff01 80%);
}
/*基本強調*/
.deco-\% {
}
/*配色テスト*/
.deco-\# {
background:linear-gradient(#ffffff 20%,#0000ff 80%);
font-weight: 500;
font-size:200%;
font-family:cursive;
text-transform: uppercase;
position: absolute; //これがないとtext-alignがうまく効かない
/*本来のボックスがとても小さいので移動していないように見える*/
width: 100%; //ボックスの形を指定している
text-align: right;
}
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: 28px; color: #5882FA; bottom: 0; display: inline-block; transform: rotate(35deg) }
背景表示
code:style.css
body{
background-size: cover;
}
表示スタイル
code:style.css
@media (min-width: 1050px) {
.row-flex .col-page {
max-width: 960px;
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.page-wrapper .page {
width: 700px;
}
.page-wrapper .related-page-list {
max-width: 260px;
}
.related-page-list .grid .splitter:first-child {
display: none;
}
.related-page-list .splitter {
height: 10px!important;
}
.related-page-list .realtion-label {
/* "realtion-label"，これはtypo？ */
height: 50px!important;
}
.related-page-list .page-list-item {
height: 50px!important;
}
.related-page-list .grid li {
width: 200px!important;
padding: 0 0 0 0!important;
margin: 0 0 5px 0!important;
}
.related-page-list .grid .page-list-item .content .title{
font-size: 15px;
}
.related-page-list .icon {
display: none!important;
}
オリジナルインデント
code:styel.css
/* インデントレベルごとに行頭文字を切り替えるスタイル指定*/
/* メニューのHide Dotと連動する */
/* この例では、第５レベルまでの行頭文字を指定。第６レベルからはドットに戻る */
/* すべてのビュレット文字に共通の設定 */
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -5px;
top: -10px;
}
/* 第１レベルのインデント（c-0）の設定 */
/* ドットはバックグラウンドカラーなので透明にする */
/* セレクタとして
.line .indent-mark .dot { ... }
を使うとインデントレベルごとに
background-color: transparent;
を指定する必要はないが、指定のないレベルのドットが消える
*/
.line .indent-mark .c-0 + .dot {
background-color: transparent;
}
/* このレベルの行頭文字を表示 */
.line .indent-mark .c-0 + .dot:before {
content:"◎";
}
/* 以下同様 */
.line .indent-mark .c-1 + .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot:before {
content:"★";
}
.line .indent-mark .c-2 + .dot {
background-color: transparent;
}
.line .indent-mark .c-2 + .dot:before {
content:"▶";
}
.line .indent-mark .c-3 + .dot {
background-color: transparent;
}
.line .indent-mark .c-3 + .dot:before {
content:"■";
}
.line .indent-mark .c-4 + .dot {
background-color: transparent;
}
.line .indent-mark .c-4 + .dot:before {
content:"□";
}
code:style.css
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
code:style.css
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline
}
body:not(.presentation) .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute;
display: inline-block;
left: -4rem;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
}
/* 行番号の色 */
/* カーソル選択時の行番号の色 */
.cursor-line .code-block code > span:not(class)::before { font-weight: bolder ;
}
code: style.css
/* コード全体のCSS */
.line code {
color: #00ff00; //ここでの文字が見えなくなっていたらしい(G255にした。) }
.line span.code-block {
background-color: black;
/* code blockのフォントを小さくする設定 */
line-height: 1.4;
font-size: 100%;
}
.page-list-item .description code,
.line code,
.line span.code-block {
font-family: "MyricaM M", "Ricty Discord", "Ricty Diminished Discord", "Ricty", "Ricty Diminished", monospace ;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
code:style.css
/* コードブロックのタイトルの文字色 */
.line span.code-block .code-block-start { color: #342d9c; } code:style.css
/* 各セレクタやプロパティの色を変更 */
.hljs-title,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-attribute {
}
.hljs,
.hljs-subst {
}
.hljs-name,
.hljs-meta {
}
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable,
.hljs-params,
.hljs-built_in {
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
}
.hljs-class .hljs-title,
.hljs-literal,
.hljs-number {
}
.hljs-emphasis {
font-style: italic;
}
.hljs-selector-id,
.hljs-selector-attr,
.hljs-keyword,
.hljs-selector-pseudo {
}
.hljs-selector-class,
.hljs-regexp {
}
code:style.css
/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc } code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
一行目のliはHTMLのタグらしい
使い込んでいる人のsettings
deco
配色テスト
abc
あああ
;){kind=link}