Публикация кода программ, скриптов в блоге

Иногда нужно в сообщение вставить код - скрипта, гаджета, каких-либо настроек. Как можно размещать коды в блоге, чтобы они нормально отображались?  http://samasajt.blogspot.com/2016/02/kak-publikovat-kod-v-bloge.html#more Три способа вставки кодов в публикацию. 1 способ. Самый простой. В настройках каждого сообщения, при его создании, есть пункт Параметры со значком - шестеренкой. Кликнув по нему, можно выбрать настройки. В частности, режим редактирования - отмечаем "Показ кода HTML".Затем нажимаем кнопку Готово. Всё. теперь можно просто вставлять различные коды скриптов, программ и т.п. в сообщение, как обычный текст. Но рекомендуют в случае использования этого способа отделить код от обычного текста - другим шрифтом, цветом, фоном, например. 2 способ. При помощи сниппета. Идея отсюда: http://edublogru.blogspot.ru/2014/03/blog-post.html Сниппет - визуально оформленная часть готового кода, который можно скопировать и использовать повторно. 1) Бесплатно регистрируемся на сайте https://github.com/ 2) Не выходя из аккаунта, переходим по ссылке https://gist.github.com/ 3) Далее пишем название, описание (если нужно). 4) Вставляем код   5) Нажимаем на кнопку Create public gist  6) Копируем ссылку на наш созданный сниппет - в рамке, рядом со словом Embed  7) Переходим в режим редактирования сообщения HTML и вставляем скопированную ссылку:  8) Переходим обратно. В сообщении ничего не видно - только в режиме "Просмотр" и после публикации поста.  Код спойлера:  https://gist.github.com/m-mariya/4686de198aa34b1c6f61#file- <div> <div style="margin: 5px 20px 20px;"> </div> <div> <div class="smallfont" style="margin-bottom: 2px;"> </div> <div> <b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div> </div> <div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> </div> <div> <div style="display: none;"> </div> <div> Здесь Ваш текст, скрипт или картинка</div> <span style="font-size: x-small;"><span style="font-family: "comic sans ms" , cursive;">жжжжж hosted with ❤ by GitHub:  https://github.com/</span></span><br /> <span style="font-size: x-small;"><span style="font-family: "comic sans ms" , cursive;"><textarea cols="40" readonly="readonly" rows="1" style="background-color: #e992a1; border: 1px solid rgb(94, 18, 32); color: #5e1220; font-size: 12px; height: 31px; width: 310px;"><div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Здесь Ваш текст, скрипт или картинка <br> </div> </div> </div> view raw : https://gist.github.com/m-mariya/4686de198aa34b1c6f61/raw/d0602dce623105e44d0a4b8263ef56958f34234d/%D0%9A%D0%BE%D0%B4%20%D1%81%D0%BF%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%B0 <div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Здесь Ваш текст, скрипт или картинка <br> </div> </div> </div> Теперь наш код удобно просматривать и копировать, есть нумерация строк.  3 способ вставки кода в сообщение. Сам код спойлера  выше То есть берете код, размещенный, с нумерацией строк, копируете себе в программку Блокнот. Сохраняете файл на компьютере. Используете по необходимости. Можно заменить слова Open/Сlose на русские Открыть/Закрыть (или на другие) - в конце строки № 3. Конец 3-ей строки: ..... margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div> Код, который хотите, чтобы был скрытым, вставляете вместо слов  "Здесь Ваш текст, скрипт или картинка". Проверим, что получилось? Spoiler: 1 способ. Самый простой. В настройках каждого сообщения, при его создании, есть пункт Параметры со значком - шестеренкой. Кликнув по нему, можно выбрать настройки. В частности, режим редактирования - отмечаем "Показ кода HTML".Затем нажимаем кнопку Готово. Всё. теперь можно просто вставлять различные коды скриптов, программ и т.п. в сообщение, как обычный текст. Но рекомендуют в случае использования этого способа отделить код от обычного текста - другим шрифтом, цветом, фоном, например.