Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
вторник, 22 мая 2018 г.

Ещё один вариант оформления кода

здесь НЕ работает
Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)"(http://exp13blog.blogspot.com/2013/06/vstavka-koda-2.html).
1. Новый класс .mykod, для которого  CSS стиль такого вида:
.mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}
Этот стиль CSS сохраняем  через  Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.
2. Теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:
<div class="mykod">ВАШ КОД</div>
То есть, сначала в визуальном редакторе пишем код , а затем (после написания всей статьи), переключаемся на HTML-редактор и участок текста, соответствующий нашему коду, обрамляем в вышеуказанные div-ы.
Идею такого оформления кода позаимствованна в статье "Красивое выделение текста".
здесь: border - граница, border-radius - скругление краев, margin - отступы блока, padding - отступ внутри блока, font-size -  размер шрифта, color - цвет шрифта, background - цвет фона.
По этой теме можно прочесть также: 
  • Вставка кода в статью блога( http://exp13blog.blogspot.com/2013/06/vstavka-koda.html)  
  • Вставка кода в статью блога (продолжение)http://exp13blog.blogspot.com/2013/06/vstavka-koda-2.html 
  • Оформление участка текста стилем "Тетрадный лист в линейку"http://exp13blog.blogspot.com/2014/09/oformlenie-uchastka-teksta.html 



0 коммент.:

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