[ERLEDIGT] Code in eigene Seite einfügen

[TimoW]

Hallo,
tut mir leid, falsch dies im falschen Thread ist. Weiß leider nicht genau, wozu dies gehört.
Jedenfalls wollte ich fragen, wie man seinen eigenen (HTML/CSS/JS/etc)-Code in seine eigene Seite einfügen kann.
Also quasi wie dieses Beispiel hier:

Test, Test

LG

 

[threadi]

Deine Frage ist ziemlich vieldeutig. Normalerweise nutzt man für die Bearbeitung von Dateien der Webseite einen Editor oder ein CMS, welches man zur Verfügung hat. Was ist der Hintergrund deiner Frage?

 

[SpiceLab]

Vielleicht willst Du auf Kopieren und Einfügen hinaus?

Code bei gedrückter linker Maustaste markieren, Tastenkombination STRG + C (kopieren), und im Dokument Tastenkombination STRG + V (einfügen).

Oder ausschließlich mit der Maus:

Code bei gedrückter linker Maustaste markieren, rechte Maustaste -> Kopieren wählen, und im Dokument erneut rechte Maustaste -> Einfügen wählen.

Andernfalls die Frage bitte präzisieren ;)

 

[TimoW]

Oh! Nein, ich meinte was ganz anderes, aber wenn ich meine frage nochmal so Nachlese kann ich euch verstehen. Also, tut mir leid und ich probiere es nochmal. ;)
Also, ich möchte einfach nur meinen HTML/CSS/WHATEVER-Code in meiner Seite eingebunden haben. Also so, dass man sich den Quellcode angucken kann. Und daher meinte ich auch das Test, Test Beispiel. Sagen wir "Test, Test" wäre jetzt mein Quellcode, den ich jetzt auf meiner Seite zeigen möchte. Dann möchte ich, dass das so angezeigt wird, wie hier unten:

Test, Test

Also, dass man sich meinen Quellcode in so einer Box angucken kann und ihn gegebenen Falles auch kopieren könnte.

Hoffe dies war verständlicher. ;)
Vielen Dank und LG!

 

[SpiceLab]

https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/pre

<pre>
  <code>
    &lt;p&gt;Textabsatz&lt;/p&gt;
  </code> 
</pre>

 

[NetAktiv]

HTML Seiten kann der Benutzer doch mittels Browser-Funktionen ansehen. Falls du PHP-Code hast, dann musst ein kleines Script schreiben, dass die Datei vom Server liest und als Text überträgt. Text aus dem gleichen Dokument könntest durch JavaScript einblenden, da schau mal nach de Funktionen documentGetElementById und den Properties innerHTML und innerText. Könntest so eine Anzeigeelement auswählen und den darin Inhalt eines anderen anzeigen. Falls du zum Lesen innerHTML verwendest, dann musst natürlich vor dem Anzeigen die HTML Steuerzeichen wie < > & in HTML Entities umwandeln, siehe dazu die Funktion Encode oder eventuell ein einfaches Replace.

https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/pre

Dann muss er den Text ja verdoppeln und das will er sicher nicht. Außerdem zeigt <pre> keine HTML Tags an, sondern interpretiert die, also statt <strong>Hallo</strong> sieht der Benutzer Hallo

 

[SpiceLab]

Dann muss er den Text ja verdoppeln und das will er sicher nicht.

Da wär ich mir nicht so sicher, denn hier steht:

Also, dass man sich meinen Quellcode in so einer Box angucken kann und ihn gegebenen Falles auch kopieren könnte.

Und wer sagt Dir, dass es sich dabei um eine "Kopie" des Seitenquellcodes handelt?

Stichwort: Ein Tutorial mit Code-Beispielen zum Thema XYZ

Außerdem zeigt <pre> keine HTML Tags an, sondern interpretiert die, also statt <strong>Hallo</strong> sieht der Benutzer Hallo

Siehe meinen Code-Snippet :)

 

[TimoW]

Vielen Dank! :) Verschönere das einfach mit einer Border sowas. ;)
LG

 

[MrMurphy]

Hallo

Das ist kein einfaches Thema. Zum Beispiel müssen einige Zeichen maskiert werden.

Um Quelltext anzuzeigen ist grundsätzlich das pre-Element gedacht.

Komplizierter wird es, wenn zum Beispiel Zeilennummern angezeigt werden sollen. In der Regel sollen die Zeilennummern dann zwar angezeigt, aber nicht kopiert werden. Hier im Forum wird der Quelltext deshalb in einer geordneten (nummerierten) Liste angezeigt:

<div class="code">
   <ol class="text" style="font-family:monospace;">
      <li style="font-weight: normal; vertical-align:top;">
         <div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">Test, Test</div>
      </li>
   </ol>
</div>

Noch etwas Lesestoff zu dem Thema:

http://webkrauts.de/artikel/2013/zeile-fuer-zeile

http://www.ongray-design.de/forum/viewtopic.php?f=18&t=373

http://www.guntherkrauss.de/computer/web/quelltext.html

Gruss

MrMurphy

 

[SpiceLab]

Noch etwas Lesestoff zu dem Thema:

http://webkrauts.de/artikel/2013/zeile-fuer-zeile

http://www.ongray-design.de/forum/viewtopic.php?f=18&t=373

http://www.guntherkrauss.de/computer/web/quelltext.html

Und wenn PHP zur Verfügung steht: http://qbnz.com/highlighter/

 

[NetAktiv]

Da wär ich mir nicht so sicher, denn hier steht:
Und wer sagt Dir, dass es sich dabei um eine "Kopie" des Seitenquellcodes handelt?

Stichwort: Ein Tutorial mit Code-Beispielen zum Thema XYZ
Siehe meinen Code-Snippet :)

Meine Erfahrung sagt, dass Kopieren Mist ist, weil es extrem schwer ist, das dann auf Dauer synchron zu halten, zumindest wenn man so etwas öfter macht. Außerdem muss er dann manuell die HTML Kontrollzeichen ersetzen. Dein Code Snippet war zeitgleich.

 

[SpiceLab]

Meine Erfahrung sagt, dass Kopieren Mist ist, weil es extrem schwer ist, das dann auf Dauer synchron zu halten, zumindest wenn man so etwas öfter macht.

Mit was synchron halten?

Nochmal, wenn ich ein Tutorial mit Code-Beispielen zum Thema XYZ verfasse und publiziere, kopiere/veröffentliche ich darin doch nicht den Quellcode der Tutorial-Seite.

 

[NetAktiv]

Also, dass man sich meinen Quellcode in so einer Box angucken kann und ihn gegebenen Falles auch kopieren könnte.

Das klingt für mich nicht nach Tutorial sondern so wie Quelltext anzeigen im Browser. Wenn der Code extra zur Demo geschrieben wird und nicht eine Ansicht des aktuellen Codes im Dokument sein soll, dann ist die von dir vorgeschlagene Vorgehensweise natürlich OK. Mich würde es allerdings dennoch stören, wenn ich das regelmäßig machen will, dass ich von meinen Tests herrührenden Code manuell einfügen muss und Sonderzeichen ersetze. Ich würde vermutlich den HTML Code speichern und den dynamisch beim Anzeigen der Seite Konvertieren und in einem <pre>-Element einfügen.

http://www.guntherkrauss.de/computer/web/quelltext.html

Habe mir das mal angesehen, ist ja echt irre, was man mit CSS doch so alles machen kann.

 

[SpiceLab]

Das klingt für mich nicht nach Tutorial sondern so wie Quelltext anzeigen im Browser.

Findest Du es nicht müßig, darüber jetzt zu diskutieren, was letztlich seine Intention ist, Code in seiner Seite zu demonstrieren?

Mein gewähltes Tutorial habe auch nur als denkbares Praxisbeispiel angeführt.

Mich würde es allerdings dennoch stören, wenn ich das regelmäßig machen will, dass ich von meinen Tests herrührenden Code manuell einfügen muss und Sonderzeichen ersetze. Ich würde vermutlich den HTML Code speichern und den dynamisch beim Anzeigen der Seite Konvertieren und in einem <pre>-Element einfügen.

Hier wurde die grundsätzliche Frage danach gestellt, wie Code in der Seite angezeigt/veröffentlicht werden kann.

Eine Automatisierung/dynamische Behandlung bei umfangreicheren Publikationen ist dann der nächste denkbare Schritt ;)