Показать HTML-код в HTML - PullRequest
174 голосов
/ 12 мая 2010

Есть ли способ показать фрагменты кода HTML на веб-странице без необходимости замены каждого < на &lt; и > на &gt;?

Другими словами, есть ли некоторыетег для не отображать HTML, пока вы не нажмете на закрывающий тег ?

Ответы [ 23 ]

144 голосов
/ 12 мая 2010

Проверенный и верный метод для HTML:

  1. Заменить символ & на &amp;
  2. Заменить символ < на &lt;
  3. Заменить символ > на &gt;
  4. При желании окружите образец HTML тегами <pre> и / или <code>.
137 голосов
/ 29 ноября 2013

лучший способ:

<xmp>
// your codes ..
</xmp>

старые образцы:

образец 1 :

<code><pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.

образец 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  

образец 3 : (Если вы на самом деле «цитируете» блок кода, разметка будет такой)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    
  

хороший пример CSS:

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

Код подсветки синтаксиса (для профессиональной работы):

радуга (очень идеально)

prettify

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?

73 голосов
/ 12 мая 2010

Нет , нет.В собственно HTML нет способа избежать некоторых символов:

  • & как &amp;
  • < как &lt;

(Между прочим, нет необходимости избегать >, но люди часто делают это по соображениям симметрии.)

И, конечно, вы должны окружить полученный, экранированный HTML-код, в <pre><code>… - (a) сохранить пробелы и разрывы строк, и (b) пометить его как элемент кода.

Все другие решения, такие как упаковка кода в <textarea> или (не рекомендуется) *Элемент 1024 *, сломает . 1

XHTML, который объявлен в браузере как XML (через заголовок HTTP Content-Type! - просто установка DOCTYPE is недостаточно ) может альтернативно использовать раздел CDATA:

<![CDATA[Your <code> here]]>

Но это работает только в XML, а не в HTML, и даже это не является надежным решением, так каккод не должен содержать закрывающий разделитель ]]>.Так что даже в XML самое простое и надежное решение - через экранирование.


1 Пример:

textarea {border: none; width: 100%;}
<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>
42 голосов
/ 05 января 2015

Вид наивного метода для отображения кода будет включать его в текстовую область и добавлять отключенный атрибут, чтобы он не редактировался.

<textarea disabled> code </textarea>

Надеюсь, что это поможет кому-то, ищущему простой способ сделать что-нибудь ..

25 голосов
/ 12 мая 2010

Устаревший , но работает в FF3 и IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Рекомендуется:

<pre><code>
    code here, escape it yourself.
14 голосов
/ 11 ноября 2013

я использовал <xmp> просто так: http://jsfiddle.net/barnameha/hF985/1/

6 голосов
/ 23 августа 2014

Это очень просто .... Используйте этот код xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
6 голосов
/ 12 мая 2010

в HTML?Нет.

В XML / XHTML?Вы можете использовать блок CDATA.

5 голосов
/ 12 мая 2010

Устаревший тег <xmp>, по сути, делает это, но больше не является частью спецификации XHTML. Это должно все еще работать, хотя во всех текущих браузерах.

Вот еще одна идея, трюк с хакерской атакой, вы можете поместить код в текстовое поле следующим образом:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Помещение угловых скобок и подобного кода в текстовую область является недопустимым HTML и приведет к неопределенному поведению в разных браузерах. В Internet Explorer интерпретируется HTML, а Mozilla, Chrome и Safari оставляют его без интерпретации.

Если вы хотите, чтобы он не редактировался и выглядел по-другому, вы можете легко оформить его с помощью CSS. Единственная проблема заключается в том, что браузеры добавят эту маленькую ручку перетаскивания в нижнем правом углу, чтобы изменить размер окна. Или же попробуйте вместо этого использовать тег ввода.

Правильный способ внедрить код в текстовую область - это использовать язык на стороне сервера, такой как этот PHP, например:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

Затем он обходит интерпретатор html и последовательно помещает неинтерпретированный текст в текстовую область во всех браузерах.

Кроме этого, единственный способ - это на самом деле избежать кода самостоятельно, если используется статический HTML, или использовать методы на стороне сервера, такие как .NET HtmlEncode (), при использовании такой технологии.

5 голосов
/ 08 января 2017

Я предполагаю:

  • Вы хотите написать 100% действительный HTML5
  • вы хотите поместить фрагмент кода (почти) литерала в HTML
    • особенно < не нужно убегать

Все ваши опции в этом дереве:

  • с синтаксисом HTML
    • Есть пять видов элементов
    • так называемые "нормальные элементы" (например, <p>)
      • не может иметь литерал <
      • это будет считаться началом следующего тега или комментария
    • пустые элементы
      • у них нет контента
      • вы можете поместить свой HTML в атрибут данных (но это верно для всех элементов)
      • , для перемещения данных в другое место потребуется JavaScript
      • в двойных кавычках, " и &thing; необходимо экранировать: &quot; и &amp;thing; соответственно
    • необработанные текстовые элементы
      • <script> и <style> только
      • они никогда не становятся видимыми
      • но встраивание вашего текста в Javascript может быть осуществимо
      • Javascript допускает многострочные строки с обратными чертами
      • он может быть вставлен динамически
      • литерал </script не допускается нигде в <script>
    • экранируемые текстовые элементы
      • <textarea> и <title> только
      • <textarea> - хороший кандидат для переноса кода в
      • абсолютно законно писать </html> там
      • не разрешена подстрока </textarea по понятным причинам
        • экранируйте этот особый случай с &lt;/textarea или аналогичным
      • &thing; необходимо убежать: &amp;thing;
    • посторонние элементы
      • элементы из пространств имен MathML и SVG
      • по крайней мере SVG позволяет снова встраивать HTML ...
      • и CDATA там разрешен, поэтому кажется, что он имеет потенциал
  • с синтаксисом XML

Примечание: > никогда не нуждается в побеге. Даже в обычных элементах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...