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

Neues CSS3-Layout: ausführliche Flex-Erklärung

Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...

Docker-Installations-Tutorial zu RocketMQ (am ausführlichsten)

RocketMQ ist eine verteilte, warteschlangenbasier...

Designreferenz Schönes und originelles Blog-Design

Alle unten aufgeführten Blogs sind originell und ...

Die perfekte Lösung für das AutoFill-Problem in Google Chrome

In Google Chrome werden Sie nach der erfolgreiche...

Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx

Trennung von statischer und dynamischer Dynamisch...

So erstellen Sie eine Swap-Partitionsdatei in Linux

Einführung in Swap Swap (d. h. Swap-Partition) in...

React-Diagramm Serialisierung JSON Interpretation Fallanalyse

Das Ziel dieses Dokuments ist es, die JSON-Serial...

Anwendungsbeispiele für die try_files-Direktive von Nginx

Die Konfigurationssyntax von Nginx ist flexibel u...

Warum sind die Bilder in mobilen Web-Apps nicht klar und sehr verschwommen?

Warum? Am einfachsten lässt es sich so ausdrücken:...

Schritte zur vollständigen Deinstallation des Docker-Images

1. docker ps -a zeigt den laufenden Image-Prozess...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13

Installation der Msyql-Datenbank. Zu Ihrer Inform...

Detaillierte Schritte zur Installation von MySQL 8.0.18-winx64 unter Win10

1. Gehen Sie zunächst auf die offizielle Website,...