Beispielcode zur Implementierung der automatischen Markdown-Nummerierung mit reinem CSS

Der Ursprung des Problems

Das erste Mal, dass ich mich mit der Frage der Titelnummerierung beschäftigt habe, dürfte in der Zeit gewesen sein, als ich meine Bachelorarbeit schrieb. Damals habe ich dieses Thema auch gesondert angesprochen. Word hat eine sehr gute Funktion namens „kaskadierende Titel“. Nachdem Sie diese einmal eingerichtet haben, müssen Sie nur den Titelstil festlegen, damit die Titel automatisch gemäß der festgelegten Titelnummerierungsmethode nummeriert werden. Wir müssen lediglich den entsprechenden Titel auf den entsprechenden grundlegenden Titelstil festlegen. Ich liebe diese Methode und verwende sie seit vielen Jahren. Damit ist das Problem der manuellen Anpassung der Kapitelnummern aufgrund des Einfügens eines Kapitels oder Abschnitts in der Mitte vollständig gelöst. Die Bildnummerierung und -benennung ist natürlich ebenfalls ähnlich.

Bevor ich anfing, Markdown zu verwenden, gab es aufgrund des Wechsels zwischen verschiedenen Editoren keine gute Alternative. Deshalb habe ich vor einigen Jahren ein kleines Tool geschrieben, um dies über die Befehlszeile zu tun: rawbin-/markdown-clear. Dieses Tool löste das Problem des Schreibens von Blogs auf GitHub und gleichzeitig das Problem des Postens auf verschiedenen Plattformen. Da die Zahlen in Skripten geschrieben sind, ist es naheliegend, hier Markdown zu verwenden, um auf verschiedenen Plattformen zu posten und es in HTML zu konvertieren, was auch die Probleme in dieser Phase löst.
Vor ein paar Tagen habe ich eine Zusammenfassung meines umfassenden Verständnisses der Zahlungsrückstände in Monaten geschrieben. Plötzlich wollte ich dieses Skript nicht mehr zum Nummerieren verwenden und mir kam eine Idee: Ist es möglich, sie automatisch zu nummerieren, ohne sie manuell zu nummerieren? Dann haben wir folgenden Inhalt.

Lösen Sie zuerst das Problem

Die folgenden Operationsfälle werden alle unter macOS durchgeführt. Auf anderen Plattformen kann es geringfügige Unterschiede geben, aber der Inhalt bleibt derselbe.

• Automatisches Schreiben von Markdown-Nummern in Typora
• Öffnen Sie typora【Einstellungen】
• Suchen Sie nach [Darstellung] => [Design] => [Designordner öffnen]

Fügen Sie den folgenden Code zu base.user.css im offenen Verzeichnis hinzu

#Schriftsteller {
    Zähler-Reset:h1
}

h1 {
    Zähler-Reset:h2
}

h2 {
    Zähler-Reset: h3
}

h3 {
    Zähler-Reset:h4
}

h4 {
    Zählerrücksetzung: h5
}

h5 {
    Zählerrücksetzung: h6
}

#Autor h1:vor {
    Zählerinkrement: h1;
    Inhalt: Zähler(h1) ". "
}

#Autor h2:vor {
    Zählerinkrement: h2;
    Inhalt: Zähler(h1) "." Zähler(h2) ". "
}

#Autor h3:vor {
    Zählerinkrement: h3;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "."
}

#Autor h4:vor {
    Zählerinkrement: h4;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "."
}

#Autor h5:vor {
    Gegeninkrement: h5;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "."
}

#Autor h6:vor{
    Zählerinkrement: h6;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "." Zähler(h6) "."
}

Vernünftig

• Öffnen Sie typora【Einstellungen】
• Suchen Sie unter [Allgemein] => [Erweitert] => [Debug-Modus aktivieren] => aktivieren
• Dann können Sie im Nicht-Quellcodemodus => [Rechtsklick] => [Element untersuchen] sehen, warum es #write ist.
• Dies wird später nützlich sein.

Schreiben Sie Markdown-Blogs automatisch mit Nummerierung in GitHub-Seiten

Ich verwende die Vorlage von jekyllbootstrap.com, die relativ einfach ist

Öffnen Sie einen beliebigen Artikel in rawbin-.github.io, dann [Rechtsklick] => [Untersuchen]
Sie können zwei Inhalte erhalten

• Die Containerklasse ist .content, genau genommen #wrap .content
• Die Style-Datei befindet sich in Assets/Themes/Bootstrap3. Sie können die Datei css/style.css darunter ändern.

Ändere den folgenden Inhalt im Quellcode in asset/themes/bootstrap3/css/style.css

.Inhalt {
    Zähler-Reset:h1
}

h1 {
    Zähler-Reset:h2
}

h2 {
    Zähler-Reset: h3
}

h3 {
    Zähler-Reset:h4
}

h4 {
    Zählerrücksetzung: h5
}

h5 {
    Zählerrücksetzung: h6
}

.Inhalt h1:vor {
    Zählerinkrement: h1;
    Inhalt: Zähler(h1) ". "
}

.Inhalt h2:vor {
    Zählerinkrement: h2;
    Inhalt: Zähler(h1) "." Zähler(h2) ". "
}

.Inhalt h3:vor {
    Zählerinkrement: h3;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "."
}

.Inhalt h4:vor {
    Zählerinkrement: h4;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "."
}

.Inhalt h5:vor {
    Gegeninkrement: h5;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "."
}

.Inhalt h6:vor{
    Zählerinkrement: h6;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "." Zähler(h6) "."
}

Automatische Kodierung in anderen Web-Editoren

Beispielsweise können verschiedene Blog-Plattformen, verschiedene Self-Media-Plattformen usw. wie Yuque verwendet werden, die wir häufig zum Schreiben von Dokumenten verwenden.

Dabei handelt es sich um ein Browser-Plugin namens Markdown, das Markdown im Rich-Text-Editor der Seite automatisch in eine Webseite umwandeln kann. Dies ist auch die Routine, die ich zuvor für das Posten auf verschiedenen Plattformen in den letzten Jahren erwähnt habe. Schreiben Sie einfach das nummerierte und betitelte Markdown und fügen Sie es in den Editor ein. Klicken Sie dann und schon ist es erledigt.

Einfacher Versuch

• Markdown hat hier eine Konfigurationsseite, auf der Sie CSS konfigurieren und anpassen und den Effekt in der Vorschau anzeigen können
• Ein kurzer Blick zeigt, dass js zum Konvertieren von Klassen in Stilattribute verwendet wird und Pseudoklassen nicht unterstützt werden.
• Quellcode ändern
  
• Gehen Sie zu adam-p/markdown-here und Sie werden sehen, dass der Code seit zwei Jahren nicht verändert wurde.
• Egal was passiert, fork es zu rawbin-/markdown-here und ziehe dann den Code herunter
• Erstellen Sie zunächst die CSS-Datei src/common/auto-number-title und suchen Sie die Containerklasse in der Markdown-Optionsseite hier.markdown-here-wrapper

.markdown-here-wrapper {
    Zähler-Reset:h1
}

.markdown-here-wrapper h1 {
    Zähler-Reset:h2
}

.markdown-here-wrapper h2 {
    Zähler-Reset: h3
}

.markdown-here-wrapper h3 {
    Zähler-Reset:h4
}

.markdown-here-wrapper h4 {
    Zählerrücksetzung: h5
}

.markdown-here-wrapper h5 {
    Zählerrücksetzung: h6
}

.markdown-here-wrapper h1:vor {
    Zählerinkrement: h1;
    Inhalt: Zähler(h1) ". "
}

.markdown-here-wrapper h2:vor {
    Zählerinkrement: h2;
    Inhalt: Zähler(h1) "." Zähler(h2) ". "
}

.markdown-here-wrapper h3:vor {
    Zählerinkrement: h3;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "."
}

.markdown-here-wrapper h4:vor {
    Zählerinkrement: h4;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "."
}

.markdown-here-wrapper h5:vor {
    Gegeninkrement: h5;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "."
}

.markdown-here-wrapper h6:before{
    Zählerinkrement: h6;
    Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "." Zähler(h6) "."
}

• Ändern Sie dann die Injektionskonfiguration, um das Laden dieser Stildatei zu ermöglichen und dieses Stilproblem einzuführen
• Der Rest ist falsch, korrigieren Sie ihn einfach.

Endgültige Ausgabe und Anwendung

• Rawbin-/Markdown-hier klonen
• Öffnen Sie Chrome und klicken Sie auf die drei Punkte in den Einstellungen => [Weitere Tools] => [Erweiterungen]
• Öffnen Sie [Entwicklermodus]
• Wählen Sie [Entpackte Erweiterung laden] => Wählen Sie das src-Verzeichnis unter dem geklonten Code aus, um das Plug-In zu installieren und zu laden
• Heften Sie das Plugin zur einfachen Verwendung an die Plugin-Leiste an
• Der Inhalt von auto-number-title.scss ist wie folgt

.markdown-here-wrapper {
    Zähler-Reset: h1;
    h1 {
        Zähler-Reset: h2;
        &:vor {
            Zählerinkrement: h1;
            Inhalt: Zähler(h1) ". ";
        }
    }
    h2 {
        Zähler-Reset: h3;
        &:vor {
            Zählerinkrement: h2;
            Inhalt: Zähler(h1) "." Zähler(h2) ". "
        }
    }
    h3 {
        Zähler-Reset: h4;
        &:vor {
            Zählerinkrement: h3;
            Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "."
        }
    }
    h4 {
        Zählerrücksetzung: h5;
        &:vor {
            Zählerinkrement: h4;
            Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "."
        }
    }
    h5 {
        Zählerrücksetzung: h6;
        &:vor {
            Gegeninkrement: h5;
            Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "."
        }
    }
    h6:vor{
        Zählerinkrement: h6;
        Inhalt: Zähler(h1) "." Zähler(h2) "." Zähler(h3) "." Zähler(h4) "." Zähler(h5) "." Zähler(h6) "."
    }
}

Lassen Sie mich kurz das Prinzip erklären

Automatische CSS-Nummerierung

Es handelt sich nicht um eine neue Funktion, sondern eher um eine alte, die in CSS 2.1 erschien. Sie können sie finden, indem Sie nach site:w3.org css automatic numbering suchen. Natürlich verfügen neuere Versionen (CSS 3, CSS 2.2) heute über diese Funktion. Auf caniuse können Sie sehen, dass sie mit IE8 und höher kompatibel ist. Ist das nicht großartig?

Einfache Beschreibung

• Zähler-Reset
• Zählerinkrement ++
• counter()-Wert
• Anwendung vor und nach
• Weitere Tipps finden Sie unter CSS The Defiiniitiive Guide 4th. Hier ist die Übersetzung gdut-yy/CSS-The-Definitive-Guide-4th-zh

Entwicklung von Chrome-Plugins oder -Erweiterungen

Ich habe das zwar nicht gemacht, aber ich habe ein Buch darüber gelesen.

Referenzmaterialien

• Offizielle Dokumentation
• sxei/chrome-plugin-demo oder suchen Sie nach „Chrome-Plugin-Handbuch“
• "Chrome Extension and Application Development", das ist das alte Buch, das ich vorher gelesen habe

Es gibt noch einige Probleme, die nicht gelöst sind

• Die obige Vorgehensweise muss in der Reihenfolge von h1 bis h6 angeordnet werden, sonst sieht es sehr gut aus
• Es wäre schlecht, wenn der Titel selbst nummeriert wäre.
• Diese beiden Probleme können in meinem GitHub-Blog nachgelesen werden. Die Lösung kann sein, `` auszuführen.

Erkunden Sie übrigens andere variable Inhalte von CSS

CSS-Variablen oder benutzerdefinierte Eigenschaften

Dieser IE ist nicht kompatibel, andere Browser sind mit höheren Versionen kompatibel

:Wurzel{
    --var-test:xxx
}
.Körper{
    --var-test:ooo;
    Eigenschaftstest:var(--var-test)
}

attr()

• Dieser Canius ist etwas unklar. Die Hauptkompatibilität beginnt auch mit IE8, daher müssen Sie sie selbst zusammenfassen
• Der leistungsstarke Teil besteht darin, dass es Attributwerte lesen und anderen Attributen zuweisen kann, d. h. es kann eine Attributverknüpfung haben

Es sieht so aus, als ob die reine CSS-Lösung ihr Ende gefunden hat.

• Wenn Sie Skripte einbinden können, sind Sie frei
• attr() ist eine gute Möglichkeit zur Kommunikation zwischen JS und CSS.

Damit ist dieser Artikel über Beispielcode zur Implementierung der automatischen Markdown-Nummerierung mit reinem CSS abgeschlossen. Weitere relevante Inhalte zur automatischen Markdown-Nummerierung in CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!