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

Ausführliche Erläuterung der Standortpriorität von Nginx

Standortausdruckstyp ~ bedeutet, dass ein regulär...

Ubuntu 20.04 CUDA- und cuDNN-Installationsmethode (grafisches Tutorial)

CUDA-Installation, cuda herunterladen Geben Sie d...

Probleme mit Vue, das die Homepage von Bibibili imitiert

Technische Struktur Das Projekt ist in zwei Teile...

Detaillierte Beispiele zur Float-Verwendung in HTML/CSS

1. Grundlegende Anwendungsbeispiele für Float 1. ...

Einige Punkte, auf die wir beim Entwurf einer Webseite achten sollten

Webdesign: Je nach persönlichen Vorlieben und Inha...

CSS implementiert den Texteingabefeldstil von Google Material Design (empfohlen)

Hallo zusammen, heute möchte ich Ihnen zeigen, wi...

Einige Einstellungen von Div bezüglich Rahmen und Transparenz

rahmen: Stil = „Rahmenstil: durchgezogen; Rahmenbr...

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktion...

Einführung in MyCat, die Datenbank-Middleware

1. Mycat-Anwendungsszenarien Mycat wurde für eine...

Designideen für MySQL-Backup und -Wiederherstellung

Hintergrund Lassen Sie mich zunächst den Hintergr...

JS Cross-Domain-XML – mit AS URLLoader

Kürzlich erhielt ich eine Anforderung für eine Fun...

Lösen Sie das Problem der Angabe der UDP-Portnummer im Docker

Wenn Docker einen Container startet, gibt es den ...

3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag

Methode 1 Code kopieren Der Code lautet wie folgt:...