Показать HTML-код в HTML - PullRequest
Новая
       32

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

174 голосов
/ 12 мая 2010

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

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

Ответы [ 23 ]

3 голосов
/ 12 января 2017

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

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

3 голосов
/ 12 мая 2010

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

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

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

2 голосов
/ 07 января 2014

Вы можете использовать серверный язык, такой как 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>
1 голос
/ 08 июля 2014 
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

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

1 голос
/ 24 октября 2013

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

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

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

1 голос
/ 12 мая 2010

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

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

1 голос
/ 10 октября 2018

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

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

enter image description here

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

1 голос
/ 15 марта 2014

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

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
1 голос
/ 10 января 2018 
<textarea ><?php echo htmlentities($page_html); ?></textarea>

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

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

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

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

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

0 голосов
/ 16 июня 2018

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

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...