3.17.2011

Hight Light. Код в Blogger.

Многие пользователи, особенно которые ведут блоги на темы программирования вынуждены на своей странице показывать читателям фрагменты кода. Не всегда получается изобразить "красиво". 

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

И так, для тех кто не в курсе, мной сейчас будет рассказан свой метод, как это делаю я:

Заходим на сайт http://pastie.org (никакой регистрации не требуется).

Затем в поле ввода (как показано на рисунке) скопируйте свой код и нажмите на  клавишу Paste.  

Потом, когда вы уже проделали эту операцию, скопируйте код (как показано на рисунке) и вставьте его в своё сообщение туда, где должен быть расположен фрагмент записи.



Если вы уже профи и знаете как работать с HTML, то для вас совет:


Лучше скопировать девайс со страницы

(<pre class="sunburst">.....ваш код......</pre>)

и вставить CSS

/* Stylesheet generated from TextMate theme
 *
 * IDLE
 * 
 *
 */

/* Mostly to improve view within the TextMate HTML viewer */
body {
 margin: 0;
 padding: 0;
}

pre.sunburst {
 padding: 0;
 line-height: 1.3em;
 word-wrap: break-word;
}

pre.sunburst {
 color: #000000;
 background-color: #FFFFFF;
}

pre.sunburst .linenum {
 width: 75px;
 padding: 0.1em 1em 0.2em 0;
 color: #888;
 background-color: #eee;
}
pre.sunburst span {
   padding-top: 0.2em;
   padding-bottom: 0.1em;
}
pre.sunburst ::selection {
 background-color: #BAD6FD;
}
/* Comment */
pre.sunburst .comment {
 color: #919191;
}

/* String */
pre.sunburst .string {
 color: #00A33F;
}

/* Number */
pre.sunburst .constant_numeric {
}

/* Built-in constant */
pre.sunburst .constant_language {
 color: #A535AE;
}

/* User-defined constant */
pre.sunburst .constant_character, pre.sunburst .constant_other {
}

/* Variable */
pre.sunburst .variable_language, pre.sunburst .variable_other {
}

/* Keyword */
pre.sunburst .keyword {
 color: #FF5600;
}

/* Storage */
pre.sunburst .storage {
 color: #FF5600;
}

/* Class name */
pre.sunburst .entity_name_class {
 color: #21439C;
}

/* Inherited class */
pre.sunburst .entity_other_inherited-class {
}

/* Function name */
pre.sunburst .entity_name_function {
 color: #21439C;
}

/* Function argument */
pre.sunburst .variable_parameter {
}

/* Tag name */
pre.sunburst .entity_name_tag {
}

/* Tag attribute */
pre.sunburst .entity_other_attribute-name {
}

/* Library function */
pre.sunburst .support_function {
 color: #A535AE;
}

/* Library constant */
pre.sunburst .support_constant {
 color: #A535AE;
}

/* Library class/type */
pre.sunburst .support_type, pre.sunburst .support_class {
 color: #A535AE;
}

/* Library variable */
pre.sunburst .support_other_variable {
 color: #A535AE;
}

/* Invalid */
pre.sunburst .invalid {
 color: #FFFFFF;
 background-color: #990000;
}

/* String interpolation */ 

pre.sunburst .constant_other_placeholder_py {
 color: #990000;
}

.sunburst{
border:solid 1px #cccccc;
padding:5px;
}


Это облегчет работу и не будет проблем с RSS фидом.

Последние комментарии

  • Сергей Николаеску on rgb 16
    Огромное спасибо за информацию!... (Далее)

  • Николай on yahoo blogger
    Попробовал. Все бы хорошо, только вот, похоже, смайликов по указанным адресам нет уже.... (Далее)

  • Настя Солнечная (ТМ СКРАПБУРГ) on yahoo blogger
    Прикольно! Хочу попробовать) А встроенный чего-то там - это то, что окно для комментов всплывает?;-) Или что-то другое?;-)... (Далее)

  • Вячеслав on blog post
    Конечно помогу. Киньте xml свого шаблона на адрес эл.почты и представьтесь.slava_vvk@mail.ru... (Далее)

  • Hakob on blog post
    Спасибо большое за скрипт, но у меня тоже не в середине... можете помочь исправить ? Заранее спасибо :)... (Далее)

  • Anonymous on yahoo blogger
    не могу найти... (Далее)

  • Вячеслав on blog post
    А у вас такое встречалось?... (Далее)

  • tussauds on blog post
    Ну ты долго пропадал. Эта проблема уже возникала осенью где-то... Но ее уже решили. Это связано с Upgrade Блогспота. Новшества не всегда полезны и... (Далее)