Приличное оформление кода в статьях без подсветки синтаксиса (Html, Css)

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

В данной статье я рассмотрю самый простой вариант, это прилично оформленный тег pre. Я не буду здесь рассматривать разнообразные надстройки и плагины для автоматической подсветки кода (Syntax Highlighter). А как будет выглядеть мой простенький вариант, вы можете оценить далее.

Создадим стиль для нашего тега pre:

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

<style type="text/css">
    .code {
        border: 1px solid #c3c3c3;
        border-left: 6px solid #ff9400;
        padding: 10px;
        font-size: 12px;
        background: rgba(255, 255, 136, 0.3) url(img/code.png) no-repeat 98% 10px;
        overflow: auto;
        color: #000;
        font-family: 'Consolas';
        margin: 20px 0 20px 0;
    }
</style>

Код вставки:

<pre class="code"> Текст кода с заменой на сущности </pre>

Перед тем, как вставить ваш код в данный тег, ему необходимо пройти процедуру преобразования html тегов в их сущности (мнемоники), т.к. внутри тега pre сохраняется лишь форматирование текста, а html теги все так же отображают то, что они обозначают.

Я для этого использую php функцию "htmlspecialchars()" она преобразует текст, заменяя все символы, которые этого требуют, на их сущности. Но в интернете так же полно сервисов позволяющих это сделать online.

Архив с примером:

Скачать "Оформление кода без подсветки синтаксиса"
(Rar архив, пряма ссылка)

Вместе с этой статьей читают: