Приличное оформление кода в статьях без подсветки синтаксиса (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 архив, пряма ссылка)
Вместе с этой статьей читают:
Хрюшка - копилка, как сделать кнопку благодарности (Html, Css, jQuery)Как сделать спойлер для сайта (Html, Css, jQuery)
Мой скрипт увеличения миниатюр изображений на сайте (Html, jQuery)
Как сделать плавающую панель с социальными кнопками для сайта (Html, Css, jQuery)