Code Syntax-Highlighting

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 � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Code Syntax-Highlighting

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 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 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 | Code Syntax-Highlighting datum

29.06.2022 19:31 (zuletzt bearbeitet: 01.02.2023 20:26)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo Wolfgang, ich finde das Syntax-Highlighting echt super und interessant. Man kann damit sehr viel machen.

Habe mir gedacht, ich mache mal ein kleines Werbe-Script für dich. Durch langes basteln und testen habe ich es endlich hinbekommen. Ich hatte ein paar Schwierigkeiten und Kommunikationsschwierigkeiten, mein Englisch ist nicht so gut.

Ich habe es jetzt hinbekommen.

Ich habe es auf Templates (v 4) getestet, also bei mir zeigt es keine Fehler an. Ich habe da nur das CSS Script von Code Syntax-Highlighting laufen, sonst keine. Ich weiß jetzt nicht, wenn man den CSS Code bei anderen CSS code hinzufügt, ob da Probleme entstehen, bin darin nicht perfekt, ich bin noch ein ganz kleiner Scripter also Anfänger.

Code Syntax-Highlighting ist mit Hover-Effekt ausgestattet. Und der Link geht im neuen Tab auf.

Hier mal der HTML Code:

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
 
<!--
  INCLUDE THIS INTO YOUR HEAD SECTION:
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/atom-one-dark.min.css" /> 
-->
 
<div class="container">
  <pre>
    <code class="js">
/**Code Syntax Highlighting
 * @DerTreffpunkt
 * für Hilfe, Tricks & Tipps
 */
if <font color="#800080">(you.dont(follow)){
    this.<font color="#800080">website:</font> '<a href="https://www.hilfe-tricks-tipps.de/" target="_blank" class="">Der Treffpunkt für Hilfe, Tricks & Tipps</a>();
}();
}
    </code>
  </pre>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js"></script>
 
<script>
  hljs.initHighlightingOnLoad();
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/atom-one-dark.min.css" />
 
 

Schlie�en

Hier mal der CSS Code:

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
32
33
34
35
36
37
38
39
40
41
42
 
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
 
html,
body {
  height: 100%;
  scroll-behavior: smooth;
}
 
body {
  display: flex;
  align-items: center;
  justify-content: center;
 
  background: #040404;
  user-select: none;
}
 
.hljs {
  padding: 0.6rem 2rem !important;
  background: #000 !important;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
  user-select: text;
 
  transition: border-color 0.2s;
}
 
body ::selection {
  background: #424242;
}
 
.hljs:hover {
  border-color: #ff4754;
}
 
 

Schlie�en

Hier mal der CSS Code, geändert fürs Forum:

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
32
33
34
35
36
37
38
39
40
41
42
 
{
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
 
html,
{
  height: 100%;
  scroll-behavior: smooth;
}
 
 {
  display: flex;
  align-items: center;
  justify-content: center;
 
  background: #040404;
  user-select: none;
}
 
.hljs {
  padding: 0.6rem 2rem !important;
  background: #000 !important;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
  user-select: text;
 
  transition: border-color 0.2s;
}
 
body ::selection {
  background: #424242;
}
 
.hljs:hover {
  border-color: #ff4754;
}
 
 

Schlie�en

Wie man hier im CSS Code, geändert für Forum, sehen kann, habe ich den CSS Tag weggelassen. Das war 1.) der Stern ( * ) und ich habe 2.) den CSS Tag (body) vor der Klammer weggelassen. Das ganze 2-mal.

Den CSS Tag (Stern) habe ich in Zeile 1, vor der Klammer, und in Zeile 11 und Zeile 16 habe ich den CSS Tag (body) weggelassen.

Ich hoffe jetzt, dass ich es so weit hinbekommen habe, ohne Fehler für das Xobor-Forum. Ich habe mein Bestes gegeben.

Habe mir gedacht, dass hat ja so keiner als Werbung, war für mich eine Idee und Inspiration.

Was ich noch versuchen möchte ist auch ein Script, was man auch für Codes benutzen kann, aber das wird eine Weile dauern, denn das ist nicht so einfach, aber ich versuche eine neue Idee auszuprobieren.

Mit freundlichen Grüßen Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | RE: Code Syntax-Highlighting datum

01.07.2022 17:33

Wolfgang

Administrator

Informationen anzeigen

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

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1280

Hallo Daishi,
besten Dank für Deine super Idee!

Besonders hier im Forum ist es von Vorteil, die verschiedenen Quell- und Foren-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 Codes mit [code] ... [/code], bzw. mit <code> ... </code> umgeben werden!

Ich finde, der Foren-Code bzw. Quellcode 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, finde ich, dass erklärende Kommentare in CSS, JavaScript und HTML besonders hervorgehoben werden wie in Zeile 7, 9, + 11!

Ich hatte hierzu schon mal einen Beitrag geschrieben:

Syntax-Highlighting: Foren-Code farbig darstellen!

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
 
H T M L - C o d e :
<style>color: #222222; </style>
<div class="clickModal_2" style="display:none;"></div>
<div class="clickcloseImg_2" title="Ansicht schließen">×</div>
 

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

Bis dann!
Wolfgang

Daishi findet das Top!

Antworten

Profilkarte � � Xobor-Spoiler mit Grafik in der Titelleiste

�hnliche Themen

Antworten

Letzter Beitrag

Versuche den HTML - Code zu teilen, für den Beitrag, für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

29.04.2024 22:33
von

Anne • Zugriffe: 365

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

Hover-Effekt für einen Forum-Code der Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anke 9 14.10.2023 05:41
Wolfgang • Zugriffe: 452
Umwandlung in BB Code
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 1 15.10.2023 19:11
Daishi • Zugriffe: 294
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: 649
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: 1863
Syntax-Highlighting: Foren-Code farbig darstellen!
Erstellt im Forum Das neue Template Xobor (v6) von Anne 3 28.08.2021 21:36
Anne • Zugriffe: 963
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: 3899

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

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 €

17%

Zum Einbau: Google-Translator!

Favoriten speichern

Forum - Code Syntax-Highlighting

Forum Lesezeichen ❌