Вставить код HTML, в сообщения
Недавно в комментарии меня спросили, какую систему я использую для публикации HTML и других языков программирования в постах. В течение последнего времени можно публиковать HTML-код в сообщениях Blogger, не интерпретируя его как таковой, но рассматривая его только как текст. Это пока невозможно для комментариев, где код все еще интерпретируется, и чтобы опубликовать его, мы должны использовать хитрость.
Даже пользователи Open Live Writer могут легко вставить HTML-код в сообщения, созданные с помощью этого инструмента. Некоторые пользователи Blogger используют цитату или блочную цитату,чтобы опубликовать код, чтобы представить его графически отличным от другого содержимого. Среди прочего, цитата из Blogger можно настроить. Но есть сайты, которые используют цитату для других событий, такие как литературные блоги.
Я также сделал свой выбор: я предпочитаю вставлять код в прямоугольник с фоном голубого цвета, который я использую в облегченной компоновке некоторых тонов с Oto255. В дополнение к прямоугольнику я также использую фоновое изображение, которое указывает на авторство автора.
В этой статье я предложу вам три способа ввода кода, которые вы можете дополнительно настроить, изменяя параметры. С первым вы получите этот результат
Это я использую в качестве основы для стиля в этом блоге.
1. После сохранения резервной копии шаблона перейдите в Тема -> Изменить HTML и найдите строку <b:skin>. Вы нажимаете на черную стрелку слева, чтобы показать весь код. Нажмите Ctrl + F, вставьте ]]></b:skin> в окно поиска и сразу над ним, вставьте
.codice1 { margin : 15px 35px 15px 15px; padding : 10px; clear : both; list-style-type : none; background : #f9f9f9 url(https://lh3.googleusercontent.com/-c_i7spoqIQ0/WBB5Ia1kBJI/AAAAAAAA41c/BF159yeZJkwrUrKBsaui62YkY_167k8BACHM/s720/codice-1.gif) no-repeat right bottom; border : 2px solid #eee; color : #7D7D7D; }
Сохраните шаблон
2. Если вы хотите опубликовать код в посте, созданный в Редакторе Blogger то вы переходите в HTML на странице сообщения и между строк в нужном вам месте вставляете код
<div class=’codice1′>
Код для отображения в посте
</div>
Другой возможный стиль выглядит следующим образом.
Установка происходит аналогично первому варианту, за исключением заменяется codice1 на codice2
.codice2 { margin : 15px 35px 15px 15px; padding : 10px; clear : both; list-style-type : none; background : #f9f9f9 url(https://lh3.googleusercontent.com/-U6FaWH1xmhI/WBB5IRUm9zI/AAAAAAAA41c/yB9dXvmDS3AVgQUJf-8V0rlXwCm7jlXAgCHM/s720/codice2.gif) no-repeat right bottom; border : 2px solid #eee; color : #7D7D7D; }
При публикации кода в посте используйте класс code2 вместо класса code1.
<div class=’codice2′>
Код для отображения в посте
</div>
Наконец, третий вариант приведет к этому результату с отображением количества строк.
Данный стиль выглядит следующим образом.
Код для вставки в шаблон выглядит следующим образом
Установка происходит аналогично первому варианту, за исключением заменяется codice1 на codice3
.codice3 { margin : 10px; padding: 0px 25px 5px 40px; background : #ffffff url(https://lh3.googleusercontent.com/-z_ct9vBGS0Y/WBB3zKNNn7I/AAAAAAAA41g/xzeTBCY7O0o5Vph_pOL2wDi_ANO3f4SrQCHM/s720/codice3.png) no-repeat top left; font: 0.9emHelvetica; color : #767675; border: 1px solid #767675; }
При публикации кода в посте используйте класс code3 вместо класса code1.
<div class=’codice3′>
Код для отображения в посте
</div>
Настройка стилей кода
В дополнение к настройке цветовых кодов, URL-адреса изображений могут быть заменены на другие изображения, загруженные в Google Фото. Помните, что, когда метки margin и padding имеют одно значение, оно будет применяться для всех направлений и влиять соответственно на внешние и внутренние расстояния прямоугольника. Если значения равны четырем, первое даст расстояние в направлении вверх, второе в право и так далее по часовой стрелке, В третьем коде также была вставлена строка для семейства символов, но она также может быть добавлена в двух других кодах; 0.9em означает, что шрифты в прямоугольнике будет иметь размер в 90% по сравнению с шрифтом в сообщении. Наконец, вы также можете установить стиль рамки, ее размер и цвет.
