Показать HTML-код в HTML

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

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

Ответ 1

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

& as &
< as <

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

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

Все другие решения, такие как перенос вашего кода в элемент <textarea> или (устаревший) <xmp>, сломаются. ¹

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

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

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

¹ Показательный пример:

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>

Ответ 2

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

Замените символ & на &
Заменить символ < на <
Замените символ > на >
Необязательно окружайте свой HTML-образец <pre> и/или <code>.

Ответ 3

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

<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;
}

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

rainbows (очень отлично)

лучшие ссылки для вас:

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?

Ответ 4

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

<textarea disabled> code </textarea>

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

Ответ 5

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

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

Рекомендуемые:

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

Ответ 6

Я использовал <xmp> следующим образом: http://jsfiddle.net/barnameha/hF985/1/

Ответ 7

В HTML? Нет.

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

Ответ 8

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Ответ 9

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

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

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

Включение угловых скобок и кода, подобных этому в текстовой области, является недопустимым HTML и вызывает поведение undefined в разных браузерах. В 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(), если вы используете такую технологию.

Ответ 10

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

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

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

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

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

Ответ 11

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

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

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

Ответ 12

Если ваша цель - показать фрагмент кода, который вы выполняете в другом месте на той же странице, вы можете использовать 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: Код не будет переформатировать, как это было бы в текстовом поле. (Такие вещи, как   полностью удаляются в текстовом поле)

Ответ 13

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

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

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

Ответ 14

Вы можете использовать язык на стороне сервера, например 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>

Ответ 15

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

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

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

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

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

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

Ответ 16

Это простой трюк, и я попробовал его в Safari и Firefox

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Это будет выглядеть так:

Вы можете увидеть это в прямом эфире Здесь

Ответ 17

На самом деле есть способ сделать это. Он имеет ограничение (один), но на 100% стандартно, не устарел (как xmp) и работает.

И это тривиально. Вот оно:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

Пожалуйста, позвольте мне объяснить. Прежде всего, обычный HTML-комментарий делает работу, чтобы предотвратить интерпретацию всего блока. Вы можете легко добавить в него любые теги, все они будут игнорироваться. Игнорируется при интерпретации, но все еще доступно через innerHTML! Итак, осталось получить содержимое и отфильтровать предыдущие и конечные токены комментариев.

За исключением (помните - ограничение) вы не можете помещать туда HTML-комментарии, поскольку (по крайней мере, в моем Chrome) их вложение не поддерживается, и самое первое "->" завершит показ.

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

Теперь, что это за странная строка LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo? Это случайная строка, похожая на хеш, которая вряд ли будет использоваться в блоке и используется для? Вот контекст, почему я его использовал. В моем случае я взял содержимое одного DIV, затем обработал его с помощью разметки Showdown, а затем вывод, назначенный в другой div. Идея заключалась в том, чтобы написать встроенную уценку в HTML файле и просто открыть в браузере, и она будет преобразовываться при загрузке на лету. Таким образом, в моем случае <!-- трансформировался в <p><!--</p>, комментарий правильно не отображался. Работало, но загрязняло экран. Таким образом, чтобы легко удалить его с помощью регулярного выражения, была использована случайная строка. Вот код:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

И это работает.

Если кому-то интересно, эта статья написана с использованием этой техники. Не стесняйтесь загружать и заглядывать в HTML файл.

Это зависит от того, для чего вы его используете. Это пользовательский ввод? Затем воспользуйтесь <textarea> и избегайте всего. В моем случае, и, вероятно, в вашем случае, я просто использовал комментарии, и он выполняет свою работу.

Если вы не используете уценку и просто хотите получить ее как есть из тега, тогда это еще проще:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

и код JavaScript для его получения:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

Ответ 18

Есть несколько способов избежать всех в HTML, ни одна из них не является приятной.

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

Ответ 19

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

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

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

Ответ 20

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

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

Ответ 21

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

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

Ответ 22

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

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Ответ 23

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

Вы можете стилизовать текстовое поле с помощью CSS, если вы не хотите, чтобы он выглядел как реальная текстовая область.

Ответ 24

 //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 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)

Ответ 25

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

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


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