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

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Warum sind die von Ihnen geschriebenen SQL-Abfrag...

Detaillierte Erläuterung der Transaktionsisolierungsebenen der MySQL-Datenbank

Isolationsebene für Datenbanktransaktionen Es gib...

Bedingte Kommentare zur Bestimmung des Browsers (IE-Reihe)

<!--[if IE 6]> Nur IE6 kann erkennen <![e...

Tutorial-Diagramm zur VMware-Installation des Ubuntu 20.04-Betriebssystems

Memo: Einfach erleben. Eintrag: Nr. 209 Diese Bei...

Zusammenfassung der Ereignisse, die Browser registrieren können

HTML-Ereignisliste Allgemeine Ereignisse: onClick ...

Beispiel für einen reinen CSS3-Mindmap-Stil

Mindmap Er sieht wahrscheinlich so aus: Die meist...

Beispiele und bewährte Vorgehensweisen für die Seitennummerierung

<br />Struktur und Hierarchie reduzieren die...

Verwendung des MySQL-Zeitstempels

Vorwort: Zeitstempelfelder werden häufig in MySQL...

Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen

Vorwort: In MySQL wird die Funktion CONCAT() verw...