Jak zobrazit nějaký HTML kód, aby nebyl "aktivní"

1) buď ten kód uzavřít do tagu <xmp>...</xmp>
a nebo
2) v kódu, který chceš vložit do stránky nahradit
2a) > za &gt;
2b) < za &lt;
2c) " za &quot;

můžeš třeba použít místo < > & lt; & gt;
(bez mezer mezi "&" a "lt;")

1) buď ten kód uzavřít do tagu <xmp>...</xmp>
Tohle řešení se mi líbí úplně nejvíce. Ać je nemoderní a nevalidní, je velice elegantní. Bohužel ho ignoruje moje Opera...

Bohužel ho ignoruje moje Opera...
Moje Opera ho neignoruje...

Vyzkoužel jsem prohlížeče Opera 7.54, 8.54 a 9.02 (víc jich nemám instalovaných), zobrazilo se mi podle očekávání.
mila Jakou verzi Opery jsi zkoušel?

Bubák
Vyzkoužel jsem prohlížeče Opera 7.54, 8.54 a 9.05
Vyšla nová Opera, anebo 9.05 mělo být 9.02? ;-) Každopádně bych řekl, že v Opeře to funguje a mila tam má někde chybku.

Joker
Nová Opera nevyšla, to byl překlep, už jsem ho opravil. Dík za upozornění.

Oprava, v Opeře funguje, vyžaduje ale, aby byl tag uzavřen. To samozřejmě není vůbec překážka.

Došel jsem k tomu tak, že občas když ladím php, a to důležité je ve zdrojovém kódu, tak občas hodím na začátek echo '<xmp>'; abych stále nemusel zobrazovat zdrojový kód. Když to v Opeře nefungovalo, došel jsem k unáhlenému závěru, že xmp nefunguje vůbec.

XMP používám s gustem, rád a k naprosté spokojenosti zcela navzdory mínění všemocného konsorcia. Dělejte totéž, všechny prohlížeče tento element podporují bez problémů.

Plaváček
všechny prohlížeče tento element podporují bez problémů.
To bych se neodvážil tvrdit, raději bych řekl, že ty hlavní prohlížeče ho podporují. Podle téhle diskuse http://www.jakpsatweb.cz/komentare/diskuse.php?id=290033 existují prohlížeče, které <xmp> neumí.

Mimochodem, v HTML je značka <xmp> a v XHTML by mělo fungovat následující, ne?
<![CDATA[HTML kód]]>

Joker

Pokud považujete verzi Opery 7.53 za živý prohližeč, pak máte pravdu, ano, měla s tím problém. Současné prohlížeče všechny bez výjimky (alespoň co vím) tento element podporují a já stejně jako Yuhů nechápu, proč byl označen za překonaný a odsouzen k záhubě.

Uvádím víc jako zajímavost, než něco užitečného:
Konqueror, Lynx - funguje
Links - <xmp> nefunguje

Joker
Dobrý odkaz, jsou tam zajímavé OT

Plaváček
No, problém je právě v tom "alespoň co vím" ;) Řekněme raději, že <xmp> podporují všechny hlavní prohlížeče. Přesto bych HTML kód uvnitř <xmp> pro jistotu psal tak, aby jeho případné zpracování stránku nerozložilo.

Jinak ale taky myslím, že <xmp> mohl v HTML zůstat. Ačkoliv dovedu pochopit i důvody k jeho vyhození, řídit zpracování kódu HTML značkou, kterou může prohlížeč ignorovat, není zrovna ideální. Ignorování <xmp> má totiž dopad nejen na obsah uvnitř, ale může zrušit celou stránku, třeba u konstrukce typu "Skript v HTML uzavíráme do značky <xmp><script></xmp>".

V XHTML je to pak jasné, tam takovýhle prvek být nesmí, ale tam zas existuje IMHO lepší konstrukce přes CDATA.

No nic, aby se to nezvrhlo v debatu typu HTML vs XHTML :o) uzavřel bych to, že řešení je toto:
HTML: <xmp>*kód*</xmp> (ale pro jistotu bych kód volil tak, aby jeho případné provedení nerozhodilo celou stránku)
XHTML s XML MIME: <![CDATA[*kód*]]>
V XHTML s HTML MIME bych to raději nepoužíval.

A není prostě jednodušší nahradit <> entitami, než se dohadovat o funkčnosti a vhodnosti elementu xmp? ;-)

A není nejjednodušší a uživatelsky nejpřístupnější a nejpoužitelnější prostě…

<textarea readonly="readonly" onClick="this.select();DoSchranky();">kód</textarea>

a opatřit to JS:

<script type="text/javascript">
<!--
function DoSchranky() {
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");
}
//-->
</script>

…, pánové?

Jestli nějaká starší verze Opery zlobila, šlo o chvilkovou anomálii, protože element <xmp> podporovaly již první verze současné nejznámější trojice prohlížečů.
Mimochodem, kdysi dávno měl prý <xmp> bratříčka: element <listing>. Ten měl fungovat v podstatě stejně. Nyní se ve známých prohlížečích (počínaje tuším Netscapem 1.0) chová jako <pre>. Jelikož si od letošního června zatím žádný čtenář Webylonu nestěžoval na zobrazení výpisů kódů, soudím, že takhle funguje všude.

Reaguji na Jokera:
CDATA sekce nejsou novinkou XML. Že je rozšířené prohlížeče nepodporují v HTML, je pouze důsledkem malé poptávky po nich. Každý totiž ví, že stejně dobře poslouží <xmp>.
Stejně jako CDATA sekce se v HTML chovají elementy, které mají v DTD deklarovaný obsah typu CDATA. Podle SGML je sice chybou, když obsahují sekvenci „</“ (validátor pak nadává, že našel symbol ETAGO, takže je každému jasné, o co jde), ale prakticky jediným smysluplným zotavením při této chybě je počkat na ukončovací značku naposledy otevřeného elementu. HTML elementy <script> a <style> mají obsah CDATA. Problém s kompatibilitou, který vidíš u <xmp>, byl i u těchto dvou. V podporujícím prohlížeči se text mezi <script> a </script> nebere jako značkování, v nepodporujícím naopak. Toho jde využít -- proto se do <script> dávaly/dávají HTML komentáře. Ty nejen, že zabrání nabourání struktury stránky, ale i ten kód skryjí před okem návštěvníka. V případě <xmp> je však při stejném postupu trochu problém, že se zobrazí i komentář.

Jinak není <xmp> žádná výstřední zrůda, jak si mnozí myslí. Je to jen další nevinná oběť posvátného standardizačního procesu.

Když už je řeč o XHTML, vzpomněl jsem si na jednu s tématem související modelovou situaci:
Všímavější webmaster si může říct, že stačí nahrazovat jen menšítko (a samozřejmě ampersand), protože znakem většítka žádné značkování nezačíná, je bezpečný. Taková všímavost může být v XHTML nebezpečná, XML totiž obsahuje božské pravidlo: sekvence „]]>“ užitá volně v obsahu elementu vyvolá dračí chybu. Takže většítko samo opravdu bezpečné je, ale jsou-li před ním dvě hranaté závorky, zabíjí. Otázka k zamyšlení: Uvědomí si to všímavější webmaster dříve, než mu nějaká dobrá duše diskusním příspěvkem sestřelí web? :-)

HeWeR
To mi přijde lepší to co jsem psal

Chamurappi
Ten příspěvek jsem nějak nepochopil. Já mluvil o tomhle:
Jako příkaz "Nezpracuj HTML kód" je vhodnější konstrukce, která se v prohlížeči jí neznalém bude ignorovat, než konstrukce, která v prohlížeči jí neznalém ten kód provede.
I když je pravda, že i CDATA bude mít problém, pokud si to prohlížeč vyloží takle: <![CDATA[<znacka>text<dalsiznacka>]]>
Nicméně nevím, jestli si to nějaký XML parser může tak vyložit a jestli vůbec XML parser může neznat CDATA.

HeWeR
<texarea ... >
Zasloužíš pochvalu před nastoupenou tramvají.
Že mě to nenapadlo! Asi tzv. "provozní slepota". Sice <textarea> se liší od <xmp>, ale od toho máme CSS ;-)

Script se mi nelíbí. To, že zkopírování do schránky funguje jen v IE, by tolik nevadilo. Ale to, že nelze označit a zkopírovat pouze část textu, by mě někdy pěkně iritovalo. Namísto onclick bych tam dal ondblclick + návod v podmíněném komentáři: "Dvojitým kliknutím levého tlačítka myši kód zkopírujete".

Reaguji na Jokera:
„Jako příkaz "Nezpracuj HTML kód" je vhodnější konstrukce, která se v prohlížeči jí neznalém bude ignorovat, než konstrukce, která v prohlížeči jí neznalém ten kód provede.“
To jsem pochopil a souhlasím. Pokud vím, tak bohužel v žádném HTML prohlížeči <![CDATA[...]]> sekce nejedou, ač by měly.
Navíc dodávám, že příkazy „Nezpracuj HTML kód“ ve formě elementů jsou i v té konsorciální verzi HTML: <script> a <style>. Přihodit k nim <xmp> by šlo snadno (on dokonce v HTML 3.2 byl). Ze jmenované trojice elementů má <xmp> historicky nejjistější a nejširší podporu, názor W3C není důležitý. Lidé, kteří se nebojí neobalovat interní stylopisy a skripty do komentářů, se nemusí bát ani používání <xmp>.

„Nicméně nevím, jestli si to nějaký XML parser může tak vyložit a jestli vůbec XML parser může neznat CDATA.“
Nesmí. Ale žádný strach, pokud si to tak nějaký vinou chyby vyloží, bezpečně spláchne celý dokument :-)


Reaguji na HeWeRa a Bubáka:
Řekl bych, že <textarea> nahrazuje entity, takže se v tom formulářovém okénku neobjeví skutečný HTML kód.

Chamurappi
Fajn, s tím taky souhlasím. Jak jsem psal, taky myslím, že mohl zůstat, ale vím i důvody k jeho vyhození.

Pokud vím, tak bohužel v žádném HTML prohlížeči <![CDATA[...]]> sekce nejedou, ač by měly.
V jednom přece :-) Moje Opera 9.02 je umí.
Mimochodem, taky legrace, z hlavních prohlížečů se chová každý jinak... kód (MIME typ samozřejmě text/html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>pokus</title>
</head>
<body>
<p>text před CDATA</p>
<![CDATA[<span>testík</span>]]>
<p>text za CDATA</p>
</body>

Výstup:
--Opera 9.02--
text před CDATA
<span>testík</span>
text za CDATA

--Firefox 1.5.0.7--
text před CDATA
text za CDATA

--IE6 SP2--
text před CDATA
testík]]>
text za CDATA

Opera se chová podle očekávaného správného chování. Firefox se chová podle očekávaného chování prohlížeče neznalého CDATA. Internet Explorer se opět chová po svém, respektive podle toho chování co jsem naznačil výše.
Z toho ovšem bohužel vyplývá nepoužitelnost téhle konstrukce pro HTML.

edit: Ještě dodám, že úplně stejný výstup je s doctype HTML 4.01 strict (tj. ve standardním režimu)

Joker
Já bych řekl, že právě IE se chová jako prohlížeč neznalý CDATA. Narazí na <, tam začíná značka. Hledá, kde je nejbližší >, protože tam ta značka zřejmě končí. Chování Firefoxe na mě působí tak, že zná CDATA, ale neví co si s ním počít.

llook
Spíš takhle: Firefox neví, co dělat s CDATA (to by vypsal totéž jako Opera), ale alespoň ví, že když tag začíná <! a dál obsahuje hranatou závorku, může skončit teprve za související ukončující hranatou závorkou. Proto po <![CDATA[ nestačí k ukončení značky >, ale musí po sobě následovat ], ] a >

Nic, pořád IMHO platí toto: v HTML <xmp>, v XHTML <!CDATA[...]]>

Ale když na to tak koukám, napadá mě: Jak se vlastně do XML CDATA sekce dá bezpečně uložit řetězec "]]>"?
Jde o to, že pokud se do XML ukládá nějaký uživatelský vstup, mohl by uživatel s pomocí tohohle řetězce to XML sestřelit

Joker
Převést na entity?

Joker
To mi přijde lepší to co jsem psal
Mě ne. Z pohledu uživatele bych měl raději onu mou textareu.

Bubák
To, že zkopírování do schránky funguje jen v IE, by tolik nevadilo.
V ostatních to prohlížečích to alespoň označí všechen text.

Ale to, že nelze označit a zkopírovat pouze část textu, by mě někdy pěkně iritovalo.
Mě taky. V tomto případě se ovšem jedná (pokud jsem to dobře pochopil) o kód odkazu - a zde opravu nevím co bych chtěl upravovat (a pokud chci, tak si to můžu upravit rovnou v kódu.

Chamurappi
Řekl bych, že <textarea> nahrazuje entity, takže se v tom formulářovém okénku neobjeví skutečný HTML kód.

<textarea readonly="readonly" onClick="this.select();DoSchranky();">
<a href="ahoj-jak-se-mas" title="Nic moc">Nechala mě holka</a>
</textarea>

se zobrazí jako textarea s textem: <a href="ahoj-jak-se-mas" title="Nic moc">Nechala mě holka</a>

To mé řešení používá např. Google nebo YouTube apod.

HeWeR
V ostatních to prohlížečích to alespoň označí všechen text.
To je to, co mi vadí. Povinně se označí všechen text, nemám možnost výběru. Abychom si rozuměli, u třířádkového kódu vy mi to nevadilo, upravím si ho po vložení, ale u delších výpisů, jaké jsou např. na css.interval.cz bych byl pěkně naštvaný.

Chápu, že pro lamy je lepší mít celý kód bezpracně ve schránce, ale pokročilejší uživatelé to budou chápat jako omezení - vnucuješ něco, o čem si myslíš, že je nejlepší a nelze to rychle a jednoduše obejít.

Na Ctrl+A a Ctrl+V nevidím nic složitého. A všechny oknoidní prohlížeče se chovají tak, že když klepnu do textarea, na Ctrl+A označí jen textarea, což je výhoda tohoto řešení.

Nejsem skriptař, ale myslím si, že schůdné řešení by byla texatea a pod ní tlačítko (třeba pomocí skývacích/odkrývacích podmíněných komentářů) pro IE "Zkopírovat kód" , a pro ostatní "Označit kód".

Bubák
Abychom si rozuměli, u třířádkového kódu vy mi to nevadilo, upravím si ho po vložení, ale u delších výpisů, jaké jsou např. na css.interval.cz bych byl pěkně naštvaný.
Máš ve všem pravdu. Já však vycházím z toho, na co se ptal začátečník:

Vytvořil jsem si pro svůj web ikonku a chci, aby se případnému zájemci o její vložení na jeho stránky zobrazil HTML kód, který když si na stránky vloží, moje ikonka (sloužící jako odkaz) se mu tam objeví.
tzn. nepředpokládám, že tam bude něco jiného než obrázek a odkaz

Pro dlouhé kódy nebo jakékoli kódy, které nejsou primárně určené pro CTRL+C a CTRL+V je pochopitelně textarea nevhodná.

Timy
Převést na entity?
No to právě nejde, protože entity se nepřeloží.

HeWeR
Z pohledu uživatele bych měl raději onu mou textareu.
Jak psal Chamurappi, textarea překládá entity. Takže pokud byste chtěl například validní odkaz s GET parametry, měl byste je v textarea oddělovat &amp;amp;

poznámka: že jste zmínil youTube, zrovna nedávno jsem tam s tím jejich systémem docela bojoval...