Блог Алексея Гончарова
Не пропустите новые статьи!

Новые статьи блога на Ваш e-mail:

Канал блога на YouTube
Где в мире читают блог
Архивы
Волшебная кнопка

Как вставить html код в статью красиво

как вставить html кодЗдравствуйте, уважаемые читатели блога Деньги в сети! В сегодняшней статье хочу поделиться с вами информацией о вставке кодов в статьи блога, так чтобы они выглядели симпатично. Прочтите и узнаете три варианта, как вставить html код красиво. А если воспользуетесь информацией, то ваш код после вставки будет выглядеть не как набор непонятных крокозяблов, а как стройный разноцветный набор символов.

Конечно, не всем нужна эта информация, а только тем, кто на своих страницах делится с читателями своими наработками в ковырянии кода (читай кишках сайта) и какими-то его модернизациями через… ну вы поняли ;) Через вмешательство в «генетику»! А вы о чём подумали? :)

Забегая вперёд, пока не приступил к основному повествованию, могу сообщить, что ковыряться буду и дальше, о чём буду писать и что, весьма вероятно, может вам пригодиться, если у вас тоже есть свой ресурс для клавиатурного творчества в Сети. А посему рекомендую следить за выходом новых статей, дабы не прощёлкать пропустить выход свежачка. Особенно, если вы это до сих пор ещё это не сделали, интересно почему? ;)

А теперь, дорогие мои распрекрасные, начинается оно – повествование.

Может возникнуть резонный вопрос, а заем вообще надо заморачиваться по поводу вставки кода? Зачем надо делать какую-то подсветку кода и почему нельзя его просто вставить, как текст, например?

А всё просто – если попытаться вставить код просто так, то он вместо отображения, иногда начнет выполняться и вытворять все те функции, для которых предназначался, причём, прямо там, куда вы его употребите вставите. От всех этих «прелестей» сайт может «поплыть», его может «скрючить», а сама статья превратиться в непонятно что и посередине нечто – некрасиво! Да и сам код в «голом» виде, не очень читабельное «зрелище», что для неподготовленного взгляда может представлять неудобоваримую субстанцию, от которой, у взирающего может даже развиться нежелание что-либо понимать и вникать в суть происходящего. Короче, не оно! Да вы и сами можете убедиться, если посмотреть, например, на вид картинки в коде:

<p style=”text-align: justify;”><a href=”адрес картинки”><img title=”имя картинки” src=”источник картинки” alt=”альтернативный текст” width=”399″ height=”148″ /></a></p>

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

Как вставить html код в тело статьи красиво и правильно.

Вариант № 1 – подсветка кода через плагин WP-Syntax.

Точнее сказать, этот вариант реализуется через связку двух плагинов – для удобства работы. Первая часть связки так и называется: WP-Syntax и выполняет основную функцию. А вторая часть – это сервисная и называется WP-Syntax Button, которая реализует работу через нажатие кнопки, которую эту самую кнопку и добавляет к вам на приборную панель редактора wordpress. Скачиваете обе части этой связки либо через поиск в админке блога по названию, либо со страниц репозитария движка. Страница репозитария для WP-Syntax здеся. А страница для WP-Syntax Button тутачки. Мы же не в маршрутке, правильно? ;)

 Установка стандартная – нашли, скачали, активировали. Обратите внимание, что плагин-кнопка (Button) не обновлялся уже более двух лет и нет данных о его совместимости с вашей новой версией WordPress, что может вас насторожить. Если вы обеспокоены этим обстоятельством, то можете кнопку не скачивать и обойтись только первой частью связки – так тоже будет работать, только менее удобно. От себя же скажу, что пользуюсь полным набором и всё работает.

Если вы установите всё, то у вас на панели редактора появится новая кнопочка «Code».

подсветка кода кнопкой Code

Чтобы вставить код через этот плагин, надо сначала вставить его в визуальном (обычном, где набираете текст) режиме, выделить мышкой, а затем нажать кнопку «Code» и из выпадающего списка выбрать язык, который соответствует вашему коду. Заодно можете задать нумерацию строк, указав номер первой в Line Number. После выбора нажать  Insert.

wp-syntax

При этом, после сохранения/обновления поста/страницы вы увидите примерно такую картинку с вашим, красиво вставленным, кодом картинки, например:

1
<p style="text-align: justify;"><a href="адрес картинки"><img class="aligncenter size-full wp-image-4359" title="имя картинки" src="источник картинки" alt="альтернативный текст" width="399" height="148" /></a></p>

Если вы не стали устанавливать часть WP-Syntax Button, то для вставки кода вам придется использовать такую комбинацию кода:

<pre lang="LANGUAGE" line="1"> Сюда вписываете ваш код </pre>

Где, Language – это язык вашего кода. Эту комбинацию надо вставить в HTML-редакторе, а внутрь вписать ваш код. Список поддерживаемых языков есть на этой странице плагина. Вариант такой вставки кода не очень удобен, но кому-то может понадобиться. В результате будет примерно следующее:

1
 Сюда вписываете ваш код

Вариант № 2 – подсветка синтаксиса через плагин SyntaxHighlighter Evolved, название которого именно так и преводится. Скачать можно через поиск по названию в админке блога, либо со этой странице плагина. Установка стандартная. Этот плагин работает, как и предыдущий, но в менее удобном варианте.

После установки у вас появится пункт меню Настройки > SyntaxHighlighter, где будут все его настройки. Да, забыл сказать, что плагин англоязычный и нерусифицирован – недостаток. Если что будет непонятным, то пользуйтесь переводом страницы.

Настройки плагина можно оставить по-умолчанию – они работоспособны. А можете выставить значения, как на картинке с примером моих настроек:

syntaxhighlighter настройки

Если запутаетесь, то в настройках есть кнопка Reset to Defaults – сброс настроек на первоначальные. А также внизу страницы, под кнопками, есть предпросмотр отображения кода – можете смело поиграться и выбрать свой вариант настроек и вывода кода. На этой странице разработчика плагина есть список поддерживаемых языков и более подробное описание его настроек – там всё на русском, разберётесь.

Чтобы вставить html или php код в запись сайта с эти плагином, надо применить одну из конструкций из примера в странице настроек плагина (в самом низу):

подсветка кода плагином

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

&amp;amp;amp;amp;amp;lt;/pre&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;pre lang=&amp;amp;amp;amp;amp;quot;LANGUAGE&amp;amp;amp;amp;amp;quot; line=&amp;amp;amp;amp;amp;quot;1&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; Сюда вписываете ваш длииииииииииииииииииииииииинныйкод

Вариант № 3 – вставить html или php код без плагина.

Чтобы обойтись без плагина и вставить html код в тело блога надо заключить его в следующий код:


ВСТАВИТЬ СЮДА ВАШ КОД
&amp;amp;amp;amp;amp;lt;span style=&amp;amp;amp;amp;amp;quot;color: #330099;&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;gt;

Где,  height и width – соответственно высота и ширина выводимого поля с кодом в писклелях, color – цвет. Цвет можете подобрать с помощью пипетки в программе FsCapture, о которой я уже писал. Ширину и высоту можно подобрать под параметры вашего сайта. На выходе получится примерно следующее:

На вид и функциональность это, конечно, менее симпатично, зато не грузит блог лишними плагинами, хотя я сам этим способом и не пользуюсь. Привел его для разнообразия.

Думаю, теперь определитесь, как вставить html код красиво в блог.

На этом буду заканчивать разглагольствовать. Надеюсь, пользу вам сегодня причинил :) Спасибо, что дочитали.

Немного позитива:

Нажатия на социальные кнопочки и комментарии приветствуются!  ;)

Пройдись по кнопочкам, расскажи о статье друзьям - это к деньгам!

Новые статьи блога на Ваш e-mail:

1 комментарий: Как вставить html код в статью красиво

  • Было пару раз, что нужно было поставить красиво html-код, но не знала, как это сделать – поэтому приходилось лепить в текстовом формате, что выглядело не очень чтобы так. Теперича хоть буду знать, что есть даже не один, а несколько вариантов красивого оформления кода в статью :)

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

:) 
*hi* 
;) 
:-( 
:good: 
:aga: 
*blush* 
:negative: 
:yahoo: 
B-) 
*bravo* 
*klass* 
:shock: 
:-)) 
Больше смайлов!..
 
Обменник.ws » Автоматический обмен Webmoney