HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

[d3mueller]

Hi,

wie machen das alle, das man Code auf der Webseite anzeigen lässt, und auch noch mit Syntax-Highlighting und Seitenanzahl.


Man kann ja die HTML-Zeichen umwandeln und so. Aber wie macht man das mit Farbe?


Danke schon mal

LG

 

[marcmaroc]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Nun der code wird mit <code></code> angegeben und was das Syntax-Highlighting angeht so kann man das mit css einstellen und genauso die Farbe angeben... oder Du nimmst einfach ein Java-script, hier ein link:


edit by simonpicos: Habe den Link mal korrigiert, der funktionierte vorher nicht. MfG

 

[d3mueller]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Kann man mit CSS einzelne Buchstaben färben?

Ja, das Javascript wär nicht schlecht, aber gibt es vllt nene Tutorial, wie man sowas (in einfacher form) selbst macht?

EDIT:
Hab ne alternative gefunden: Mit <textarea readonly> scheint es zu klappen. Da zeigt er mir alles als Code an.

Bloß stimmt was nicht mit der Höhe. Wenn ich keine im Stylesheet angebe, dann ist die textarea nur ca. 40px hoch, und man muss mit der Scrollleiste scrollen, und wenn ich höhre auf auto stelle, genau das gleiche.

Wenn ich höhe auf z.B. 400px stelle, wird die textarea größer, aber es bleibt halt konstant 400px, auch wenn mehr oder weniger drin steht.

Weiß einer, wie ich das beheben kann?

 

[J000S]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Du meinst, dass die Area so groß sein soll wie der Textinhalt?

http://aktuell.de.selfhtml.org/artikel/javascript/variable-textarea/

 

[d3mueller]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Ja, genau

 

[simonpicos]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Dafür gibt es Scripts die ein Code-Highlighting umsetzen. Z.B.: http://prismjs.com/

 

[d3mueller]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Dafür gibt es Scripts die ein Code-Highlighting umsetzen. Z.B.: http://prismjs.com/

Hey, das ist ja mal richtig perfekt

Muss ich da iwas wegen Copyright beachten? Irgendwie immer ein Link zu der Seite? Oder reicht der Copyright-Teil, der im Code (prism.js) drin ist?


Danke auf jeden Fall
LG

EDIT:

Problem:

So sieht das aus. Habe aber das Stylesheet und die Javascript datei hochgeladen

EDIT2:

Okay, Problem gelöst

Aber wie ist das mit der Lizenz?


EDIT3:

Sry, aber habe noch ein Problem!
Wenn ich da iwie html Code eingebe, z.B.

<a href="#">test</a>

Dann zeigt er nur:

test

Aber test ist kein Link, sondern normaler Text
Warum? Er sollte doch eigentlich den Quelltext anzeigen, oder?

 

[simonpicos]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Sry, aber habe noch ein Problem!
Wenn ich da iwie html Code eingebe, z.B.

<a href="#">test</a>

Dann zeigt er nur:

test

Aber test ist kein Link, sondern normaler Text
Warum? Er sollte doch eigentlich den Quelltext anzeigen, oder?

Also soll der Dargestellte Text verlinkt werden? Hab mich grad mal auf der Seite umgeschaut: Es gibt ein Plugin dafür, das sollte das Problem lösen: http://prismjs.com/plugins/autolinker/

 

[AndreasChris]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

... oder Du nimmst einfach ein Java-script, hier ein link:

Nur zur Info: Dein Link funktioniert nur mit Copy+Paste. Beim Klicken funktioniert der Link nicht. (Grund: doppeltes http)
Hier müsste er dafür gehen:

 

[d3mueller]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Also soll der Dargestellte Text verlinkt werden? Hab mich grad mal auf der Seite umgeschaut: Es gibt ein Plugin dafür, das sollte das Problem lösen: http://prismjs.com/plugins/autolinker/

Danke ganz übersehen^^.

Also kann ich das auch verwenden? Weil nicht das ich da cuh noch Lizenzangaben überlesen habe.

 

[Kajo76]

AW: HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting

Hallo zusammen,

habe diesen Thread durch die Suche nach Prism gefunden, mit dem ich Probleme habe.

Prism stellt mir nur CSS-Code farbig dar, bei HTML-Code funktioniert das ganze leider nicht (siehe Bild). Wieso und weshalb sind die Fragen, die ich mir bisher nicht beantworten konnte. Habe schon beide Versionen (Minified und Development) ausprobiert.

Könnt ihr da eventuell weiterhelfen?



Mein Code sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/prism.css" />
</head>

<body>
<pre>
<code class="language-html">
    <p>Hallo Welt!</p>
    &lt;p&gt;Hallo Welt!&lt;/p&gt;
</code>
<code class="language-css">
    p {
        color:#778899;
    }
</code>
</pre>

<script src="js/prism.js"></script>

</body>
</html>

Grüße,
Kajo76