Прикручивание публикации кода с подсветкой синтаксиса к Blogger’у.
Задумалось мне, на досуге, реализовать подсветку кода в моем блоге. Погуглил. Нашел несколько вариантов реализации задуманного. Вот обзорчик по теме:
- Подсветка кодов в блоге. Часть первая.
- Подсветка кодов в блоге. Часть вторая.
- Подсветка специального текста в Blogger-блоге.
- Код в Blogger;
- Syntax Highlighter в Blogger'е (Syntax Highligter Widget).
Решил пока остановиться на этом: Highlight.js. Причины выбора:
- Динамический;
- Не загромождает шаблон страницы;
- Поддержка Delphi/Object Pascal (а также много других, распознование - автоматом);
- Легко прикручивается к Blogger.
Как я его прикручивал? Рассказываю.
Во первых выяснилось, что для размещения скрипта подсветки, да и вообще любых пользовательских скриптов, нужен отдельный файловый хостинг, потому что blogger пользовательские файлы не хранит. Обидно, досадно, ну да ладно. Зарегался значит, я на fileave.com, а там предоставляют на халяву всего 50М, но мне для скриптиков блоггера – достаточно.
Скачиваю Highlight.js (нужно обязательно расставить галки напротив нужных вариантов) заливаю на fileave.com. Теперь действую по инструкции: Подсветка синтаксиса в блоге на Blogger.com. Хотя описание несколько устарело, основную идею переделки шаблона оттуда я извлек.
Затем я, путем проб и ошибок, добавил скроллинг в элемент отображения кода. Для этого пришлось немного поправить используемый мною, для раскраски кода, стиль “Magula”:
/* highlight.js styles */
pre {
margin: .5em; padding: .5em;
border-style: solid;
border-width: thin;
border-color: darkgrey;
background-color: #f4f4f4;
}
pre code,
.ruby .subst,
.lisp .title {
display: block;
height: 420px;
overflow: scroll;
word-wrap: normal; /* Для Internet Explorer 5.5+ */
line-height: 1.2em;
color: black;
}
... Здесь пропущены прочие описания стилей ... :)
/* End of highlight.js styles */
Смотрю на красивую подсветку кода Delphi. Радуюсь. Ку!...
FUNCTION Utf8ToAnsi (Source : STRING; UnknownChar : CHAR = 'ї') : ANSISTRING;
(* Converts the given UTF-8 String to Windows ANSI (Win-1252).
If a character can not be converted, the "UnknownChar" is inserted. *)
VAR
SourceLen : INTEGER; // Length of Source string
I, K : INTEGER;
A : BYTE; // Current ANSI character value
U : WORD;
{$IFDEF UNICODE} // #2009-09-17 DremLIN
Ch : WIDECHAR; // Dest char
{$ELSE}
Ch : CHAR; // Dest char
{$ENDIF}
Len : INTEGER; // Current real length of "Result" string
BEGIN
SourceLen := Length (Source);
SetLength (Result, SourceLen); // Enough room to live
Len := 0;
I := 1;
WHILE I <= SourceLen DO BEGIN
A := ORD (Source [I]);
IF A < $80 THEN BEGIN // Range $0000..$007F
INC (Len);
{$IFDEF UNICODE} // #2009-09-17 DremLIN
Result [Len] := AnsiChar(Source[I]);
{$ELSE}
Result [Len] := Source [I];
{$ENDIF}
INC (I);
END
ELSE BEGIN // Determine U, Inc I
IF (A AND $E0 = $C0) AND (I < SourceLen) THEN BEGIN // Range $0080..$07FF
U := (WORD (A AND $1F) SHL 6) OR (ORD (Source [I+1]) AND $3F);
INC (I, 2);
END
ELSE IF (A AND $F0 = $E0) AND (I < SourceLen-1) THEN BEGIN // Range $0800..$FFFF
U := (WORD (A AND $0F) SHL 12) OR
(WORD (ORD (Source [I+1]) AND $3F) SHL 6) OR
( ORD (Source [I+2]) AND $3F);
INC (I, 3);
END
ELSE BEGIN // Unknown/unsupported
INC (I);
FOR K := 7 DOWNTO 0 DO
IF A AND (1 SHL K) = 0 THEN BEGIN
INC (I, (A SHR (K+1))-1);
BREAK;
END;
U := WIN1252_UNICODE [ORD (UnknownChar)];
END;
Ch := UnknownChar; // Retrieve ANSI char
FOR A := $00 TO $FF DO
IF WIN1252_UNICODE [A] = U THEN BEGIN
Ch := CHR (A);
BREAK;
END;
INC (Len);
{$IFDEF UNICODE} // #2009-09-17 DremLIN
Result [Len] := AnsiChar(Ch);
{$ELSE}
Result [Len] := Ch;
{$ENDIF}
END;
END;
SetLength (Result, Len);
END;
Для полного счастья не хватает нумерации строк. Ну что ж… А так ли она нужна? Возможно прав автор проекта Highlight.js Сагалаев Иван Григорьевич – Баловство все это… Буду морщить ум с этой стороны… А пока – Пока! Чао – какао… :)
2 комментария:
вы свой dremlin.blogspot.ru продвигаете как-то, а то я его нашел через Yahoo (случайно)
Спасибо. А если конешно не секрет, что искали? (на яху)...
Отправить комментарий