Před založením svého blogu jsem si stanovil zásadní podmínku, kterou jsem musel být schopen u zvoleného poskytovatele zajistit. Jelikož píšu vývojářský blog, je nezbytné, aby byla syntaxe vkládaných zdrojových kódů správně zvýrazněná a tudíž lépe čitelná. Potřeboval jsem docílit něčeho takového (C# kód):
namespace Blog
{
/// <summary>
/// Příspěvek.
/// </summary>
public class Prispevek
{
public String Text { get; private set; }
public Prispevek(String text)
{
if (String.IsNullOrEmpty(text))
{
throw new ArgumentNullException("Text příspěvku nesmí být prázdný.");
}
this.Text = text;
}
}
}
Inspirací mi bylo zvýrazňování syntaxe používané na serveru www.stackoverflow.com. Není sice úplně dokonalé (všimněte si např. podbarvení property Text, které by mělo být černé), je ale dostatečně názorné a vyžaduje minimální přizpůsobení zdrojového kódu před vložením. Výše uvedený zdrojový kód se do stránky vloží v tomto tvaru:
<pre>
<code>
namespace Blog
{
/// <summary>
/// Příspěvek.
/// </summary>
public class Prispevek
{
public String Text { get; private set; }
public Prispevek(String text)
{
if (String.IsNullOrEmpty(text))
{
throw new ArgumentNullException("Text příspěvku nesmí být prázdný.");
}
this.Text = text;
}
}
}
</code>
</pre>
Princip řešení
Řešení je založeno na dvou javascriptových modulech Prettify a jQuery.
Prettify dokáže v textu rozpoznat zdrojový kód jazyků typu C++, C#, Bash, dokumentů XML a dalších. Po vyhodnocení typu zdrojového kódu odekoruje jednotlivé elementy kódu příslušnou CSS třídou. Vám pak stačí pro danou třídu zadefinovat CSS styly, např. pro C# klíčová slova:
.csharp .kw1
{
color: #0600FF;
}
jQuery je výkonná knihovna, která zefektivňuje práci s HTML dokumentem na straně klienta. V našem případě se využije pro dohledání sekcí uzavřených mezi tagy <pre><code>. To je nutné pro určení rozsahu formátování pro Prettify.
Postup
1. Stáhněte si jQuery a Prettify.
2. Umístěte soubory prettify.js, prettify.css a jquery.js někam, kde budou dostupné pro zpracování na klientovi. V mém případě jsem si musel vytvořit webový prostor na google, kam jsem všechny potřebné soubory nauploadoval.
3. Do šablony stránky, do sekce <head> přidejte odkazované soubory (vysvětlení dále v textu), např. takto:
<script type="text/javascript" src="https://sites.google.com/site/robertdreslersite/jquery.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/robertdreslersite/prettify.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/robertdreslersite/styleCode.js"></script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/robertdreslersite/prettify.css"/>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/robertdreslersite/langs.css"/>
4. Vytvořte si soubor styleCode.js s funkcí pro stylizaci kódu:
function styleCode()
{
if (typeof disableStyleCode != "undefined")
{
return;
}
var a = false;
$("pre code").parent().each(function()
{
if (!$(this).hasClass("prettyprint"))
{
$(this).addClass("prettyprint");
a = true
}
});
if (a) { prettyPrint() }
}
5. Do šablony sekce <head> přidejte ještě část javascriptového kódu, který zpřístupní funkci styleCode():
<script type="text/javascript">
$(function() {
styleCode();
});
</script>
6. Teď už nám zbývá pouze ve vhodný okamžik vyvolat přeformátování zdrojových kódů. Vyvolání je vhodné umístit do šablony do události onLoad elementu <body>:
<body onload="styleCode()">7. Zbývá vysvětlit význam souboru langs.css. Obsahuje formátovací styly pro elementy, které umí vygenerovat Prettify. Můžete použít můj nebo si zadefinovat vlastní.
Další informace
Můžete se podívat na původní článek, ve kterém se o řešení dozvíte více. Je zde vysvětleno i zvýrazňování syntaxe uživatelských vstupů - např. při zadávání komentářů na vývojářských fórech.
Žádné komentáře:
Okomentovat