純粋な CSS でマークダウンの自動番号付けを実装するサンプルコード

問題の起源

私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当時、このトピックについても別途触れました。Word には、カスケードタイトルと呼ばれる非常に優れた機能があります。一度設定すれば、タイトルスタイルを設定するだけで、設定したタイトル番号付け方法に従ってタイトルに自動的に番号が付けられます。対応するタイトルを対応する基本タイトルスタイルに設定するだけです。私はこの方法が大好きで、長年使用しています。これにより、途中に章やセクションを挿入することによって章番号を手動で調整する問題が完全に解決されます。もちろん、画像の番号付けと名前付けも同様です。

マークダウンを使い始めるまでは、さまざまなエディタの切り替えにより、良い代替手段がなかったので、数年前にコマンドラインを使用してこれを行うための小さなツール、rawbin-/markdown-clearを作成しました。このツールは、GitHubでブログを書く問題を解決し、同時にさまざまなプラットフォームに投稿する問題を解決しました。数字はスクリプトで書かれているので、ここでマークダウンを使用してさまざまなプラットフォームに投稿し、HTMLに変換するのは自然であり、この段階での問題も解決します。
数日前、私は滞納月数についての包括的な理解の要約を書きました。突然、このスクリプトを使用して滞納月数を番号付けしたくないと思い、あるアイデアが頭に浮かびました。手動で番号付けせずに自動的に番号付けすることは可能でしょうか?すると次の内容になります。

まず問題を解決する

以下の操作事例はすべてmacOSで作成されています。他のプラットフォームでは若干の違いがあるかもしれませんが、内容は同じです。

Typoraでマークダウンを自動的に番号付けする
オープンタイポラ【設定】
[外観] => [テーマ] => [テーマフォルダーを開く] を見つけます。

開いているディレクトリのbase.user.cssに次のコードを追加します。

#ライター{
    カウンターリセット:h1
}

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

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

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

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

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

#ライター h1:before {
    カウンター増分: h1;
    コンテンツ: counter(h1) "."
}

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

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

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

#ライター h5:before {
    カウンター増分: h5;
    コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#ライター h6:before{
    カウンター増分: h6;
    コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

合理的

オープンタイポラ【設定】
[一般] => [詳細] => [デバッグモードを有効にする] => チェック
次に、非ソースコードモード => [右クリック] => [要素の検査] で、#write になっている理由を確認できます。
これは後で役に立ちます。

Github ページで自動的に番号付けされたマークダウンブログを書く

私はjekyllbootstrap.comのテンプレートを使用していますが、これは比較的シンプルです

rawbin-.github.io 内の任意の記事を開き、[右クリック] => [検査]
2つのコンテンツが手に入ります

コンテナクラスは.contentです。厳密に言うと#wrap .contentです。
スタイルファイルはassets/themes/bootstrap3にあります。その下のcss/style.cssを変更できます。

ソースコード内のassets/themes/bootstrap3/css/style.cssの以下の内容を変更します。

。コンテンツ {
    カウンターリセット:h1
}

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

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

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

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

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

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

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

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

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

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

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

他のウェブエディタでの自動コーディング

例えば、私たちが文書を書くときによく使うYuqueのような、さまざまなブログプラットフォーム、さまざまなセルフメディアプラットフォームなどが使えます。

ここで言うマークダウンとは、ページのリッチテキストエディタでマークダウンをWebページに自動変換できるブラウザプラグインのことです。これは、先ほども述べたように近年さまざまなプラットフォームに投稿するためのルーチンでもあります。番号とタイトルを付けたマークダウンを書いてエディタに貼り付け、クリックするだけで完了です。

単純な試み

ここのマークダウンには、CSSを設定および調整し、効果をプレビューできる設定ページがあります。
ざっと見てみると、js はクラスをスタイル属性に変換するために使用され、疑似クラスはサポートされていないことがわかります。
ソースコードの変更
adam-p/markdown-here にアクセスすると、コードが 2 年間変更されていないことがわかります。
いずれにせよ、rawbin-/markdown-hereにフォークしてコードをプルダウンしてください
まず、cssファイルsrc/common/auto-number-titleを作成し、markdown hereオプションページでコンテナクラスを見つけます。markdown-here-wrapper

.markdown-here-wrapper {
    カウンターリセット:h1
}

.markdown-here-wrapper h1 {
    カウンターリセット:h2
}

.markdown-here-wrapper h2 {
    カウンターリセット: h3
}

.markdown-here-wrapper h3 {
    カウンターリセット:h4
}

.markdown-here-wrapper h4 {
    カウンターリセット: h5
}

.markdown-here-wrapper h5 {
    カウンターリセット: h6
}

.markdown-here-wrapper h1:before {
    カウンター増分: h1;
    コンテンツ: counter(h1) "."
}

.markdown-here-wrapper h2:before {
    カウンター増分: h2;
    コンテンツ: counter(h1) "." counter(h2) ". "
}

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

.markdown-here-wrapper h4:before {
    カウンター増分: h4;
    コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

.markdown-here-wrapper h5:before {
    カウンター増分: h5;
    コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

.markdown-here-wrapper h6:before{
    カウンター増分: h6;
    コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

次に、このスタイルファイルの読み込みを許可するようにインジェクション設定を変更し、このスタイルの問題を導入します。
残りは間違っています。訂正してください。

最終出力とアプリケーション

rawbin-/markdown-をここでクローンする
Chromeを開き、設定の3つのドットをクリックします => [その他のツール] => [拡張機能]
[開発者モード]を開く
[アンパックされた拡張機能をロード]を選択 => クローンされたコードの下のsrcディレクトリを選択してプラグインをインストールしてロードします
簡単に使用できるようにプラグインをプラグインバーにピン留めします
auto-number-title.scssの内容は次のとおりです。

.markdown-here-wrapper {
    カウンターリセット: h1;
    h1 {
        カウンターリセット: h2;
        ＆：前に {
            カウンター増分: h1;
            コンテンツ: counter(h1) ". ";
        }
    }
    h2 {
        カウンターリセット: h3;
        ＆：前に {
            カウンター増分: h2;
            コンテンツ: counter(h1) "." counter(h2) ". "
        }
    }
    h3 {
        カウンターリセット: h4;
        ＆：前に {
            カウンター増分: h3;
            コンテンツ: counter(h1) "." counter(h2) "." counter(h3) ". "
        }
    }
    h4 {
        カウンターリセット: h5;
        ＆：前に {
            カウンター増分: h4;
            コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
        }
    }
    h5 {
        カウンターリセット: h6;
        ＆：前に {
            カウンター増分: h5;
            コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
        }
    }
    h6:前{
        カウンター増分: h6;
        コンテンツ: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
    }
}

原理を簡単に説明しましょう

CSS 自動番号付け

これは新しい機能ではなく、CSS 2.1 で登場した古い機能です。site:w3.org css automatic numbering で検索すると見つかります。もちろん、現在ではそれ以降のバージョン (CSS 3、CSS 2.2) にもこの機能はあります。caniuse から見ると、IE8 以上に対応していることがわかります。すごいと思いませんか?

簡単な説明

カウンターリセット
カウンターインクリメント ++
カウンター() 値
前後に使用する
さらなるヒントについては、CSS The Definitive Guide 4th を参照してください。翻訳はこちらです。gdut-yy/CSS-The-Definitive-Guide-4th-zh

Chromeプラグインまたは拡張機能の開発

実際にやったことはないのですが、それに関する本を読みました。

参考資料

公式ドキュメント
sxei/chrome-plugin-demo または Chrome プラグインガイドを検索してください
「Chrome拡張機能とアプリケーション開発」これは私が以前読んだ古い本です

まだ解決されていない問題がいくつかある

上記の操作方法は、h1からh6まで順番に配置する必要があります。そうしないと、非常に見栄えが悪くなります。
タイトル自体に番号が付けられるとまずいです。
これら2つの問題は私のgithubブログで見ることができます。解決策は「

ちなみに、CSSの他の変数の内容を調べてみましょう

CSS変数またはカスタムプロパティ

このIEは互換性がありません。他のブラウザはより高いバージョンと互換性があります。

：根{
    --var-test:xxx
}
。体{
    --var-test:ooo; をテストします。
    プロパティテスト:var(--var-test)
}

属性()

このcaniuseは少し不明瞭です。主な互換性もIE8から始まるので、自分でまとめる必要があります
強力な部分は、属性値を読み取り、それを他の属性に割り当てることができる、つまり属性のリンクを持つことができることです。

純粋な CSS ソリューションは終了したようです。

スクリプトを組み込めば、自由になります
attr() は JS と CSS 間の通信に適した方法です。

純粋な CSS でマークダウン自動番号付けを実装するサンプルコードに関するこの記事はこれで終わりです。CSS マークダウン自動番号付けに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL では SQL ステートメントはどのように実行されますか?

>>: node.js で PC 上の WeChat アプレットパッケージを復号化するための処理アイデア