Отображать фрагменты HTML в HTML

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

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

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

• & так как &
• < так как <

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

И, конечно, вы должны окружить полученный, экранированный 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>

Испытанный и верный метод для 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;
}

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

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

принаряжать

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

В HTML? Нет.

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

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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

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

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

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

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

Если ваша цель - показать фрагмент кода, который вы выполняете в другом месте на той же странице, вы можете использовать textContent (это pure-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/

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

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

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

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

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

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

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

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

Использование htmlentitiesпреобразует все применимые символы, такие как < >объекты 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>

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

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

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

На самом деле это способ сделать это. Он имеет ограничение (один), но на 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загрузку простого старого текстового файла.

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

<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

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

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

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

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

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

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. Нет необходимости экранировать специальные символы внутри a <script>, если только вы не хотите включить закрывающий </script>тег.

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

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

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