効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に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入力で値が変更されたときにリスナーイベントを追加することの簡単な分析
後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...
Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...
昨年、プロジェクトの必要性により、Python でクローラーを作成しました。クロールされたデータは、...
この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...
ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...
コンテナと呼ばれるものは、実際には親イメージに基づいて読み取りおよび書き込み可能なファイル階層を作成...
コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...
CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...
目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...
この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...
目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...
clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...
目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...
実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...