Как размещать программный код на сайте?

Решение в размещении кода.

Приветствую вас дорогие друзья! Сегодня я расскажу об одном из способов публикации программного кода на страницах сайта.

Если на своем сайте вы выкладываете (либо планируете выкладывать) примеры программного (и любого другого) кода, например, html, css, php, javascritp и jquery, c++ и так далее, то у вас может возникнуть необходимость в том, чтобы этот код не исполнялся браузером (это касается html, css и javascritp), а отображался просто как код.

Для популярных движков, например, таких как wordpress, можно использовать готовые плагины – я использую плагин: SyntaxHighlighter Evolved, но что делать, если у ваш сайт имеет собственный движок и вовсе не имеет его?

На одном из своих сайтов на самописном движке, я использую именно этот метод публикации кода – этот метод является простым, “легким” и, на мой взгляд, не имеет недостатков.

Итак, суть состоит в том, что код мы будет размещать в Текстовом поле, используя html тег: textarea.

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

Css стили:

.programmCode{
        width: 100%;
        height: 100%;
        resize: none;
        background: url('/wp-content/uploads/2014/01/programm_code.gif');
        border: 1px solid #ccc;
}

Если вам нужно опубликовать, например, вот такой код:

<div>

  <p>Пример публикации кода</p>

  <a href="http://sergey-oganesyan.ru/">Sergey-oganesyan.ru/</a>

</div>

То вы должны написать так:

<textarea class="programmCode"> 

<div>

  <p>Пример публикации кода</p>

  <a href="http://sergey-oganesyan.ru/">Sergey-oganesyan.ru/</a>

</div>

</textarea>

Все! Больше ничего писать не надо! Данный код будет оформлен следующим образом (это картинка – пример):

Публикация программного кода

+Особенности

  1. 1. Простое решение проблемы
  2. 2. Удобно выделять и копировать код
  3. 3. Код четко виден на светлом фоне
  4. 4. Форматирование кода не нарушается

Надеюсь, вам подойдет данный способ публикации кода на своем сайте.

Это все, что я хотел вам сегодня рассказать, до новых встреч, удачи!

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