Показуйте фрагменти HTML у HTML

Як я можу показувати фрагменти HTML на веб-сторінці, не потребуючи заміни кожного <на <і >на >?

Іншими словами, чи існує тег для не візуалізації HTML, поки ви не натиснете на тег, що закривається ?

Ні , немає. У правильному HTML-режимі неможливо уникнути деяких символів:

• & як &
• < як <

(До речі, втекти немає потреби > але люди часто роблять це з міркувань симетрії.)

І звичайно, ви повинні оточити отриманий, уникнутий HTML код в межах <pre><code>…</code></pre>(а) збереження пробілів та розривів рядків, і (b) позначити його як елемент коду.

Усі інші рішення, такі як введення коду в елемент <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;
}

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

веселки (дуже ідеально)

гарненький

синтаксичний освітлювач

виділити

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 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's 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 (це чисто-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;" на цільовому діві та запишіть рядки окремо, використовуючи "\ r \ n" в кінці кожного.

Ось демонстрація: https://jsfiddle.net/wphps3od/

Цей метод має перевагу перед використанням textarea: код не буде переформатований так, як у текстовій області. (Такі  речі видаляються повністю в текстовій області)

Зрештою, найкраща (хоча і дратує) відповідь - "уникнути тексту".

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

Швидкий пошук 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. Ідея полягала в тому, щоб записати розмітку inline у ​​файл 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, якщо ви не хочете, щоб він виглядав як фактичний textarea.

Це трохи хак, але ми можемо використовувати щось на кшталт:

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 в тілі сторінки для свого роду "грамотного прогмінгу".

У цьому питанні є додаткова інформація Коли слід бачити теги і чому вони можуть бути? .

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