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

d3mueller · 16.08.2012, 10:21

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 · 16.08.2012, 10:38

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:
http://alexgorbatchev.com/SyntaxHighlighter/

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

d3mueller · 16.08.2012, 10:42

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 · 16.08.2012, 12:23

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

http://aktuell.de.selfhtml.org/artik...able-textarea/

d3mueller · 16.08.2012, 12:24

Ja, genau

simonpicos · 16.08.2012, 13:35

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

d3mueller · 16.08.2012, 13:49

Zitat:

Zitat von simonpicos

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.

Code:

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

Dann zeigt er nur:

Code:

test

Aber test ist kein Link, sondern normaler Text

Warum? Er sollte doch eigentlich den Quelltext anzeigen, oder?

simonpicos · 16.08.2012, 15:54

Zitat:

Zitat von d3mueller

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

Code:

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

Dann zeigt er nur:

Code:

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/

ACWebmaster · 16.08.2012, 17:42

Zitat:

Zitat von marcmaroc

... oder Du nimmst einfach ein Java-script, hier ein link:
http://alexgorbatchev.com/SyntaxHighlighter/

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: http://alexgorbatchev.com/SyntaxHighlighter/

d3mueller · 16.08.2012, 17:57

Zitat:

Zitat von simonpicos

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 · 26.04.2013, 09:44

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:

Code:

<!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

16.08.2012, 10:21	#1
d3mueller PC-Freak :D Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 236 Verwendet: Adobe Collection, GIMP	HTML,CSS,JS,PHP,... auf Webseite anzeigen lassen. Mit Syntax-Highlighting 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

16.08.2012, 10:38	#2
marcmaroc Member Registriert seit: 01.04.2009 Ort: Marrakech Beiträge: 117 Kamera: Nikon Coolpix L16 Verwendet: CS 5 Premium	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: http://alexgorbatchev.com/SyntaxHighlighter/ edit by simonpicos: Habe den Link mal korrigiert, der funktionierte vorher nicht. MfG Geändert von simonpicos (16.08.2012 um 17:53 Uhr).

16.08.2012, 10:42	#3
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 236 Verwendet: Adobe Collection, GIMP	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? Geändert von d3mueller (16.08.2012 um 12:14 Uhr).

16.08.2012, 12:23	#4
J000S Newbie Registriert seit: 29.09.2010 Ort: C:\HOME Beiträge: 36 Kamera: Spigelreflex EOS 1000D Verwendet: Adobe Master Collection CS 6	Du meinst, dass die Area so groß sein soll wie der Textinhalt? http://aktuell.de.selfhtml.org/artik...able-textarea/ Geändert von J000S (16.08.2012 um 12:26 Uhr).

16.08.2012, 13:35	#6
simonpicos Mod \| Web Registriert seit: 16.02.2011 Ort: Taunus Beiträge: 2.281 Kamera: Canon EOS 600D Verwendet: Adobe Creative Suite 6 Design Standard, Webocton Scriptly, Avid Studio	Dafür gibt es Scripts die ein Code-Highlighting umsetzen. Z.B.: http://prismjs.com/ __________________ Momentan ohne Signatur

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

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

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

16.08.2012, 12:24	#5
d3mueller PC-Freak :D Themenstarter Registriert seit: 22.03.2012 Ort: Deutschland Beiträge: 236 Verwendet: Adobe Collection, GIMP	Ja, genau

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
inhalt von html-seiten mit einem link dynamisch laden & anzeigen lassen	baley	(X)HTML & CSS	3	07.07.2012 01:48
HTML Code in der PHP Datei anzeigen lassen	rAAbsEn	PHP und andere Scriptsprachen	10	02.05.2011 14:31
syntax highlighting	Bleccer	Allgemeines	3	06.03.2011 08:32
HTML-File missachtet CSS-Syntax	Biernase	(X)HTML & CSS	5	04.09.2010 19:41
DW Syntax highlighting	fakerer	Allgemeines	1	22.01.2010 18:30

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

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

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige