Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅にMacのようなアイコンが表示されます

ここに画像の説明を挿入

まずテーマフォルダを開きます

ファイル > 設定 > 外観 > テーマフォルダを開く

次に、base.user.cssファイルを編集します(存在しない場合は、新しいファイルを作成します)。

次のコードを追加するだけです

/*タイトルに自動的にシリアル番号が追加されます*/
.サイドバーコンテンツ{
    カウンターリセット:h1
}

.アウトライン-h1 {
    カウンターリセット:h2
}

.アウトライン-h2 {
    カウンターリセット: h3
}

.アウトライン-h3 {
    カウンターリセット:h4
}

.アウトライン-h4 {
    カウンターリセット: h5
}

.アウトライン-h5 {
    カウンターリセット: h6
}

.outline-h1>.outline-item>.outline-label:before {
    カウンター増分: h1;
    コンテンツ: カウンター(h1) " "
}

.outline-h2>.outline-item>.outline-label:before {
    カウンター増分: h2;
    コンテンツ: counter(h1) "."counter(h2) " "
}

.outline-h3>.outline-item>.outline-label:before {
    カウンター増分: h3;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) " "
}

.outline-h4>.outline-item>.outline-label:before {
    カウンター増分: h4;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
}

.outline-h5>.outline-item>.outline-label:before {
    カウンター増分: h5;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
}

.outline-h6>.outline-item>.outline-label:before {
    カウンター増分: h6;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
}

#書く {
    カウンターリセット:h1
}

h1 {
    カウンターリセット:h2
}

h2 {
    カウンターリセット: h3
}

h3 {
    カウンターリセット:h4
}

h4 {
    カウンターリセット: h5
}

h5 {
    カウンターリセット: h6
}

#h1:before {を記述する
    カウンター増分: h1;
    コンテンツ: カウンター(h1) " "
}

#h2:before {を記述する
    カウンター増分: h2;
    コンテンツ: counter(h1) "."counter(h2) " "
}

#h3:before を記述します。
h3.md-focus.md-heading:前

    {
    カウンター増分: h3;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) " "
}

#h4:before と記述し、
h4.md-focus.md-heading:before {
    カウンター増分: h4;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
}

#h5:before と記述し、
h5.md-focus.md-heading:before {
    カウンター増分: h5;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
}

#h6:before と記述し、
h6.md-focus.md-heading:前{
    カウンター増分: h6;
    コンテンツ: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
}

#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:前、
h4.md-focus:前、
h5.md-focus:前、
h6.md-focus:before {
    色: 継承;
    境界: 継承;
    境界線の半径: 継承;
    位置: 継承;
    左: イニシャル;
    フロート: なし;
    上: 初期;
    フォントサイズ: 継承;
    パディング左: 継承;
    パディング右: 継承;
    垂直方向の位置合わせ: 継承;
    フォントの太さ: 継承;
    行の高さ: 継承;
}
/*テーマによってコードブロックが異なるため、コード部分は統一されています*/
.CodeMirror行{
    左パディング: 4px;
}

.code-tooltip {
    ボックスの影: 0 1px 1px 0 rgba(0,28,36,.3);
    上境界線: 1px 実線 #eef2f2;
}

.md-フェンス、
コード、
{
    背景色: #f8f8f8;
    境界線の半径: 3px;
    パディング: 0;
    パディング左: 4px !重要;
    パディング右: 4px !重要;
    フォントサイズ: 0.9em;
}

コード {
    背景色: #f3f4f4;
    パディング: 0 2px 0 2px;
}

.md-フェンス {
    下部マージン: 15px;
    上マージン: 15px;
    パディング上部: 8px;
    パディング下部: 6px;
}


.md-タスクリスト項目 > 入力 {
  左マージン: -1.3em;
}

@media 印刷 {
    html{
        フォントサイズ: 13px;
    }
    テーブル、
    前 {
        ページ区切り内部: 回避;
    }
    前 {
        単語折り返し: 単語を区切る;
    }
}

.md-フェンス {
	背景色: #f8f8f8;
}
#pre.md-meta-block {を記述する
	パディング: 1rem;
    フォントサイズ: 85%;
    行の高さ: 1.45;
    背景色: #f7f7f7;
    境界線: 0;
    境界線の半径: 3px;
    色: #777777;
    上マージン: 0 !重要;
}

.mathjax-block>.code-tooltip {
	下部: .375rem;
}



/*暗い背景*/

# .md-fences:not([mermaid-type]) と記述します。
    上部パディング: 7px;
    境界線の半径: 10px;
    背景色: #282c34;
    色: #eeeeee;
}

.code-tooltip .ty-input,
.code-tooltip 入力 {
    色: #eee;
}


/*MAC の 3 つのアイコン*/
.CodeMirror-wrap .CodeMirror-scroll {
    パディング上部: 20px;
}

#.md-fences:before {を記述します
    コンテンツ: "";
    zインデックス: 4;
    表示: ブロック;
    位置: 絶対;
    上: 7px;
    左: 13px;
    幅: 15px;
    高さ: 15px;
    境界線の半径: 50%;
    フロート: 左;
    背景色: #fa3534;
}

# .CodeMirror-scroll:before {を記述します
    コンテンツ: "";
    表示: ブロック;
    位置: 絶対;
    上: 0px;
    左: 29px;
    幅: 15px;
    高さ: 15px;
    境界線の半径: 50%;
    フロート: 左;
    zインデックス: 999;
    背景色: #ff9900;
}
#write .md-fences::after {
    コンテンツ: "";
    zインデックス: 4;
    表示: ブロック;
    位置: 絶対;
    上: 7px;
    左: 53px;
    幅: 15px;
    高さ: 15px;
    境界線の半径: 50%;
    フロート: 左;
    背景色: #19be6b;
}

/*色*/
.CodeMirror-line .cm-number,/*number*/
.CodeMirror-line .cm-property{/*呼び出されたメソッド*/
    色: #f08d49;
}
.CodeMirror-line .cm-variable-3,/*パラメータ、型*/
.CodeMirror-line .cm-qualifier,/*css クラス*/
.CodeMirror-line .cm-variable-2{/*使用されるパラメータ*/
    色: #FFCB6B;
}
.CodeMirror-line .cm-meta,/*省略記号、コメントなど*/
.CodeMirror-line .cm-atom,/*css属性値、ブール値など*/
.CodeMirror-line .cm-keyword{/*キーワード*/
    色: #cc99cd;
}
.CodeMirror-line .cm-def,/*変数名*/
.CodeMirror-line .cm-variable{/*使用する変数名*/
    色: #FFCB6B;
}
.CodeMirror-line .cm-builtin{/*呼び出される属性*/
    色: #82AAFF;
}
.CodeMirror-line .cm-comment{/*コメント*/
    色: #888;
}
.CodeMirror-line .cm-string,/*文字列*/
.CodeMirror-line .cm-string-2{/*正規表現*/
    色: #7ec699
}
.CodeMirror 行 .cm 演算子 {/*演算子*/
    色: #67cdcc
}
.CodeMirror div.CodeMirror-cursor{/* カーソル */
    左境界線: 1px 実線 #fff;
    zインデックス: 3;
}
.CodeMirror-selected,/*選択された背景*/
.CodeMirror-選択されたテキスト{
    背景: #666 !重要;
}

/*html*/
.CodeMirror-line .cm-tag{/*タグ名*/
    色: #F07178;
}
.CodeMirror-line .cm-bracket{/*タグ山括弧*/
    色: #FFF;
}
.CodeMirror-line .cm-attribute{/*属性*/
    色: #FFCB6B;
}

Typora コードブロックのカラーマッチングとタイトルシリアル番号の実装コードに関するこの記事はこれで終わりです。より関連性の高い Typora コードブロックのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

>>:  HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

推薦する

Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス

後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...

動的なデジタル時計を実装するJavaScript

この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

Linux に Python クローラー スクリプトを展開し、スケジュールされたタスクを設定する方法

昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

DockerでSpring Bootアプリケーションを実行する方法

ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...

Dockerのローカルイメージ作成方法の分析

コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...

Nginx で Angular プロジェクトを展開する際の落とし穴

コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...

プロジェクトの再構築からプロジェクトにおける CSS3 カスタム変数の使用について話す

CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...

MySQL をベースにしたシンプルな検索エンジンを実装する

目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...

Vue バックエンド管理システムのページング機能の実装例

この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...

CSSのclip-pathプロパティを使用して不規則なグラフィックを表示する

clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...

効率的な視覚化Nginxログ表示ツール

目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...