Как правильно вставлять код в окошко для кодов

Понедельник, 25 Января 2016 г. 20:03 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

Как правильно вставлять код в окошко для кодов.

Многие сталкиваются с проблемой, особенно на ЛиРу, что при вставлении кодов в кодовое окошко, код в окне выставляется не полностью - обрезаются "хвостики" или наоборот - начало кода, или когда в посте блога надо написать HTML-код в виде текста а многие этого не умеют. Так что же делать, чтобы код остался в тексте сообщения виден как HTML?
Напишу несколько вариантов, как это сделать.
1. Код с использованием тэга <input
Код баннера можно поставить вот в такое окошечко. Это самый простой вид окошечка, и его используют в основном для небольших кодов.

Вот код этого окошечка, который можно сразу копировать, и вместо слов КОД БАННЕРА вставлять свой код.

<input type='text' size='15' value='тут код'>

где: size='35' - ширина окошка в пикселях (можно менять значение, если хотите что б окошечко было большего размера.)

Если вы заметили, кавычки в коде одинарные. Это для предотвращения путаницы с кавычками. Если вам нужно вставить код также с одинарными кавычками, то в коде самого окошка нужно поменять кавычки на двойные!!!

2. Код с использованием тэга <textarea
ЭТОТ КОД НАИБОЛЕЕ УДОБЕН, ЕГО ЛЕГКО МОЖНО ПРЕОБРАЗОВАТЬ, ВЫДЕЛИТЬ. В него можно вставить коды большой рамочки, или целого поста. Такое окошечко удобно и тем, что нет путаницы с кавычками, как в первом, так как если где то встретятся одинарные, то в первое окошечко вы и вовсе не сможете вставить правильный код.
Для такого случая используйте ОКОШЕЧКО ВОТ С ТАКИМИ ТЕГАМИ.

<textarea rows="1" cols="30">ВАШ КОД </textarea>

Где <textarea> - это ОТКРЫВАЮЩИЙ ТЕГ, и ставится вначале кода
</textarea> - ЗАКРЫВАЮЩИЙ, который ставится в конце кода.
При необходимости меняем размер.
Атрибут cols="30" отвечает за ширину окошка. Меняем цифру "30" на нужную нам.
Атрибут rows="1" отвечает за высоту. Высоту окошечка можно менять на удобную вам.
Где написано ...ВАШ КОД... туда и вставляете свой код.

С этими тегами КОД, например простой рамки будет выглядеть ВОТ ТАК.
<div align="center"><div style="padding: 10px; background:url('https://img-fotki.yandex.ru/get/6717/65387414.159/0_ca958_2cb15c4d_S'); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px rgb(128, 128, 128), 0px 0px 20px rgb(128, 128, 128);"><center>ПОСТ</center></div></div>

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

Для того, что б как то выделить код, можно украсить наше окошко цветом, вот так:
ВАШ КОД

Код такого цветного окошечка.

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета;">ВАШ КОД</textarea>

Обводку окошечка тоже можно выделить цветом. Выглядит это вот так

ВАШ КОД

КОДЫ ЦВЕТНОГО ОКОШЕЧКА, С ЦВЕТНОЙ ОБВОДКОЙ.

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета ОКОШЕЧКА; border: 2px solid ЦИФРОВОЕ обозначение цвета ОБВОДКИ;">ВАШ КОД</textarea>

кому непонятны "цифровые" обозначения цвета то напомню что в таблице КОДОВ ЦВЕТОВ, КОТОРАЯ НАХОДИТСЯ ЗДЕСЬ берем вот такие значения
#ffffff - белый,
#cccccc - серый,
#000000 - черный.
#8b0000 бордо и т.д.

В коде есть кусок border: 2px - 2px это толщина обводки. Меняем двойку как хотим. толщина обводки по вашему вкусу.. ЦВЕТ СТАВИТ ТАК ЖЕ, как и цветв самом окошечке, то есть ЦИФРОВОЕ обозначение цвета.

Будьте ВНИМАТЕЛЬНЫ, при стирании слов в кодах, и подставлении своих значений, НЕ СТИРАЙТЕ КАВЫЧКИ, ТОЧКИ С ЗАПЯТОЙ и прочие НУЖНЫЕ символы в кодах. Аккуратно стираем только рекомендательные слова, и вместо них, так же аккуратно ставим свои значения.

Теперь ВНИМАНИЕ. Несмотря на все наши старания, на ЛиРу мы часто сталкиваемся с проблемой, что при выставлении кодов в кодовое окошко, код в окне выставляется не полностью - обрезаются "хвостики", и код становится не рабочим.

Что же делать? Секрет этого безобразия в том, что код, который надо вставить в окошко сначала надо преобразовать в текстовом (визуальном) режиме, то есть осуществить перевод специальных символов кода в их текстовые обозначения. Заменить все правые угловые скобочки < на < , левые угловые скобочки > на >

Вручную такой перевод сделать очень сложно, поэтому обратимся к ОНЛАЙН ГЕНЕРАТОРУ, который сделает это быстро и без проблем.

3. Как в посте блога записать HTML-код в виде текста.

После перевода специальных символов кода в их текстовые обозначения, коды можно ставить как В ОКОШЕЧКИ ДЛЯ КОДОВ, которые даны выше, так и просто вставить коды в текст, без ВСЯКИХ ОКОШЕЧЕК.

То есть, если вы хотите написать в тесте поста такой код рамочки, (Уже заменив символы правые угловые скобочки < на < , левые угловые скобочки > на >) то можете его вставить в окошечко. и тогда он будет выглядеть вот так, и НИКАКИЕ *ХВОСТИКИ* НЕ ОБРЕЖУТСЯ:

<div align="center"><div style="padding: 10px; background:url('https://img-fotki.yandex.ru/get/6717/65387414.159/0_ca958_2cb15c4d_S'); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px rgb(128, 128, 128), 0px 0px 20px rgb(128, 128, 128);"><center>ПОСТ</center></div></div>

ПРОСТО В ЗАПИСИ, без ВСЯКИХ ОКОШЕЧЕК, КОДЫ РАМОЧКИ БУДУТ ВЫГЛЯДЕТЬ ВОТ ТАК (то есть HTML-код в виде текста):

<div align="center"><div style="padding: 10px; background:url('https://img-fotki.yandex.ru/get/6717/65387414.159/0_ca958_2cb15c4d_S'); border-radius: 20px 20px 20px 20px; box-shadow: 0px 0px 20px rgb(128, 128, 128), 0px 0px 20px rgb(128, 128, 128);"><center>ПОСТ</center></div></div>

Сравните эти коды, и вы увидите, что они совершенно одинаковые. То есть код, с применением Html Character EnCoder можно ставить как в ОКОШЕЧКЕ. ТАК И БЕЗ НЕГО.

А теперь подробнее где и как это сделать.

в расширенном редакторе на ЛиРу, есть перевод угловых скобочек в специальные символы. Но это сложная процедура, и кроме того не все умеют работать в расширенном редакторе, и еще в некоторых редакторах не так отображаются кавычки, возможно еще какие-то символы.

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

Конвертеров таких много, я пользуюсь, "Html Character EnCoder"

Программа очень простая и удобная. Зайдя на сайт Html Character EnCoder, вы увидите вот такие окошечки

Выполняете Шаг 1. Вставляете свой код (например той же рамочки, что я дала в окошечке), в пустое окошко внизу

Шаг 2. Нажимаете кнопку "Convert". И в окошке получаете ваш код, переконвертированный в текст

Шаг 3. Копируете этот новый код и вставляете его в своем редакторе сообщений в режиме редактирования HTML., как хотите - можно в окошечко для кодов, а можно оставить просто как текст, выделив его цветом или шрифтом, что б был виден и немного выделялся. Если код у вас очень большой, то потяните за ПРАВЫЙ НИЖНИЙ уголочек рамки, и она сразу растянется, пока не будет виден весь код.

Теперь, когда вы опубликуете свое сообщение, то код на странице будет виден именно в виде кода, и его можно теперь сразу копировать.

Точно так же сайт вам переконвертирует любой код в текст, и вы ЛЕГКО ЕГО ВСТАВИТЕ В любой ТЕКСТ.

4. КАК ВСТАВИТЬ В ТЕКСТ КОДЫ ФЛЕШ.

Если обычным способом вставлять коды флеш (то есть в окошечко для кодов). то коды ее исказятся, и работать не будут. Поэтому, чтобы этого не происходило есть один "секретик" - сразу после первой квадратной скобки поставьте звездочку.

Если вы просто даете коды флеш, то в окошечко для кодов их ставить не имеет смысла. Просто в коде флеш поставьте звездочку, после первой квадратной скобки, и правильный код будет виден всем.

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

[flash=200,200,http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf]

ЕСЛИ КОДЫ ФЛЕШ В КАКОЙ ТО СЛОЖНОЙ РАМКЕ, или в составе кода муз.открытки. и прочего. то большой код лучше вставить в окошечко для кодов. НО ВНИМАНИЕ, в кодах флеш ВСЕГДА надо ставить ЗВЕЗДОЧКУ после первой квадратной скобки. Иначе формула исказится и в окошечке для кодов.

Вот вроде и все о кодах окошечек и выставлении кодов в них.
Успехов в вашем творчестве.

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 17 - Заморские сайты к НОВОМУ ГОДУ
Часть 18 - 100 самых полезных сайтов Интернета
Часть 19 - Как правильно вставлять код в окошко для кодов.

Серия сообщений "для оформления дневника":
Часть 1 - Оформление текста в дневнике
Часть 2 - Про эпиграф
...
Часть 21 - Часики "Зима" с датой и проветствием, меняющимся от времени суток-часть2
Часть 22 - Рамочка "Еловая"
Часть 23 - Как правильно вставлять код в окошко для кодов