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

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

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

Solutions Collecting From Web of "Показать HTML-код в HTML"

В самом HTML, нет возможности избежать экранирования символов. Однако в правильно объявленном XHTML (который является XML и должен быть объявлен в браузере как таковой, в частности, недостаточно просто вставить DOCTYPE ), вы можете использовать раздел CDATA:

 < ![CDATA[Your  here]]> 

Но это работает только в XML, а не в HTML.

В HTML единственное решение, гарантированное работать повсюду, – это избежать кода ( < и & as < и & соответственно) вручную.

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

  1. Замените символ &
  2. Замените символ <
  3. Замените символ > на >
  4. Необязательно окружайте ваш образец HTML тегами
    
    

    и / или .

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

  // your codes ..  

старые образцы:

образец 1 :

 
 This text has been formatted using the HTML pre tag. The brower should display all white space as it was entered. 

образец 2 :

 
  My pre-formatted code here.  

Пример 3 : (Если вы фактически «цитируете» блок кода, тогда будет разметка)

 
  My pre-formatted "quoted" code here.  

хороший пример 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?

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

  

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

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

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

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

 
 code here, escape it yourself. 

Я использовал

так: http://jsfiddle.net/barnameha/hF985/1/

В HTML? Нет.

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

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

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

  

Включение угловых скобок и кода, подобных этому в текстовой области, является недопустимым HTML и приведет к неопределенному поведению в разных браузерах. В Internet Explorer HTML интерпретируется, в то время как Mozilla, Chrome и Safari оставляют его неинтерпретированным.

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

Правильный способ ввода кода в текстовое поле – использовать язык на стороне сервера, например, такой PHP:

  

Затем он обходит интерпретатор html и последовательно помещает текст в текстовое поле во все браузеры.

Кроме того, единственный способ – действительно избежать кода самостоятельно, если статический HTML или использовать серверные методы, такие как .NET HtmlEncode (), если вы используете такую ​​технологию.

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

   &lt;xmp &gt; <p>a paragraph</p> &lt;/xmp &gt;  

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

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

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

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

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

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

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

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

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

  • с синтаксисом HTML
    • существует пять видов элементов
    • те, которые называются «нормальными элементами» (например,

      )

      • не может иметь буквальный <
      • это будет считаться началом следующего тега или комментария
    • пустотные элементы
      • у них нет содержания
      • вы можете поместить свой HTML в атрибут данных (но это верно для всех элементов)
      • для этого потребуется JavaScript для перемещения данных в другом месте
      • в атрибутах с двойными кавычками " и &thing; требуется экранирование: " и &thing; "
    • исходные текстовые элементы
      • и

        только

      • они никогда не становятся видимыми
      • но вложение вашего текста в Javascript может быть осуществимым
      • Javascript позволяет многострочные строки с обратными windowsми
      • он затем может быть вставлен динамически
      • буквальный не разрешен нигде в
    • стираемые исходные текстовые элементы
      • и
      • - хороший кандидат для переноса кода в
      • полностью законно писать там
      • не законным является подстрока по очевидным причинам
        • избежать этого специального случая с </textarea или аналогичным

      • &thing; требуется побег: &thing;
    • иностранные элементы
      • элементы из пространств имен MathML и SVG
      • по крайней мере, SVG позволяет снова встраивать HTML ...
      • и CDATA разрешен там, поэтому он, кажется, имеет потенциал
  • с синтаксисом XML
    • покрытый ответом Конрада

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

Вы можете использовать язык на стороне сервера, например PHP, для вставки исходного текста:

 < ?php $str = <<     This is the title      EOD; ?> 

затем выгрузите значение $str htmlencoded:

 
< ?php echo htmlentities($str); ?>

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

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

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

 
 code here, escape it yourself. 

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

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

 $str = file_get_contents("my-code-file.php"); echo ""; 
 function escapeHTML(string) { var pre = document.createElement('pre'); var text = document.createTextNode(string); pre.appendChild(text); return pre.innerHTML; }//end escapeHTML 

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

  

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

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

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

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

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

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

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

Если ваша цель состоит в том, чтобы показать fragment кода, который вы выполняете в другом месте на той же странице, вы можете использовать textContent (он чистый-js и хорошо поддерживается: http://caniuse.com/#feat=textcontent )

 

hello world

document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

Чтобы получить многострочное форматирование в результате, вам нужно установить стиль css «white-space: pre;» на целевом div и писать строки индивидуально, используя «\ r \ n» в конце каждого.

Вот демонстрационная версия: https://jsfiddle.net/wphps3od/

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

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

 Hello! Here is some code:  <div id="hello"> </div>  
  //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 $('
').text(value).html(); } html = htmlEncode(html)

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

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