Отображение HTML-кода в HTML

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

1. заменить & персонаж с &
2. заменить < персонаж с <
3. заменить > персонаж с >
4. при необходимости окружите образец HTML <pre> и/или <code> теги.

лучшим образом:

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

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

Пример 1:

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

Пример 2:

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

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

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

хороший пример 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;
}

код подсветки синтаксиса (для pro работа):

Радуга (очень подходит)

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?

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

<textarea disabled> code </textarea>

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

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

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

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

<pre><code>
    code here, escape it yourself.
</code></pre>

Я <xmp> просто такой : http://jsfiddle.net/barnameha/hF985/1/

в HTML? Нет.

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

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

вот еще одна идея, Хак / салон трюк, вы можете поместить код в textarea, как так:

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

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

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

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

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

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

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

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

следующая ссылка будет полезна.

http://www.freebits.co.uk/convert-html-code-to-text.html

Это очень легко и дружелюбно.

в конечном итоге лучшим (хотя и раздражающим) ответом является "escape the text".

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

быстрый поиск Google показывает мне это, например:http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

я предполагаю, что:

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

все ваши варианты в этом дереве:

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

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

вы можете использовать серверный язык, например PHP, для вставки необработанного текста:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

затем сбросить значение $str htmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

есть несколько способов побег все в HTML, ни один из них не хороший.

или вы можете вставить iframe это загружает простой старый текстовый файл.

это, безусловно, лучший метод для большинства ситуаций:

<pre><code>
    code here, escape it yourself.
</code></pre>

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

вот как я это сделал:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

он вернет экранированный Html

Если ваша цель-показать фрагмент кода, который вы выполняете в другом месте на той же странице, вы можете использовать textContent (он чистый-js и хорошо поддерживается:http://caniuse.com/#feat=textcontent)

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

чтобы получить многострочное форматирование в результате, вам нужно установить стиль css " white-space: pre; "на целевом div и написать строки индивидуально, используя" \r\n " в конце каждого.

вот демо: https://jsfiddle.net/wphps3od/

этот метод имеет преимущество перед использованием textarea: код не будет переформатирован, как в textarea. (Такие вещи, как   полностью удаляются в текстовом поле)

<textarea ><?php echo htmlentities($page_html); ?></textarea>

отлично работает для меня..

"имея в виду Alexander's предложение, вот почему я думаю, что это хороший подход"

если мы просто попробовать простой <textarea> это может не всегда работать, так как может быть закрытие textarea теги, которые могут неправильно закрыть Родительский тег и отобразить остальную часть источника HTML в Родительском документе, что будет выглядеть неудобно.

используя htmlentities преобразует все применяемые символы, такие как < > к HTML-сущностям, которые устраняют любые возможность протечек.

там, возможно, преимущества или недостатки этого подхода или лучший способ достижения тех же результатов, если так, пожалуйста, прокомментируйте, как я хотел бы узнать от них:)

это может не работать в каждой ситуации, но размещение фрагментов кода внутри textarea отобразит их как код.

вы можете стиль textarea с CSS, если вы не хотите, чтобы он выглядел как фактический textarea.

вы можете попробовать:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)

обернув свой код в contenteditable div и установка white-space: pre-wrap; отступ сохраняется, код обертывается соответственно ширине и высоте автоматически устанавливается:

<div class="code" contenteditable>
  // code
</div>


.code {
  white-space: pre-wrap;
}