Выделение кода с помощью вертикальной линии

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

Очень часто при описании какого-либо процесса программирования необходимо привести фрагмент кода. Это и программирование на языках С++, Pascal, при веб программировании на PHP, Python, верстке страниц на HTML, использовании стилей CSS и пр

В своей прошлой статье «Форма комментариев для вконтакте» я приводил фрагменты кода, который нужно было вставить в различные места страниц сайта, чтобы правильно подключить форму. Это выглядело примерно так

<!— Put this script tag to the <head> of your page —><script type=»text/javascript» src=»http://userapi.com/js/api/openapi.js?48″></script>

        Очень часто бывает необходимо приводить пример фрагмента кода, чтобы четко определить, что относится к обычному тексту статьи, а что к коду, будь то код таких языков, как HTML, CSS, Java-script или языков высокого уровня, таких как С++б Java и пр.

          Существует 2 основных способа это сделать. Первый — использование границ таблиц и изменения цвета заливки содержимого, второй — использование тега <div> с атрибутами. Мне больше всего по душе второй способ, поэтому давайте остановимся на нем более подробно.

             Вертикальная черта, приведенная в примере выше, получена с помощью следующего кода HTML (опять же сделаем выделение кода с помощью вертикальной линии)

 

<div style=»height: 35px; width: 560px; border-left-width: 5px; border-left-style: solid; border-left-color: green; padding-left: 10px; text-align: left;»>
</div>

 

Теперь давайте разберем, что означает каждый параметр.

  • height — высота нашей линии — подбирается экспериментально, в зависимости от объема цитируемого кода, в первом примере я взял 35 пикселей, во втором — 60;
  • width — ширина текста — ширина, на которую растянется наш текст, если сделать маленькую, то колонка станет узкой, а высота столбца большая. В обоих примерах я взял ширину 560 пикселей. Вы можете подогнать под свой сайт так же опытным путем;
  • border-left-width — мы выбираем границу слева(линию) и определяем её толщину;
  • border-left-style — стиль линии. В наших примерах solid — сплошная линия. Во втором примере я использовал атрибут dashed — пунктирная линия. Все аттрибуты поможет найти наш любимый яндекс, если в него вбить border-left-style;
  • border-left-color — здесь, думаю, понятно, но поясню на всякий случай :) что это определение цвета линии;
  • padding-left — отступ текста от линии;
  • text-align — выравнивание текста.
              Вы можете просто скопировать данный текст (я не жадный =)), а потом уже подгонять под свои страницы сайта. Так же помните, что необходимо экранировать теги html, чтобы цитаты кода вставились как текст. Например, в теге div нужно заменить открывающую и закрывающую скобку на &lt; и &gt; соответственно (точка с запятой в конце — это не знак препинания, а неотъемлимая часть заменителя). Но открою вам секрет: этого можно не делать, если вы ведете блог на вордпресс, то сначала вставляете код вертикальной линии в HTML редакторе, прикинув примерно ее высоту, можете написать какой-нибудь текст,а потом перейдите в визуальный редактор и замените текст на фрагмент кода, который необходимо процитировать. Код может вылезти а пределы линии или линия может оказаться большой, но вы можете её отредактировать, изменив значение атрибута height.
             Надеюсь, данная статья будет полезна и вы всегда сможете разграничить текст статьи и текст кода, который хотите процитировать. Успехов.

 

Это вам будет интересно:

Sovrn