SyntaxHighlighter

Datum vydání: 2011-11-18 11:00:00; aktualizováno: 2019-11-12 11:29:47

Pro zvýraznění syntaxe zdrojových souborů programovacích jazyků jsem si stáhla SyntaxHighlighter 3.0.83. Jde o zvýrazňovač syntaxe napsaný v JavaScriptu. SyntaxHighlighter dokáže automaticky naformátovat kód podle syntaxe daného jazyka, který máte napsaný v HTML v tagu <pre>.

Implemantace

Jeho implementace do webových stránek je celkem jednoduchá. Aktuální SyntaxHighlighter je k dispozici ke stažení na GitHubu. Následující poznámky se týkají starší verze 3.0.83.

Postup pro zpovoznění je sice popsán na stránce instalace, nicméně autor na stránce má chyby, kód nefunguje vlivem změn v adresářové struktuře. Nejlepší je se podívat do souboru syntaxhighlighter_3.0.83/index.html. Jde o funkční ukázkový soubor, který zobrazí krátký zdrojový kód a spustí zvýraznění syntaxe.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Hello SyntaxHighlighter</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body style="background: white; font-family: Helvetica">

<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>

</html>

Po zobrazení index.html by s vám mělo objevit:

function helloSyntaxHighlighter()
{
    return "hi!";
}

Obdobný kód si pak zkopírujete do svých stránek s tím, že si patřičně upravíte cesty k souborům, aby odpovídaly umístění Syntax Highlighteru.

Tento kód bohužel počítá pouze se syntaxí javascriptu – načítá se skript shBrushJScript.js, který se aplikuje zadáním třídy do tagu pre pomocí class="brush: js;".

Syntax Highlighteru však umí mnoho jiných jazyků. Každý jazyk používá svůj vlastní brush.

Přidání dalšího jazyka do syntaxe

Další jazyk můžete přidat buď dynamicky, nebo staticky. Dynamické přidání se mi příliš nedařilo (kvůli jiným cestám), a tak jsem přidala kód do index.html staticky. Podrobně o možné implemtentaci pojednává stránka rozšíření a integrace.

index.html po přidání jazyka Delphi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Hello SyntaxHighlighter</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body style="background: white; font-family: Helvetica">

<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>

<pre class="brush: delphi;">
function helloSyntaxHighlighter: string;
begin
    helloSyntaxHighlighter := 'hi!';
end;
</pre>

</html>

Po zobrazení upraveného index.html by se vám mělo objevit:

function helloSyntaxHighlighter()
{
    return "hi!";
}
function helloSyntaxHighlighter: string;
begin
    helloSyntaxHighlighter := 'hi!';
end;

Do zdrojového kódu jsem pod scripts/shBrushJScript.js přidala další brush scripts/shBrushDelphi.js pro jazyk Delphi. Do tagu <pre> se uvede class="brush: delphi;". Podobně lze přidaj jakýkoli další jazyk, který SyntaxHighlighter podporuje. Jednotlivé jazyky jsou definovány v adresáři scripts.

Další možnosti konfigurace

Můžete si ho také nakonfigurovat (např. změnit číslování první řádky, zdůraznit některé řádky apod.).

Změna vzhledu

Můžete si patřičně změnit vzhled pomocí změny css souborů – styles/shCoreDefault.css, nebo využít již připravených vzhledů.