Как публиковать код программ, скриптов в блоге

18.02.2016

Стараюсь делиться полезной информацией с читателями. При этом, иногда нужно в сообщение вставить код - скрипта, гаджета, каких-либо настроек. Как можно размещать коды в блоге, чтобы они нормально отображались?

Нашла три способа вставки кодов в публикацию.

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) Переходим обратно. В сообщении ничего не видно - только в режиме "Просмотр" и после публикации поста. (Ура! Получилось!)




Теперь наш код удобно просматривать и копировать, есть нумерация строк.


 И 3 способ вставки кода в сообщение. При помощи спойлера (скрывающегося текста). Этот способ я использовала в статье Гаджет "Обратная связь" для Blogger 

Большое спасибо автору кода
Сам код спойлера я уже разместила выше (см. шаг 8), когда училась создавать сниппет (ух ты, сколько умных слов теперь знаю).

То есть берете код спойлера с нумерацией строк, копируете себе в программку Блокнот. Сохраняете файл на компьютере. И используете по необходимости))) Или сразу в сообщение на Blogger'е вставляете.

Можно заменить слова Open/Сlose на русские Открыть/Закрыть (или на другие) - в конце строки № 3.

Конец 3-ей строки: ..... margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>

Код, который хотите, чтобы был скрытым, вставляете вместо слов "Здесь Ваш текст, скрипт или картинка".

Проверим, что получилось?
Спойлер:

Картинка смайлик



Надеюсь, что у Вас получится удачно вставить код в сообщение блога.

3 комментария:

  1. Здравствуйте, Мария! Вы моя последняя надежда, т.к. сама не могу разобраться. Объясните, пожалуйста, как вставить задания для учеников не в виде ссылки, а встроить на страницу. Задания тогда дети будут выполнять прямо на странице. Пример: http://dom-zadanie.weebly.com/2-109510771090107410771088109011003.html. И Google-форму, наверное, по такому же принципу. Мучаюсь пятый день, а так хочу для ребят создать познавательный блог. Заранее благодарна.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Светлана. Посмотрела сайт, на который Вы дали ссылку. Педагог - автор сайта - использует различные сервисы. О них она говорит на "Главной" странице, в инструкциях по работе. Скорее всего, каждый из сервисов дает возможность после создания, например, флеш-карточки, получить готовый код (либо HTML, может быть код Java Script).
      Один из сервисов, который используется на сайте - Google формы. Как встроить форму на сайт - см. шаг 2 в справке https://support.google.com/docs/answer/2839588?hl=ru&ref_topic=6063584
      Суть таких "встраиваний" в блог: 1. Получаем код (HTML, Java Script). 2. В блоге при создании сообщения переходим в режим редактирования HTML. 3. Вставляем скопированный код.

      Удалить
  2. Огромное спасибо.Все поняла. Вы-умница! Благодаря вашим инструкциям я создаю блог класса ( не верила что смогу!). Удачи Вам и творческого вдохновения.

    ОтветитьУдалить

Загляните и на другие страницы ^