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

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

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

Источник

32 ответа

Решение

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

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

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

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

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

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

Источник

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

  1. Заменить & персонаж с &amp;
  2. Заменить < персонаж с &lt;
  3. Заменить > персонаж с &gt;
  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;
}

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

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

принаряжать

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, чтобы он не редактировался.

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

Источник

Устаревший <xmp> tag по сути делает это, но больше не является частью спецификации 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(), при использовании такой технологии.

Источник

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

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

Этот метод имеет преимущество перед использованием текстовой области: код не будет переформатирован, как в текстовой области. (Вещи как &nbsp; удаляются целиком в текстовой области)

Источник

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

  • Вы хотите написать 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

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

Источник

В HTML? Нет.

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

Источник 
<textarea ><?php echo htmlentities($page_html); ?></textarea>

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

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

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

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

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

Источник

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
Источник

Это простой трюк, и я пробовал его в 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>

Это покажет так:

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

Источник

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

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

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

Источник

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

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Источник

Это немного похоже на взлом, но мы можем использовать что-то вроде:

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

С помощью этого CSS браузер будет отображать сценарии внутри тела. Он не будет пытаться выполнить этот сценарий, так как он имеет неизвестный тип.text/html. Необязательно экранировать специальные символы внутри<script>, если вы не хотите включать закрывающий </script> тег.

Я использую что-то подобное для отображения исполняемого JavaScript в теле страницы, для своего рода "грамотного программирования".

В этом вопросе есть дополнительная информация. Когда теги должны быть видимыми и почему?.

Источник

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

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

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

Источник 
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

он вернет сбежавший HTML

Источник

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

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

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

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

Источник

На самом деле это способ сделать это. У него есть ограничение (один), но он на 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, "");
Источник

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

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

Источник

Вы можете разделить теги, изменив их на промежутки.

Нравится:

Источник

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

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
Источник

Если вы ищете решение , которое работает с фреймворками.

      const code = `
 <div>
  this will work in react
 <div>
`
<pre>
  <code>{code}</code>
</pre>

И вы можете придать ему красивый вид с помощью css :

      pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}
Источник

Строковые литералы JavaScript можно использовать для записи HTML в несколько строк. Очевидно, что для этого решения требуется JavaScript, в частности ECMA6.

.createTextNodeв паре с CSSwhite-space: pre-wrap;делает свое дело.

.innerTextв одиночку тоже работает. Запустите фрагмент кода ниже.

Источник

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

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

Источник 
 //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)
Источник

Комбинация пары ответов, которые работают вместе:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>

Источник

Я использовал это давным-давно, и это помогло мне, я надеюсь, что это поможет и вам.

Источник
Другие вопросы по тегам