Sławomir Czerwiński

Zacząłem już opisywać tworzenie dokumentów za pomocą L^AT_EX-a, jednak bez kolorowania składni dłuższe fragmenty kodu stają się nieczytelne. Cały problem polega na tym, że w projekcie SyntaxHighlighter nie ma skryptów dla tego języka. Jednak po krótkiej lekturze kodu źródłowego projektu, postanowiłem dopisać do niego własny skrypt dla L^AT_EX-a.

Najpierw należy zdefiniować nową funkcję pędzla (dp.sh.Brushes.LaTeX), która będzie ustawiać podstawową klasę CSS (CssClass) dla L^AT_EX-a oraz definiować style różnych fragmentów kodu (Style):

dp.sh.Brushes.LaTeX = function() {
  this.CssClass = 'dp-latex';
  this.Style =
    '.dp-latex .comment { color: #008040; }' +
    '.dp-latex .command { ' +
    'color: #0040C0; font-weight: bold; }' +
    '.dp-latex .macro { color: #0040C0; }' +
    '.dp-latex .bracket { ' +
    'color: #C00000; font-weight: bold; }' +
    '.dp-latex .square-bracket { ' +
    'color: #008000; font-weight: bold; }' +
    '.dp-latex .math { ' +
    'color: #F000D0; font-weight: bold; }';
}

Następnie należy utworzyć prototyp podświetlacza składni dla nowego języka:

dp.sh.Brushes.LaTeX.prototype =
  new dp.sh.Highlighter();

Żeby kolorowanie składni zadziałało, należy utworzyć na stronie element pre, zawierający atrybuty name="code" oraz class, którego wartość będzie określała pędzel użyty dla danego fragmentu kodu. Możliwe wartości atrybutu class podajemy w formie tablicy:

dp.sh.Brushes.LaTeX.Aliases =
  ['tex', 'latex'];

Ostatnim etapem jest wyszukiwanie podświetlanych elementów języka za pomocą wyrażeń regularnych:

dp.sh.Brushes.LaTeX.prototype.ProcessRegexList =
  function() {
    this.GetMatches(
        new RegExp('%[^\\x00-\\x1F]*', 'gm'),
        'comment');

    this.GetMatches(
        new RegExp('\\$[^\\x00]*\\$', 'gm'),
        'math');

    this.GetMatches(
        new RegExp('\\\\\\\\‍', 'gm'),
        'command');
    this.GetMatches(
        new RegExp('\\\\[a-zA-Z]+', 'gm'),
        'command');
    this.GetMatches(
        new RegExp('[\\\\]?@[a-zA-Z]+', 'gm'),
        'macro');

    this.GetMatches(
        new RegExp('[\\{\\}]+', 'gm'),
        'bracket');
    this.GetMatches(
        new RegExp('[\\[\\]]+', 'gm'),
        'square-bracket');
  }

Metoda GetMatches przyjmuje dwa parametry. Pierwszym jest wyrażenie regularne, a drugim – nazwa klasy, jaka ma być użyta do pasujących fragmentów kodu.

Najpierw znajduję wszystkie komentarze (linie 3–5), które zaczynają się od znaku „%” i kończą wraz z utworzeniem nowej linii.

Kolejnym elementem są wyrażenia matematyczne, zawarte pomiędzy znakami „$” (linie 7–9).

Następnie podświetlam komendy języka, czyli znacznik nowej linii („\\” – linie 11–13) oraz wszystkie pozostałe (zaczynające się od „\” – linie 14–16). Podobnie znajdywane są makra, zaczynające się od „\@” lub „@” (linie 17–19).

Na samym końcu zmieniam wygląd nawiasów – klamrowych (linie 21–23) i kwadratowych (linie 24–26).

Przygotowałem kompletny plik shBrushLaTeX.js, gotowy do pobrania. Przypuszczam, że pominąłem jakieś elementy L^AT_EX-a, ale w przyszłości zamierzam uaktualniać skrypt w razie potrzeb.

Poniżej znajduje się przykładowy dokument L^AT_EX, przekształcony przy użyciu Google SyntaxHighlighter:

% Artykuł:
\documentclass{article}

% Pakiety:
\usepackage[utf8]{inputenc}
\usepackage{polski}

% Ciało dokumentu:
\begin{document}
  Tekst \\ Nowa linia % Komentarz
  \newline Wyrażenie matematyczne: $x_i = x_{i-1}^2$.
\end{document}

W przypadku złego działania skryptu albo braku jakichś ważnych elementów składni, proszę o kontakt poprzez email lub komentarz.