Как отобразить код внутри блока

Question

как я могу отобразить код внутри блоков, как это делает stackoverflow:

<p> <strong> strong text <em> strong and emphasised text </em> </strong> <em> just emphasised text </em> </p>

примечание: у меня весь текст обернут вокруг div и извлечен из базы данных

спасибо

Answer 1

Символы, составляющие код HTML, преобразуются в соответствующие им объекты HTML ...

<pre>
  <code>
    &lt;p&gt; &lt;strong&gt; strong text &lt;em&gt; strong and emphasised text &lt;/em&gt; &lt;/strong&gt; &lt;em&gt; just emphasised text &lt;/em&gt; &lt;/p&gt;
  

Answer 2

Если вы хотите захватить код, а затем преобразовать его для просмотра, просто замените < на < и > на >. Вот простая демоверсия , которая делает именно это.

var html = $('#html').html(),
    code = $.trim(html); // remove leading & trailing carriage returns

// replace angled brackets
code = code.replace(/[<>]/g, function(m){
        return {
            '<' : '&lt;',
            '>' : '&gt;'
        }[m];
    });

$('pre').html(code);