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 Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - 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. 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

Beitrag wurde gelesen, ist in Arbeit!

Antworten

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

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

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3186
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1096

Syntax-Highlighting: Foren-Code farbig darstellen!
Aktualisiert 01.07.22

Hallo Anne,
wollte 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

Folgende Script- und CSS-Datei liefern gute Ergebnisse:

1
2
3
 
<link rel="stylesheet" href="https://yandex.st/highlightjs/7.5/styles/googlecode.min.css">
 
<script src="https://yandex.st/highlightjs/7.5/highlight.min.js"></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 PIugin in den "Untere Leiste / header" eingetragen werden!
Fürs Xobor (v6) kommt alles in "Eigenes Javascript"!
In Zeile 23-27 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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<link rel="stylesheet" href="https://yandex.st/highlightjs/7.5/styles/googlecode.min.css">
 
<style>
/* Nummerierung Codeliste: Schrift + Hintergrund */
.bbcode_code .codeblock .codelines {
  color: #2776C7;
  background-color: #ccccee;
}
/* Codeliste: Hintergrund */
.bbcode_code .codeblock pre {
  background-color: #eeeeef !important;
}
/* CSS-Fix für Syntax-Highlighting: */
pre code {
  background-color:transparent !important; 
  padding:inherit !important; 
  font-weight:bold; 
  font-size:14px; 
  overflow-x:auto;
}
 
/* Eigene Syntax-Highlighting Farb-Codes */
  pre .comment { color:#aaaaaa !important; }
  pre .attr_selector { color: #227722 !important; }
  pre .attribute, pre .subst { color:#7035a1 !important; }
  pre quote { color:#aaaaaa !important; }
  pre .keyword { color:#dd7000 !important; }
</style>
 
<script src="https://yandex.st/highlightjs/7.5/highlight.min.js"></script>
<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

Xobor (v6): "Springe zu Seite" verbessern � � Countdown-Timer: Javascript läuft falsch

�hnliche Themen

Antworten

Letzter Beitrag

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: 107

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: 512
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: 261

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: 420

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: 1558
External - Link - Grafik: Links deutlicher darstellen!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 3 13.07.2023 03:31
Kipper-Spedition • Zugriffe: 1038
Spoiler-Veschachtelung mit Code und Pre
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 30.10.2017 20:16
Wolfgang • Zugriffe: 3608

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: 1191

Forum-Codes farbig darstellen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 07.01.2009 00:45
Wolfgang • Zugriffe: 1479

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: 85 €

141%

Zum Einbau: Google-Translator!

Forum Lesezeichen ❌

Syntax-Highlighting: Foren-Code farbig darstellen!Aktualisiert 01.07.22

Syntax-Highlighting: Foren-Code farbig darstellen!
Aktualisiert 01.07.22