html code laten zien op webpagina

Status
Niet open voor verdere reacties.
J

JeroenHulshof

Gebruiker
Lid geworden
13 dec 2012
Berichten
43
Hallo,

Ik zit een beetje te klooien met <textarea>. en dat werkt niet helemaal pefect.
Waar ik naar opzoek ben is een tag die alleen de text code laat zien, en niet een border etc etc erom heen doet.

Kan iemand mij helpen?

Groetjes,

Jeroen.
 
Wat je kunt doen is in de code die je wilt laten zien alle < te vervangen voor &lt; en alle > voor &gt;

Op deze manier leest HTML ze niet als codes maar geeft hij wel de < en > weer. Je kunt de code overal plaatsen waar je wilt.
 
Hoi Jeroen,
Het is een beetje een en-en zaak.
  • Als je alleen de <pre>...</pre> gebruikt, en daarbinnen echte < en > tekens, dan doet de <pre> alsof dat html-code is, met alle gevolgen van dien.
  • Als je alleen de &​lt; i.p.v. een < en een &​gt; i.p.v. een > gebruikt in een ander element, dan moet je alle code-regels een regeluiteinde <br /> geven, en zit je met opeenvolgende spaties die worden samengevoegd.
Een testpagina: bliksekaters.nl/tests/pre.htm

Voor de broncode van de 4 blokken: zie de broncode! (met <pre>'s ernaast voor de broncode zou het een beetje onoverzichtelijke pre-bende worden ;) )

Toelichting
  • In de eerste <pre id="pre1"> zitten echte < en > in de html-code. Gevolg hier: omdat het om de code van een <style> ging, wordt die style toegepast en niet de code ervan weergegeven. Plus: een prachtige html-error: er mag geen <style>-element in de <body staan!

  • In de <div id="div1"> zijn de &​lt; en de &​gt; gebruikt. Gevolg: html-code correct, maar alles staat echter elkaar.

  • In de <div id="div2"> zijn regeleinden <br /> toegevoegd, en is de voor code gebruikelijke tikmachine-letter gebruikt (de monospace = alle letters even breed). Gevolg: html-code correct, alle regels onder elkaar in code-lettertype, maar de spaties voor het inspringen zijn er niet.

  • In de <pre id="pre2"> zijn ook de &​lt; en de &gt; gebruikt, plus een <span> om delen van de code een eigen kleur te geven. Gevolg: html-code correct, alle regels onder elkaar in code-lettertype, spaties voor het inspringen zijn vanzelf toegepast, kleur volgens plan.
    NB: Doe je het op deze manier in een WYSIWYG-editor, dan kan je een <pre></pre> aanmaken, uit de code-weergave de code kopiëren, en in de ontwerp-weergave de code inplakken en de spaties erbij tikken. Daarna hoeven desgewenst in de code-weergave alleen nog <span>'s voor kleurtjes toegevoegd te worden.
Tenslotte is er nog een heel andere manier: via javascript een "syntax-highlighter" toevoegen.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan