Як адлюстраваць неапрацаваны HTML код у PRE ці нешта накшталт гэтага, але не пазбегнуць яго

I'd like to display raw HTML. We all know one has to escape each "<" and ">" like this

     
 this is a test  &ltDIV> 

Тым не менш, я не хачу, каб гэта зрабіць. Я хацеў бы спосаб, каб захаваць HTML-код, як гэта (так як лягчэй чытаць, (у рэдактары) і я мог бы скапіяваць і выкарыстоўваць яго зноў сябе як фактычны HTML код, і не хочуць мець змяніць яго зноў або мець 2 версіі аднаго і таго ж кода, адзін бег і адзін не ўцёк).

Ці ёсць іншыя ўмовы, якія больш «сырой», чым PRE, якія маглі б дазволіць гэта? Такім чынам, адзін не павінен трымаць рэдагавання HTML і змяніць усе кожны раз, калі яны хочуць, каб паказаць некаторыя неапрацаваны HTML код, можа быць у HTML5?

Something like ...... </<REALLY_REALLY_VERBATIM>

<�Моцны> здымак экрана

The JavaScript solution does not work on FF 21, here is screen shot enter image description here

screen shot 2

The first solution still does not work on firefox, here is screen shot enter image description here

52
Я толькі адзін, каб думаць, што гэта неверагодна, што мы павінны быць настолькі Hacky проста выконваць такую ​​агульную задачу, як паказвае код? Я сапраўды думаю, што рашэнне гэтай праблемы павінна вырашацца раней, чым іншыя новыя, надыходзячыя, але не ў якасці карыснай HTML-тэгі.
дададзена аўтар Nobita, крыніца

7 адказы

You can use the xmp element, see What was the

tag used for?
. It has been in HTML since the beginning and is supported by all browsers. Specifications frown upon it, but HTML5 CR still describes it and requires browsers to support it (though it also tells authors not to use it, but it cannot really prevent you).

Everything inside xmp is taken as such, no markup (tags or character references) is recognized there, except, for apparent reason, the end tag of the element itself, .

У адваротным выпадку XMP візуалізуецца як загадзя .

Пры выкарыстанні «рэальны XHTML», г.зн. XHTML служыў з тыпам xml медыя (што бывае вельмі рэдка), спецыяльныя правілы разбору не прымяняюцца, таму XMP апрацоўваецца як загадзя . Але ў «рэальнай XHTML», вы можаце выкарыстоўваць раздзел CDATA, што прадугледжвае аналагічныя правілы аналізу. Гэта не мае ніякага спецыяльнага фарматавання, так што вы, верагодна, хочаце, каб абгарнуць яго ўнутры загадзя элемент:


 will
appear literally.
]]>

Я не разумею, як вы маглі б аб'яднаць XMP і CDATA секцыя для дасягнення так званай паліглот разметкі

82
дададзена
@jlguenego, Вядома, з такой заявай вы ведаеце, што вам трэба [правіць] ?
дададзена аўтар Pacerier, крыніца
@ JukkaK.Korpela, Што
  стаяць?
дададзена аўтар Pacerier, крыніца
@GitaarLAB, добрыя пытанні, я падоўжыць мой адказ.
дададзена аўтар Jukka K. Korpela, крыніца
+1 выдатна! Вы б ведаць, калі гэта
  таксама падтрымліваецца ў паліглота і г.д.? Акрамя таго, ёсць (х) (ХТ) мл версія, дзе   бла-бла і </тэг>]]>  можа быць выкарыстаны?
дададзена аўтар GitaarLAB, крыніца
XMP з'яўляецца састарэлай тэг.
дададзена аўтар jlguenego, крыніца
дададзена аўтар jlguenego, крыніца

Па сутнасці, зыходны пытанне можна разбіць на 2 часткі:

  • Асноўная мэта/задача: ўкладанне (/ транспартаванне) сырой адфарматаваны код-сниппет (Любы выгляд кода) у разметцы на вэб-старонку (для простага капіявання/устаўкі/рэдагавання з-за адсутнасці кадавання/ўцёкаў) </літый>
  • правільна адлюстравання/рэндэрынгу, што код-фрагмент (магчыма рэдагаваць) у браўзэр

Кароткі (а) неадназначная Адказ :. <�Моцны> вы не можаце ... але вы можаце (вельмі блізка)
(Я ведаю, што 3 супярэчлівых адказаў, так што чытайце далей ...)

(polyglot)(x)(ht)ml Markup-languages rely on wrapping (almost) everything between begin/opening and end/closing tags/character(sequences).
So, to embed any kind of raw code/snippet inside your markup-language, one will always have to escape/encode every instance (inside that snippet) that resembles the character(-sequence) that would close the wrapping 'container' element in the markup. (During this post I'll refer to this as rule no 1.)
Think of "some "data" here" or ..close italics with ''-tag, where it is obvious one should escape/encode (something in) and " (or change container's quote-character from " to ').

So, because of rule no 1, you can't 'just' embed 'any' unknown raw code-snippet inside markup.
Because, if one has to escape/encode even one character inside the raw snippet, then that snippet would no longer be the same original 'pure raw code' that anyone can copy/paste/edit in the document's markup without further thought. It would lead to malformed/illegal markup and Mojibake (mainly) because of entities.
Also, should that snippet contain such characters, you'd still need some JavaScript to 'translate' that character(sequence) from (and to) it's escaped/encoded representation to display the snippet correctly in the 'webpage' (for copy/paste/edit).

Гэта прыводзіць нас да (некаторым) тыпах дадзеных, якія разметка мовы пазначыць. Гэтыя тыпы дадзеных па сутнасці вызначаюць, што лічыцца «дапушчальныя сімвалы» і іх значэнне (за тэгам, ўласнасць і г.д.):

  • PCDATA (Parsed Character DATA): will expand entities and one must escape <, & (and > depending on markup language/version).
    Most tags like body, div, pre, etc, but also textarea (until HTML5) fall under this type.
    So not only do you need to encode all the container's closing character-sequences inside the snippet, you also have to encode all <, & (,>) characters (at minimum).
    Needless to say, encoding/escaping this many characters falls outside this objective's scope of embedding a raw snippet in the markup.
    '..But a textarea seems to work...', yes, either because of the browsers error-engine trying to make something out of it, or because HTML5:

  • RCDATA (Replaceable Character DATA): will not not treat tags inside the text as markup (but are still governed by rule 1), so one doesn't need to encode < (>). BUT entities are still expanded, so they and 'ambiguous ampersands' (&) need special care.
    The current HTML5 spec says the textarea is now a RCDATA field and (quote):

    The text in raw text and RCDATA elements must not contain any occurrences of the string "</" (U+003C LESS-THAN SIGN, U+002F SOLIDUS) followed by characters that case-insensitively match the tag name of the element followed by one of U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), or U+002F SOLIDUS (/).

    Thus no matter what, textarea needs a hefty entity translation handler or it will eventually Mojibake on entities!

  • CDATA (Character Data) will not treat tags inside the text as markup and will not expand entities.
    So as long as the raw snippet code does not violate rule 1 (that one can't have the containers closing character(sequence) inside the snippet), this requires no other escaping/encoding.

Відавочна, гэта зводзіцца да таго: як мы можам мінімізаваць колькасць знакаў/сімвалаў-паслядоўнасцяў, якія па-ранейшаму павінны быць закадзіраваны ў неапрацаваным крыніцы сниппета ў і колькасць раз, што характар (паслядоўнасць) можа з'явіцца ў сярэднім фрагменце; тое, што таксама важна для JavaScript, які апрацоўвае пераклад гэтых сімвалаў (калі яны адбываюцца).

Такім чынам, што кантэйнеры маюць гэты CDATA кантэкст?

Большасць значэнняў уласцівасцяў тэгаў CDATA, так што адзін можа (аb) выкарыстоўваць ўласцівасць значэння схаванага ўводу дадзеных у ( доказ канцэпцыі jsfiddle тут ).
Аднак (адпавядае правілу 1) гэта стварае кадаваньне/перасцерагчы сябе ад праблемы з укладзенымі двукоссямі ( " і ) у неапрацаваным сниппета і адзін неабходны JavaScript для атрымання/перакладу і ўсталяваць фрагмент код у іншым (бачным) элеменце (ці проста ўсталяваць яго ў якасці значэння TEXTAREA в). как-то гэта дало мне праблемы з сутнасцямі ў FF (гэтак жа, як у тэкставым полі). Але гэта не мае ніякага значэння, бо «цана 'таго, каб пазбегнуць/кадзіраваць укладзеныя цытаты вышэй, то ў (HTML5) (тэкставае поле каціроўкі даволі часта сустракаюцца ў зыходным кодзе ..).

What about trying to (ab)use bla & bla]]> ?
As Jukka points out in his extended answer, this would only work in (rare) 'real xhtml'.
I thought of using a script-tag (with or without such a CDATA wrapper inside the script-tag) together with a multi-line comment /* */ that wraps the raw snippet (script-tags can have an id and you can access them by count). But since this obviously introduces a escaping problem with */, ]]> and in the raw snippet, this doesn't seem like a solution either.

Калі ласка, пост і іншыя жыццяздольныя футавыя кантэйнераў "у каментарах да такога адказу.

Дарэчы, кадавання або падліку колькасці - знакаў і уравновешивая іх усярэдзіне тэга каментара гэта проста вар'яцтва для гэтай мэты (акрамя правіла 1).


That leaves us with Jukka K. Korpela's excellent answer: the

 tag seems the best option!     


The 'forgotten'
holds CDATA, is intended for this purpose AND is indeed still in the current HTML 5 spec (and has been at least since HTML3.2); exactly what we need! It's also widely supported, even in IE6 (that is.. until it suffers from the same regression as the scrolling table-body).
Note: as Jukka pointed out, this will not work in true xhtml or polyglot (that will treat it as a pre) and the xmp tag must still adhere to rule no 1. But that's the 'only' rule.
Разгледзім наступную разметку:
<!-- ATTENTION: replace any occurrence of </xmp with 
<div>
    <div>this is an example div & holds an xmp tag:

The above codeblok illustrates a raw piece of markup where
contains an (almost raw) code-snippet (containing div>div>xmp>html-document).
Notice the encoded closing tag in this markup? To comply with rule no 1, this was encoded/escaped).
Такім чынам, ўкладанне/транспарціроўка (часам амаль) сырой код/​​здаецца вырашана.
What about displaying/rendering the snippet (and that encoded </xmp>)?
The browser will (or it should) render the snippet (the contents inside snippet-container) exactly the way you see it in the codeblock above (with some discrepancy amongst browsers whether or not the snippet starts with a blank line).
That includes the formatting/indentation, entities (like the string &), full tags, comments AND the encoded closing tag </xmp> (just like it was encoded in the markup). And depending on browser(version) one could even try use the property contenteditable="true" to edit this snippet (all that without JavaScript enabled). Doing something like textarea.value=xmp.innerHTML is also a breeze.
So you can... if the snippet doesn't contain the containers closing character-sequence.
However, should a raw snippet contain the closing character-sequence
(because it is an example of xmp itself or it contains some regex, etc), you must accept that you have to encode/escape that sequence in the raw snippet AND need a JavaScript handler to translate that encoding to display/render the encoded </xmp> like  inside a textarea (for editing/posting) or (for example) a pre just to correctly render the snippet's code (or so it seems).


Вельмі рудыментарных jsfiddle прыклад гэтага тут . Звярніце ўвагу, што атрыманне/ўкладанне/адлюстраванне/выманне да тэкставага працавала ідэальна, нават у IE6. Але ўстаноўка XMP 's innerHTML паказаў цікавую "" паводзіны патэнцыйных-інтэлектуальны на часткі IE. Існуе больш шырокая запіска і абыходны шлях на тым, што ў скрыпцы.
Але цяпер прыходзіць <�����������������������������������������������������������������������������������������������������������������������
������������������������������
�������������������������
��
�l, to comply with rule 1, we 'only' need to encode those \n\r\t\f\/] sequences, right?
Так што дае нам наступную разметку (выкарыстоўваючы толькі магчымую кадоўку):

<!-- remember to translate between </xmp> and </xmp> -->

Хм .. дзень гэты я атрымаю свой крыштальны шар ці манетку? Не, хай кампутар погляд на яго сістэмных гадзінах і стане, у якім вытворнае лік з'яўляецца «выпадковым». Так, гэта павінна зрабіць гэта ..
Using a regex like: xmp.innerHTML.replace(/<(?=\/xmp[> \n\r\t\f\/])/gi, '<');, would translate 'back' to this:
<!-- remember to translate between  and  -->

Хм .. здаецца, што гэта генератар выпадковых лікаў разбіваецца ... Х'юстан ..?
Калі вы прапусцілі жарт/праблемы, прачытайце яшчэ раз, пачынаючы з «меркаванага сырога кода-фрагмента».
Пачакайце, я ведаю, мы (таксама) трэба закадаваць .... для ....
Добра, пераматаць «прызначаны неапрацаваны кодавы фрагмент» і чытаць зноў.
Неяк усё гэта пачынае пахнуць як знакаміты вясёлы але-праўдзівы rexgex-адказ на SO , добрае чытанне для людзей, якія валодаюць у кракозябрамі.
Maybe someone knows a clever algorithm or solution to fix this problem, but I assume that the embedded raw code will get more and more obscure to the point where you'd be better of properly escaping/encoding just your <, & (and >), just like the rest of the world.
Conclusion: (using the xmp tag)
  • гэта можа быць зроблена з вядомымі фрагментамі, якія не ўтрымліваюць зачыняе сімвал-паслядоўнасць кантэйнера,
  • мы можам атрымаць вельмі блізка да першапачатковай мэты з вядомымі фрагментамі, якія выкарыстоўваюць толькі «асноўнай першы ўзровень» вынікаюць/кадаваньне, каб мы не патрапілі ў rabbithole,
  • , але у канчатковым рахунку , здаецца, што ніхто не можа зрабіць гэта надзейна ў «вытворчай і навакольнага асяроддзя», дзе людзі могуць/павінны капіяваць/ўставіць/рэдагаваць «любыя невядомыя» сырыя апісання вэб, а не ведаючы/разуменне наступствы/правілы/rabbithole (у залежнасці ад рэалізацыі апрацоўкі/перакладаў правілы 1 і rabbithole).

Спадзяюся, што гэта дапамагае!
PS: У той час як я быў бы ўдзячны upvote калі вы знайшлі гэта тлумачэнне карысным, я збольшага думаю адказ Юкка павінен быць прыняты адказ (калі не лепшы варыянт/адказ прыходзяць), так як ён быў адзін, хто ўспомніў XMP тэг (што я забыўся аб на працягу многіх гадоў, і атрымаў «адцягваецца» па шырока прапагандуюцца элементаў PCDATA як загадзя , тэкставае поле і г.д.).
Адказ на гэтае пытанне ўзнікла ў тлумачэнні, чаму вы не можаце гэта зрабіць (з любым невядомым сырым сниппет) і растлумачыць некаторыя відавочныя падводныя камяні, што некаторыя іншыя (у цяперашні час выдалены) адказы ўпушчаныя пры кансультаванні тэкставую для ўкладання/транспарту. Я пашырыў мае існуючыя тлумачэнні таксама падтрымаць і далей растлумачыць адказ Юкі (у так як усе, што асобы і * CDATA матэрыял амаль складаней, чым кодавыя старонкі).


a paragraph




a paragraph

</xmp>

��
�������

��
 
<html><head>  <!-- indentation col 0!! -->
    <title>My Title</title>
</head><body>
    
hello world !!

</body></html> </xmp> <!-- note this encoded/escaped tag --> </div> This line is also part of the snippet </div>


22
дададзена
Я інтэрпрэтаваў першапачатковы пытанне: «як ёсць фарматаваны сырой код-фрагмент ўнутры элемента ўнутры сапраўднага HTML-крыніцы» (вы таксама пачаць свой адказ: ..... . </<REALLY_REALLY_VERBATIM> ). Нават без гэтага абмежавання (так што гэта не мае значэння, як (правільна) сырой крыніца патрапіць у элемент) адзін ўсё яшчэ мае патрэбу ў чым крануць руціне, калі толькі для абароны ад /] ( што даволі відавочна, калі вы думаеце пра тое, што), напрыклад.
дададзена аўтар GitaarLAB, крыніца
PS: Я шукаю ў <[CDATA [<�тэг> бла-бла і </тэг>]]> , але я ў цяперашні час не ўпэўненыя ў дадзены момант аб дакладных правіл па ўсёй разметкі моў ( HTML, XHTML, XML, паліглот, і г.д.) і якая служыць-метаду.
дададзена аўтар GitaarLAB, крыніца
Тое, што вы пішаце, вельмі дакладна і ў адпаведнасці са спецыфікацыяй, але ў канцы дня ФП пасля таго, як рашэнне, якое дазволіць яму, каб скапіяваць тэкст з элемента і выкарыстоўваць яго зноў. Я адчуў на Chrome, Firefox і IE, паставіўшы ўсе спецыяльныя сімвалы, якія Вы згадваецца ў крыніцы HTML ўнутры тэкставага поля, і ён не хоча, каб зламацца. Калі я скапіяваць значэнне з тэкставага поля гэта заўсёды менавіта тое, што было ў зыходным кодзе HTML першапачаткова.
дададзена аўтар Mathijs Flietstra, крыніца
Па-сапраўднаму шэкспіраўская прэзентацыя! Калі фільм выйдзе?
дададзена аўтар Kebman, крыніца

Танны і вясёлы адказ:




Тэкставае поле будзе апрацоўваць ўкладкі, множныя прабелы, пераклады радкоў, перанос радкоў усё даслоўна. Ён капіюе і ўстаўляе яго прыгожа і дзейнічае HTML ўвесь шлях. Гэта таксама дазваляе карыстачу змяняць памер акна кода. Вам не трэба якой-небудзь CSS, JS, ратуючыся, кадзіраванне.

Вы можаце змяніць знешні выгляд і паводзіны, а таксама. Вось монашырынны шрыфт, рэдагаванне непрацуючыя, больш дробны шрыфт, няма мяжы:




Гэта рашэнне, верагодна, не семантычна правільна. Так што, калі вам трэба, што, магчыма, было б лепш абраць больш складаны адказ.

6
дададзена
Рашэнне прасцей і гэта робіць працу!
дададзена аўтар RousseauAlexandre, крыніца
echo '
' . htmlspecialchars("<div>raw HTML</div>") . '
';

Я думаю, што гэта тое, што вы шукаеце?

Іншымі словамі, выкарыстоўвайце htmlspecialchars() у PHP

4
дададзена

@GitaarLAB and @Jukka elaborate that

 tag is obsolete, but still the best. When I use it like this


то першы EOL ўстаўляецца ў код, і выглядае жудасна .
Яна можа быць вырашана шляхам выдалення, што EOL

but then it looks bad in the source. I used to solve it with wrapping <div>, but recently I figured out a nice CSS3 rule, I hope it also helps somebody:
xmp { margin: 5px 0; padding: 0 5px 5px 5px; background: #CCC; }
xmp:before { content: ""; display: block; height: 1em; margin: 0 -5px -2em -5px; }

This looks better.
<div>Lorem ipsum</div>

Hello



<div>Lorem ipsum</div>

Hello



3
дададзена

xmp is the way to go, i.e.:


  # your code...


2
дададзена

Калі ў вас ўключана функцыя jQuery вы можаце выкарыстоўваць функцыю escapeXml і не прыйдзецца турбавацца аб тым, якія вылятаюць стрэлкамі або спецыяльных знакаў.


  ${fn:escapeXml('
    <!-- all your code --> 
  ')};


1
дададзена