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 фидом.

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