Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer

Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer

Wirkung: Der Titel hat eine eigene Seriennummer, der Codeblock hat ein Farbschema und in der oberen linken Ecke des Codeblocks wird ein Mac-ähnliches Symbol angezeigt

Bildbeschreibung hier einfügen

Öffnen Sie zunächst den Themenordner

Datei > Einstellungen > Darstellung > Designordner öffnen

Bearbeiten Sie dann die Datei base.user.css (falls sie nicht existiert, erstellen Sie eine neue).

Fügen Sie einfach den folgenden Code hinzu

/*Titel fügt automatisch Seriennummer hinzu*/
.Seitenleisteninhalt {
    Zähler-Reset:h1
}

.Umriss-h1 {
    Zähler-Reset:h2
}

.Umriss-h2 {
    Zähler-Reset: h3
}

.Umriss-h3 {
    Zähler-Reset:h4
}

.Umriss-h4 {
    Zählerrücksetzung: h5
}

.Umriss-h5 {
    Zählerrücksetzung: h6
}

.outline-h1>.outline-item>.outline-label:vor {
    Zählerinkrement: h1;
    Inhalt: Zähler(h1) " "
}

.outline-h2>.outline-item>.outline-label:vor {
    Zählerinkrement: h2;
    Inhalt: Zähler(h1) "."Zähler(h2) " "
}

.outline-h3>.outline-item>.outline-label:vor {
    Zählerinkrement: h3;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) " "
}

.outline-h4>.outline-item>.outline-label:vor {
    Zählerinkrement: h4;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) "."Zähler(h4) " "
}

.outline-h5>.outline-item>.outline-label:vor {
    Gegeninkrement: h5;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) "."Zähler(h4) "."Zähler(h5) " "
}

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

#schreiben {
    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
}

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

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

#schreibe h3:vorher,
h3.md-focus.md-heading:vorher

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

#schreibe h4:vorher,
h4.md-focus.md-heading:vor {
    Zählerinkrement: h4;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) "."Zähler(h4) " "
}

#schreibe h5:vorher,
h5.md-focus.md-heading:vor {
    Gegeninkrement: h5;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) "."Zähler(h4) "."Zähler(h5) " "
}

#schreibe h6:vorher,
h6.md-focus.md-heading:vor {
    Zählerinkrement: h6;
    Inhalt: Zähler(h1) "."Zähler(h2) "."Zähler(h3) "."Zähler(h4) "."Zähler(h5) "."Zähler(h6) " "
}

#schreiben>h3.md-Fokus:vor,
#schreiben>h4.md-fokus:vorher,
#schreiben>h5.md-Fokus:vor,
#schreiben>h6.md-Fokus:vor,
h3.md-Fokus:vorher,
h4.md-Fokus:vorher,
h5.md-Fokus:vorher,
h6.md-Fokus:vor {
    Farbe: erben;
    Grenze: erben;
    Rahmenradius: erben;
    Position: erben;
    links: Initiale;
    Schwimmer: keiner;
    oben: Initiale;
    Schriftgröße: erben;
    padding-left: erben;
    padding-right: erben;
    vertikale Ausrichtung: erben;
    Schriftstärke: erben;
    Zeilenhöhe: erben;
}
/*Da die Codeblöcke verschiedener Themen unterschiedlich sind, wird der Codeteil vereinheitlicht*/
.CodeMirror-Zeilen {
    Polsterung links: 4px;
}

.code-tooltip {
    Kastenschatten: 0 1px 1px 0 rgba (0,28,36,.3);
    Rahmen oben: 1px durchgezogen #eef2f2;
}

.md-Zäune,
Code,
tt {
    Hintergrundfarbe: #f8f8f8;
    Rahmenradius: 3px;
    Polsterung: 0;
    Polsterung links: 4px !wichtig;
    Polsterung rechts: 4px !wichtig;
    Schriftgröße: 0,9em;
}

Code {
    Hintergrundfarbe: #f3f4f4;
    Polsterung: 0 2px 0 2px;
}

.md-Zäune {
    Rand unten: 15px;
    Rand oben: 15px;
    Polsterung oben: 8px;
    Polsterung unten: 6px;
}


.md-task-list-item > Eingabe {
  Rand links: -1,3em;
}

@media drucken {
    html {
        Schriftgröße: 13px;
    }
    Tisch,
    vor {
        Seitenumbruch innen: vermeiden;
    }
    vor {
        Zeilenumbruch: Wort umbrechen;
    }
}

.md-Zäune {
	Hintergrundfarbe: #f8f8f8;
}
#schreibe pre.md-meta-block {
	Polsterung: 1rem;
    Schriftgröße: 85 %;
    Zeilenhöhe: 1,45;
    Hintergrundfarbe: #f7f7f7;
    Rand: 0;
    Rahmenradius: 3px;
    Farbe: #777777;
    Rand oben: 0 !wichtig;
}

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



/*Dunkler Hintergrund*/

#write .md-fences:nicht([Meerjungfrau-Typ]) {
    Polsterung oben: 7px;
    Rahmenradius: 10px;
    Hintergrundfarbe: #282c34;
    Farbe: #eeeeee;
}

.code-tooltip .ty-Eingabe,
.code-tooltip Eingabe {
    Farbe: #eee;
}


/*Drei Symbole von MAC*/
.CodeMirror-wrap .CodeMirror-scroll {
    Polsterung oben: 20px;
}

#schreibe .md-fences:before {
    Inhalt: "";
    Z-Index: 4;
    Anzeige: Block;
    Position: absolut;
    oben: 7px;
    links: 13px;
    Breite: 15px;
    Höhe: 15px;
    Randradius: 50 %;
    schweben: links;
    Hintergrundfarbe: #fa3534;
}

#schreiben .CodeMirror-scroll:vor {
    Inhalt: "";
    Anzeige: Block;
    Position: absolut;
    oben: 0px;
    links: 29px;
    Breite: 15px;
    Höhe: 15px;
    Randradius: 50 %;
    schweben: links;
    Z-Index: 999;
    Hintergrundfarbe: #ff9900;
}
#schreibe .md-fences::nach {
    Inhalt: "";
    Z-Index: 4;
    Anzeige: Block;
    Position: absolut;
    oben: 7px;
    links: 53px;
    Breite: 15px;
    Höhe: 15px;
    Randradius: 50 %;
    schweben: links;
    Hintergrundfarbe: #19be6b;
}

/*Farbe*/
.CodeMirror-Zeile .cm-Nummer,/*Nummer*/
.CodeMirror-line .cm-property {/*Die aufgerufene Methode*/
    Farbe: #f08d49;
}
.CodeMirror-line .cm-variable-3,/*Parameter, Typ*/
.CodeMirror-Zeile .cm-Qualifizierer, /*CSS-Klasse*/
.CodeMirror-line .cm-variable-2 {/*Verwendete Parameter*/
    Farbe: #FFCB6B;
}
.CodeMirror-line .cm-meta,/*Ellipsen, Kommentare usw.*/
.CodeMirror-line .cm-atom, /*CSS-Attributwert, Boolescher Wert usw.*/
.CodeMirror-Zeile .cm-Schlüsselwort{/*Schlüsselwort*/
    Farbe: #cc99cd;
}
.CodeMirror-line .cm-def,/*Variablenname*/
.CodeMirror-line .cm-variable {/*Der verwendete Variablenname*/
    Farbe: #FFCB6B;
}
.CodeMirror-line .cm-builtin {/*Das aufzurufende Attribut*/
    Farbe: #82AAFF;
}
.CodeMirror-Zeile .cm-Kommentar {/*Kommentar*/
    Farbe: #888;
}
.CodeMirror-Zeile .cm-Zeichenfolge,/*Zeichenfolge*/
.CodeMirror-line .cm-string-2 {/*Regulärer Ausdruck*/
    Farbe: #7ec699
}
.CodeMirror-Zeile .cm-Operator {/*Operator*/
    Farbe: #67cdcc
}
.CodeMirror div.CodeMirror-cursor {/* Cursor */
    Rahmen links: 1px durchgezogen #fff;
    Z-Index: 3;
}
.CodeMirror-selected,/*Ausgewählter Hintergrund*/
.CodeMirror-ausgewählter Text {
    Hintergrund: #666 !wichtig;
}

/*html*/
.CodeMirror-line .cm-tag{/*Tagname*/
    Farbe: #F07178;
}
.CodeMirror-line .cm-bracket{/*Winkelklammer am Tag*/
    Farbe: #FFF;
}
.CodeMirror-Zeile .cm-Attribut{/*Attribut*/
    Farbe: #FFCB6B;
}

Dies ist das Ende dieses Artikels über den Implementierungscode der Typora-Codeblock-Farbanpassung und der Titelseriennummer. Weitere relevante Typora-Codeblock-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank

>>:  Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe

Artikel empfehlen

Verwendung des HTML-H-Titel-Tags

Die Verwendung von H-Tags, insbesondere h1, war sc...

jQuery implementiert ein atmendes Karussell

In diesem Artikel wird der spezifische Code von j...

So stellen Sie per SSH eine Verbindung zum Docker-Server her

Als ich zum ersten Mal mit Docker in Berührung ka...

Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.

MySQL Einführung in MySQL MySQL war ursprünglich ...

Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8

1. Öffnen Sie die virtuelle Maschine und das Git-...

So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle

Nur den oberen Rand anzeigen <table frame=above...

Detaillierte Erläuterung der Protokollverarbeitung von Docker-Containern

Docker verfügt über viele Log-Plugins. Standardmä...

Gängige Methoden zur Optimierung der Docker-Imagegröße

Die Docker-Images, die wir normalerweise erstelle...

MySQL-Grundlagen - Kurzanleitung - Wissenszusammenfassung (mit Mindmap)

Inhaltsverzeichnis Vorwort 1. Grundkenntnisse der...

Eine kurze Einführung in den MySQL-Dialekt

Wenn wir einmal von Datenbanken absehen, was ist ...

Detaillierte Erläuterung der Verwendung von Docker Commit

Manchmal müssen Sie bestimmte Abhängigkeiten im B...