Integrace do Blogu
Na tomto blogu najdete podrobný návod, jak zprovoznit zvýrazňovač na Bloggeru. Pokud se vám nechce procházet celý článek, nebo neholdujete anglickému jazyku, pokusím se jej shrnout. Protože budeme modifikovat šablonu, doporučuji ji předem zazálohovat:
Návrh - Upravit HTML - Stáhnout úplnou šablonu
Pokud by se něco nepovedlo, tak ji načtete zpět:
Návrh - Upravit HTML - Vybrat soubor (vybrat zálohovanou šablonu) - Nahrát
Do šablony hned za tag vložte následující kus kódu:
<!--SYNTAX HIGHLIGHTER BEGINS-->Uložíme šablonu.
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->
Tím jsme integrovali zvýrazňovač do blogu. Já jsem si přidal jen podporu zvýraznění jazyka C# a XML (resp. HTML). Pokud budete potřebovat jiné jazyky, přidáte do šablony odkaz na příslušný jazyk. Například pro SQL takto:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>Zde je odkaz na názvy souborů všech podporovaných jazyků.
Použití zvýrazňovače v příspěvku
Zvýraznění můžeme aktivovat dvěma způsoby - použitím tagu <pre> nebo přes CDATA. Doporučuji používat první zmíněný. Používám jej jak pro C# kód tak pro HTML a zatím nebyl žádný problém. Při zvýrazňování HTML kódu nezapomeňte escapovat speciální znaky. K tomu můžete použít nástroj Quick Escape.
Tagu <pre> předáme parametr typu class, ve kterém specifikujeme, jaký jazyk chceme zvýraznit. Pro C# to bude následující:
<pre class="brush: c-sharp"> ZDE VLOZIT C# KOD </pre>Použití stylů
Aby zvýraznění syntaxe pasovalo do zbytku Vašeho blogu, je vytvořeno několik stylů (CSS soubory) a rovňěž si můžete vytvořit styl vlastní. Stačí v šabloně nahradit shThemeDefault za jeden z dostupných stylů (Emacs, Django, FadeToGray...):
- shThemeDjango.css
- shThemeEclipse.css
- shThemeEmacs.css
- shThemeFadeToGrey.css
- shThemeMidnight.css
- shThemeRDark.css
Přizpůsobení
Tag <pre> může kromě povinného parametru class brát i další volitelné parametry. Můžeme tak zapnout či vypnout čísla řádků, zvolit číslo prvního řádku, zvýraznit určité řádky apod. Přímo na stránce autora najdete podrobný popis tohoto nastavení.
Závěrem
Zkoušel jsem několik metod na zvýraznění kódu v blogu na Blogger.com a SyntaxHighlighter od Alexe Gorbatcheva zatím naprosto dostačuje mým potřebám. Pokud bych potřeboval nějakou nepodporovanou funkci, není problém ji díky dostupnému zdrojovému kódu dopsat.
Žádné komentáře:
Okomentovat