Как я могу показать фрагменты HTML на веб-странице, не заменяя каждый <
на <
и >
на >
?
Другими словами, есть ли тег для не отображать HTML, пока вы не нажмете закрывающий тег ?
Нет , нет В собственно HTML нет возможности избежать некоторых символов:
&
так как &
<
так как <
(Между прочим, бежать не нужно, >
но люди часто делают это по соображениям симметрии.)
И, конечно, вы должны окружить полученный, экранированный HTML-код, <pre><code>…</code></pre>
чтобы (а) сохранить пробелы и разрывы строк, и (б) пометить его как элемент кода.
Все другие решения, такие как упаковка вашего кода в элемент ( <textarea>
или устаревший) <xmp>
, будут сломаны . 1
XHTML , который объявлен в браузер в виде XML (через HTTP Content-Type
заголовок - просто установив! DOCTYPE
Это не достаточно ) в качестве альтернативы может использовать секцию CDATA:
<![CDATA[Your <code> here]]>
Но это работает только в XML, а не в HTML, и даже это не является надежным решением, поскольку код не должен содержать закрывающий разделитель ]]>
. Так что даже в XML самое простое и надежное решение - через экранирование.
1 Показательный пример:
>
на>
<
и&
нужно заменить, неэкранированный>
действителен внутри HTML.Испытанный и верный метод для HTML:
&
персонажа на&
<
персонажа на<
>
персонажа на>
<pre>
и / или<code>
.источник
&
первым и<
после.лучший способ:
старые образцы:
образец 1 :
образец 2 :
Пример 3 : (Если вы на самом деле «цитируете» блок кода, то разметка будет)
хороший пример CSS:
Код подсветки синтаксиса (для профессиональной работы):
радуга (очень идеально)
принаряжать
syntaxhighlighter
основной момент
JSHighlighter
лучшие ссылки для вас:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
https://code.google.com/p/jquery-chili-js/
Как выделить исходный код в HTML?
источник
Вид наивного метода для отображения кода будет включать его в текстовое поле и добавлять атрибут disabled, чтобы он не редактировался.
Надеюсь, что помочь кому-то ищет легкий способ сделать вещи ..
источник
Устаревший , но работает в FF3 и IE8.
Рекомендуемые:
источник
Я использовал так
<xmp>
же, как это: http://jsfiddle.net/barnameha/hF985/1/источник
По существу устаревший
<xmp>
тег делает это, но больше не является частью спецификации XHTML. Это должно все еще работать, хотя во всех текущих браузерах.Вот еще одна идея, хитрый прием, вы можете поместить код в текстовое поле следующим образом:
Размещение угловых скобок и подобного кода внутри текстовой области является недопустимым HTML и приведет к неопределенному поведению в разных браузерах. В Internet Explorer интерпретируется HTML-код, тогда как Mozilla, Chrome и Safari оставляют его без интерпретации.
Если вы хотите, чтобы он не редактировался и выглядел по-другому, вы можете легко оформить его с помощью CSS. Единственная проблема заключается в том, что браузеры добавят эту маленькую ручку перетаскивания в нижнем правом углу, чтобы изменить размер окна. Или, альтернативно, попробуйте вместо этого использовать тег ввода.
Правильный способ внедрить код в вашу текстовую область - это использовать язык на стороне сервера, такой как этот PHP, например:
Затем он обходит интерпретатор html и помещает неинтерпретированный текст в текстовую область последовательно во всех браузерах.
Кроме этого, единственный способ действительно избежать кода самостоятельно, если используется статический HTML, или использовать методы на стороне сервера, такие как .NET HtmlEncode (), при использовании такой технологии.
источник
<textarea disabled="true" style="border: none;background-color:white; width:100%">
В HTML? Нет.
В XML / XHTML? Вы могли бы использовать
CDATA
блок.источник
Это очень просто .... Используйте этот код xmp
источник
Я предполагаю:
<
не нужно убегатьВсе ваши варианты в этом дереве:
<p>
)<
"
и&thing;
нужно экранировать:"
и&thing;
соответственно<script>
и<style>
только</script
не допускается нигде в<script>
<textarea>
и<title>
только<textarea>
хороший кандидат для переноса кода в</html>
там</textarea
по понятным причинам</textarea
или аналогичным&thing;
необходимо избежать:&thing;
Примечание:
>
никогда не нужно убегать. Даже в нормальных элементах.источник
<script>
и<style>
могут быть сделаны различимыми, а просто поместить их внутри<body>
сstyle="display: block; white-space: pre;"
иtype="text/html"
или что - то , если вы не хотите, чтобы это было выполнено в JavaScript. Я думаю, это довольно хороший трюк, подходящий для грамотного программирования и обучения. Также<xmp>
по-прежнему реализован в основных браузерах, хотя это устарело.<xmp>
не является допустимым HTML5, но другой трюк выглядит правильно!Если ваша цель - показать фрагмент кода, который вы выполняете в другом месте на той же странице, вы можете использовать textContent (это pure-js и хорошо поддерживается: http://caniuse.com/#feat=textcontent )
Чтобы получить многострочное форматирование в результате, вам нужно установить стиль css "white-space: pre;" на целевом div, и пишите строки индивидуально, используя «\ r \ n» в конце каждого.
Вот демоверсия: https://jsfiddle.net/wphps3od/
Этот метод имеет преимущество перед использованием текстовой области: код не будет переформатирован, как в текстовой области. (Такие вещи, как
полностью удалены в текстовой области)источник
<template>
или что-то, что обычно не отображается.В конечном счете, лучший (хотя и раздражающий) ответ - «избежать текста».
Однако существует множество текстовых редакторов - или даже автономных мини-утилит - которые могут сделать это автоматически. Таким образом, вам никогда не придется избегать его вручную, если вы этого не хотите (если только это не комбинация экранированного и не экранированного кода ...)
Быстрый поиск Google показывает мне это, например: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
источник
у меня работает нормально ..
«Имея в виду
Alexander's
предложение, вот почему я думаю, что это хороший подход»если мы просто попробуем обычный метод, то
<textarea>
это может не всегда работать, поскольку могут быть закрывающиеtextarea
теги, которые могут неправильно закрывать родительский тег и отображать остальную часть исходного кода HTML в родительском документе, что будет выглядеть неловко.Использование
htmlentities
преобразует все применимые символы, такие как< >
объекты HTML, что исключает любую возможность утечки.Возможно, у этого подхода есть преимущества или недостатки или лучший способ достижения тех же результатов, если так, пожалуйста, прокомментируйте, как я хотел бы учиться у них :)
источник
Вы можете использовать серверный язык, такой как PHP, для вставки необработанного текста:
затем
$str
выведите значение htmlencoded:источник
Это простой трюк, и я пробовал его в Safari и Firefox
Это покажет так:
Вы можете увидеть это в прямом эфире здесь
источник
На самом деле это способ сделать это. Он имеет ограничение (один), но на 100% стандартно, не устарел (как xmp) и работает.
И это тривиально. Вот:
Пожалуйста, позвольте мне объяснить. Прежде всего, обычный HTML-комментарий делает работу, чтобы предотвратить интерпретацию всего блока. Вы можете легко добавить в него любые теги, все они будут игнорироваться. Игнорируется при интерпретации, но все еще доступно через
innerHTML
! Так что осталось получить содержимое и отфильтровать предыдущие и конечные токены комментариев.За исключением (помните - ограничение) вы не можете поместить туда комментарии HTML внутри, так как (по крайней мере, в моем Chrome) их вложение не поддерживается, и самое первое '->' завершит показ.
Ну, это маленькое неприятное ограничение, но в некоторых случаях это совсем не проблема, если в вашем тексте нет комментариев HTML. И легче избежать одной конструкции, чем целая куча из них.
Теперь, что это за странная
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
строка? Это случайная строка, похожая на хеш, которая вряд ли будет использоваться в блоке и используется для? Вот контекст, почему я его использовал. В моем случае я взял содержимое одного DIV, затем обработал его с помощью разметки Showdown, а затем вывод, назначенный в другой div. Идея заключалась в том, чтобы написать встроенную уценку в файле HTML и просто открыть в браузере, и она будет преобразовываться при загрузке на лету. Так что, в моем случае,<!--
трансформировался в<p><!--</p>
, комментарий правильно избежал. Работало, но загрязняло экран. Таким образом, чтобы легко удалить его с помощью регулярного выражения, была использована случайная строка. Вот код:И это работает.
Если кому-то интересно, эта статья написана с использованием этой техники. Не стесняйтесь скачать, и загляните внутрь HTML-файла.
Это зависит от того, для чего вы его используете. Это пользовательский ввод? Тогда используйте
<textarea>
и избегайте всего. В моем случае, и, вероятно, это тоже ваш случай, я просто использовал комментарии, и это делает свою работу.Если вы не используете уценку и просто хотите получить ее как есть из тега, то это еще проще:
и код JavaScript, чтобы получить его:
источник
Есть несколько способов избежать всего в HTML, ни один из них не хорош.
Или вы можете вставить в него
iframe
загрузку простого старого текстового файла.источник
На данный момент это лучший метод для большинства ситуаций:
Я бы проголосовал первым, кто предложил это, но у меня нет репутации. Я был вынужден что-то сказать ради людей, пытающихся найти ответы в Интернете.
источник
Вот как я это сделал:
источник
он вернет сбежавший HTML
источник
Вы можете попробовать:
источник
Это может не работать в каждой ситуации, но размещение фрагментов кода внутри
textarea
будет отображать их как код.Вы можете стилизовать текстовую область с помощью CSS, если не хотите, чтобы она выглядела как настоящая текстовая область.
источник
Это немного взломать, но мы можем использовать что-то вроде:
С этим CSS браузер будет отображать скрипты внутри тела. Он не будет пытаться выполнить этот скрипт, так как он имеет неизвестный тип
text/html
. Нет необходимости экранировать специальные символы внутри a<script>
, если только вы не хотите включить закрывающий</script>
тег.Я использую что-то вроде этого для отображения исполняемого JavaScript в теле страницы, для своего рода «грамотного программирования».
В этом вопросе есть дополнительная информация. Когда теги должны быть видны и почему они могут быть? ,
источник
источник
Комбинация пары ответов, которые работают здесь вместе:
источник