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

Допустим ваш сайт посвящен программированию и вы в каждой из своих статей предоставляете пользователю в качестве примеров наглядный исходный код.

Пример:

<code>
    function myFun() {
    	document.writeln('Привет мир');
    }

    myFun();
</code>

Для этих целей вполне можно использовать тег code для того чтобы помочь поисковым роботам определить что в вашем контенте вы демонстрируете исходный код. В итоге ваш код будет отображаться моноширинным шрифтом.

Однако если вы посмотрите на текущий результат, то увидите что весь код выводится в одну строчку. Согласитесь это не тот результат который нам нужен.

Все дело в том что тег code предназначен для отображения однострочного куска кода, так как не поддерживает переносы строк и пробелы.

<code>function myFun() { </code> <br>
<code>  document.writeln('Привет мир');</code><br>
<code>   } </code> <br>
<code>myFun();</code>

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

<style>
    code{
        display:block;
    }
</style>
<code>function myFun() { </code>
<code>  document.writeln('Привет мир');</code>
<code>   } </code>
<code>myFun();</code>

Данные решения с моей точки зрения являются не совсем удобными. Поэтому я нашел выход через тег pre. Кто не знает, тег pre отображает текст со всеми переносами и пробелами содержащимся в исходном коде.

<pre>
<code>
    function myFun() {
        document.writeln('Привет мир');
    }
    myFun();
</code>
</pre>

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

На этом данная статья подошла к концу. Если у вас остались или появились вопросы пишите их в комментариях или группе

На этом у меня все. Желаю вам успехов и удачи! Пока.