Forum - Syntax-Highlighting: Foren-Code farbig darstellen!

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » Syntax-Highlighting: Foren-Code farbig darstellen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Syntax-Highlighting: Foren-Code farbig darstellen! datum

28.08.2021 14:21

Hallöchen zusammen.
Ich habe leider nichts gefunden.
Meine Frage, wie kann man den [Code] ... die Nummern vorne ... farbig machen, also so wie hier?

lg

Antworten

#2 | Syntax-Highlighting: Foren-Codes farbig darstellen! datum

28.08.2021 20:36 (zuletzt bearbeitet: 01.07.2022 17:37)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3980
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1768

Syntax-Highlighting: Foren-Codes farbig darstellen!

Aktualisiert 21.05.2026

Hallo AnneWollte schon lange etwas über das farbliche Hervorheben von Foren-Codes schreiben!
Besonders hier im Forum ist es von Vorteil, um die verschiedenen Quell-Codes zu unterscheiden und gut zu erkennen!
Man kann im Internet viel über das "Syntax-Highlighting" oder "Syntaxhervorhebung" lesen!
Hier und da einfach, aber auch kompliziert und teilweise nicht funktionierend.
Man findet auch viele CSS-Varianten, viele Farben und Effekte. Hier muss man sehen, was einem gefällt, was passt!
Die farbliche Hervorhebung funktioniert immer da, wo der Code mit [ code] ... [ /code], bzw. mit < code> ... < /code> umgeben ist!

Was ist sinnvoll?Ich finde, der Code sollte gut zu lesen und zu erkennen sein, und durch die Einfärbung sollten die einzelnen Tags gut auseinander gehalten werden können!
Mit der offenen CSS-Variante können die Farben sogar individuell angepasst werden!
Besonders wichtig ist, das erklärende Kommentare in CSS, JavaScript und HTML besonders gut zu erkennen sind!

Auf der Seite von "cdnjs.com" wird sehr viel angeboten

Leider wird hier die Kommentierung mit Doppelstrichen nicht gut erkannt und die nachfolgenden Zeilen werden auch eingegraut oder eingefärbt!

CSS- Dateien + JavaSripte: https://cdnjs.com/libraries/highlight.js

Update

Habe eine ältere Version "6.2" gefunden, die mit den gerenderten Xobor-Codes, mit den "Entries" (z.B.: <div>) gut zurecht kommt.
Man kann auch die Farben über eine CSS selber bestimmen!

Folgende Script- und CSS-Datei liefern gute Ergebnisse:

1
2
3
4
5
6
7
8
 
<!-- CSS Highlighting -->
<link rel="stylesheet" href="https://yandex.st/highlightjs/6.2/styles/googlecode.min.css">
 
<!-- JavaScript Highlighting -->
<script src="https://yandex.st/highlightjs/6.2/highlight.min.js"></script>
 
<!-- Start Highlighting -->
<script>hljs.initHighlightingOnLoad();</script>
 

So können die Einfärbungen der Codes aussehen:

1
2
 
B B - F o r e n - C o d e :
[b]Text[/b]  [li] Text [/li]  [big] Text [/big]  [h1] Text [/h1]
 

1
2
3
4
5
6
7
8
9
 
H T M L - C o d e :
<style>
/* CSS Style */
  color: #222222; 
</style>
 
<!--  HTML-Code -->
<div class="clickModal_2" style="display:none;"></div>
<div class="clickcloseImg_2" title="Ansicht schließen">×</div>
 

1
2
3
4
5
6
7
 
J a v a S c r i p t :
<script>
// JavaScript 
  window.addEventListener('load', function() {
  $('.clickImgModal_2').click(function(){ });
});
</script>
 

Installation für alle Templates

Das Skript und der CSS-Eintrag kann in die "Kopf- oder Fußzeile" oder als Plugin in den "Untere Leiste / header" eingetragen werden!
Fürs Xobor (v6) kommt alles in "Eigenes Javascript"!

Die riesige CSS in Zeile 1 ist nicht unbedingt erforderlich.
Die nachfolgenden CSS-Einträge sollten reichen, um die Foren-Codes farblich übersichtlicher zu machen!
In Zeile 5-11 können die Farben nach eigenen Geschmack angepasst werden!
Mit der rechten Maustaste und "Untersuchen" kann man leicht die entsprechende "Classes" finden, die eingefärbt oder geändert werden soll!
In Zeile 15 befindet sich das JS für die Erkennung der einzelnen TAGs in den Code-Listen.
In Zeile 18 befindet sich die Datei für den Start von "Highlighting ".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!--<link rel="stylesheet" href="https://yandex.st/highlightjs/6.2/styles/googlecode.min.css">-->
 
<style>
/* Eigene Syntax-Highlighting Farb-Codes */
  pre .comment, pre .javadoc {color:#888888 !important; text-shadow:none !important;}
  pre .keyword, .css .attr_selector {color:#dd7000 !important;}
  pre .params {color:#dd0000 !important;}
  pre .regexp {color:#0a0 !important;}
  pre .number, pre .identifier {color:#a00 !important;}
  pre .xml .tag {color: #44f !important;}
  pre .attribute, pre .subst {color:#7035a1 !important}
</style>
 
<!-- JavaScript Highlighting -->
<script src="https://yandex.st/highlightjs/6.2/highlight.min.js"></script>
 
<!-- Start Highlighting -->
<script>hljs.initHighlightingOnLoad();</script>
 

Schließen

Bis dann und gutes Gelingen beim Nachbauen!
Wolfgang

Anne, 844er und Daishi finden das Top!

Antworten

#3 | RE: Syntax-Highlighting: Foren-Code farbig darstellen! datum

28.08.2021 21:05

Vielen Dank erstmal Wolfgang

Aber das funktioniert nicht

In dem Code sind hier die Zahlen mit grauem Hintergrund hinterlegt

Und der Link zu dieser Seite, hab ich mir geöffnet
Aber da weiß ich nicht, was ich da rausnehmen kann
Ich kann kein Englisch :(

Antworten

#4 | RE: Syntax-Highlighting: Foren-Code farbig darstellen! datum

28.08.2021 21:36

Durch deinen Nachtrag hat es jetzt funktioniert
Dankeschön

Wolfgang und 844er finden das Top!

Antworten

#5 | Update: Syntax-Highlighting - Foren-Codes farbig darstellen! datum

21.05.2026 11:48

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3980
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1768

Update: Syntax-Highlighting - Foren-Codes farbig darstellen!

Kommentare in HighlightingMir war besonders wichtig ist, das erklärende Kommentare in CSS (/* ... */), JavaScript (// ...) und HTML () besonders gut zu erkennen sind!
Neue Versionen von "Hightlighting" sind mit den Xobor-Entries (z.B.: <div> ) nicht gut zurechtgekommen.

UpdateHabe eine ältere Version "6.2" gefunden, die mit den gerenderten Xobor-Codes gut zurecht kommt.
Man kann auch die Farben über eine CSS selber bestimmen!
Hinzu kommt, dass die ältere Version völlig ausreicht, wesentlich kleiner ist und auch noch funktioniert!

1
2
3
4
5
6
7
8
 
<!-- CSS Highlighting -->
<link rel="stylesheet" href="https://yandex.st/highlightjs/6.2/styles/googlecode.min.css">
 
<!-- JavaScript Highlighting -->
<script src="https://yandex.st/highlightjs/6.2/highlight.min.js"></script>
 
<!-- Start Highlighting -->
<script>hljs.initHighlightingOnLoad();</script>
 

Alles in Beitrag #2 nachgetragen!

Bis dann

Wolfgang

Antworten

"Sie haben Post" - Sound + Grafik beim Eintreffen einer Email » « Xobor-Spenden-Button - Forum Spende - In der Foren Übersicht, im Profil, im Beitrag, im Portal und in der Mitgliederliste!

Ähnliche Themen

Antworten

Letzter Beitrag

Foren-Code "marquee" modernisieren - Mit Erweiterung für verschiedene Laufrichtungen Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Hans58

21.04.2026 07:13
von

Kipper-Spedition • Zugriffe: 405

Neuer Foren-Code: Formularfelder mit "fieldset" und "legend"!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

25.09.2023 21:55
von

Wolfgang • Zugriffe: 764

Besonderer Foren-Code für Textumrandung mit Bild
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 6 25.09.2022 09:13
Daishi • Zugriffe: 919
Code Syntax-Highlighting
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 1 01.07.2022 17:33
Wolfgang • Zugriffe: 701

Besondere Foren-Codes für Informationen, Hilfe, Fehler, Warnungen und Geheimes
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

20.02.2022 16:59
von

Wolfgang • Zugriffe: 996

Kopieren-Button zu Code-Block hinzufügen
Erstellt im Forum Das neue Template Xobor (v6). von creator 13 22.01.2022 10:17
Daishi • Zugriffe: 2534
Externe Links mit Symbol - Links deutlicher darstellen!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 3 13.07.2023 03:31
Kipper-Spedition • Zugriffe: 1871

Syntax-Highlighting - Quellcode im Forum farbig darstellen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.02.2015 21:29
von

Wolfgang • Zugriffe: 1718

Forum-Codes nicht ausführen, Forum-Codes farbig darstellen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

07.01.2009 00:45
von

Wolfgang • Zugriffe: 2063

Forum Übersicht → XOBOR-Foren und Homepages →

Das neue Template Xobor (v6). → Syntax-Highlighting: Foren-Code farbig darstellen!

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €