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入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

推薦する

JavaScript で大きなファイルの並列ダウンロードを実装する方法

目次1. HTTP範囲リクエスト1.1 範囲構文2. 大きなファイルをダウンロードする方法2.1 補...

JavaScript 手ぶれ補正のケーススタディ

原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...

デザイン理論:テキスト表現とユーザビリティ

<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...

HTML テーブルの境界線を設定する際のヒント

HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...

ブリージングカルーセルを実装するネイティブJS

今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...

Docker構成 Alibaba Cloud Container Serviceの操作

Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...

Linux のよく使うコマンドの使い方を詳しく解説(第 2 回)———— テキストエディタのコマンド vi/vim

vi/vim の紹介どちらもマルチモード エディターです。違いは、vim が vi のアップグレー...

nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

nginx を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

Vue3 ページ、メニュー、ルートの使用

目次1. メニューをクリックしてジャンプ1. ページ名の統一2. 管理ページを追加3. ルートを追加...

Docker は 2003 年の問題を解決するために MySQL リモート接続を導入しました

MySQLへの接続ここでは、リモート接続に navicat を使用します。MySQL に接続する前に...

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...

リモートホスト上でスクリプトや命令を実行する Zabbix の詳細な説明

シナリオ要件1. zabbix_server Web インターフェースのスクリプト機能を使用すると、...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...