Вывести на странице HTML код в блоке

Question

Вот макет

Дела вот так - не получается

<div class="blue_box">
    <div class="blue_box_title">
        <p>Установите этот HTML-код на странице в том месте, где нужно показать виджет:</p>
        <p><a href="#" class="green_link">Скопировать код</a></p>
    </div>
    <div class="copy_box">
        <pre>
            <div id="mc-container"></div>
            <script type="text/javascript">
            cackle_widget = window.cackle_widget || [];
            cackle_widget.push({widget: 'Comment', id: 31365});
            (function() {
            </script>
        </pre>
    </div>
</div>

Как правильно сверстать такой макет?

Answer 1

По хорошему, это должен редактировать сервер, ещё на этапе написания контента для страницы.
Но если же это делается вручную, то вы должны заменить символы < и > на его HTML аналоги: <(<) и >(>)

<div class="blue_box">
    <div class="blue_box_title">
        <p>Установите этот HTML-код на странице в том месте, где нужно показать виджет:</p>
        <p><a href="#" class="green_link">Скопировать код</a></p>
    </div>
    <div class="copy_box">
        <pre>
            &lt;div id="mc-container"&gt;&lt;/div&gt;
            &lt;script type="text/javascript"&gt;
            cackle_widget = window.cackle_widget || [];
            cackle_widget.push({widget: 'Comment', id: 31365});
            (function() {
            &lt;/script&gt;
        </pre>
    </div>
</div>

Answer 2

Один из вариантов это использование мнемоники < < и > >

Еще как вариант вместо pre можно завернуть в xmp

Тег отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег не закрыт, все теги внутри него отображаются как обычный текст.

Источник

<div class="blue_box">
    <div class="blue_box_title">
        <p>Установите этот HTML-код на странице в том месте, где нужно показать виджет:</p>
        <p><a href="#" class="green_link">Скопировать код</a></p>
    </div>
    <div class="copy_box">
        <xmp>
            <div id="mc-container"></div>
            <script type="text/javascript">
            cackle_widget = window.cackle_widget || [];
            cackle_widget.push({widget: 'Comment', id: 31365});
            (function() {
            </script>
        </xmp>
    </div>
</div>

БЛОГ НА HUSL

Вывести на странице HTML код в блоке

Ответы (2 шт):