Kolorowanie składni

Najczęściej w danym artykule omawiam jakieś zagadnienie, a przy okazji prezentuję odpowiednie przykłady kodu, które wspomagają jego zrozumienie. Aby kod na stronie wyglądał ładnie i się wyróżniał, wykorzystuję specjalną bibliotekę umożliwiającą kolorowanie składni danego języka programowania.

Istnieje kilka rozwiązań pozwalających na uzyskanie takiej funkcjonalności. Wybrałem z nich bibliotekę highlight.js, udostępnioną na zasadach licencji BSD.

Bibliotekę w domyślnej wersji można wczytać z usługi CDN (np. cdnjs):

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/
  highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/
  highlight.js/11.4.0/highlight.min.js"></script>

Można też samemu określić, jakie języki chciałoby się analizować, a następnie pobrać tak zdefiniowany pakiet i umieścić odpowiednie pliki na własnym serwerze. W tym celu powinno się odwiedzić stronę https://highlightjs.org/download/, a następnie przejść do sekcji Custom package, w której można już zaznaczyć określone języki.

Pobrany plik rozpakowujemy i umieszczamy na serwerze w jakimś katalogu. Następnie w sekcji head strony linkujemy odpowiednie pliki:

<link rel="stylesheet"
      href="../../css/highlight/styles/base16/humanoid-dark.min.css">
<script src="../../css/highlight/highlight.min.js"></script>

W pierwszym wierszu wybieramy styl kolorów kodu. Dla ponad 190 języków jest dostępnych więcej niż 240 stylów, więc każdy może wybrać to, co mu najlepiej odpowiada.

Zaraz po wczytaniu plików biblioteki należy wywołać funkcję highlightAll():

<script>hljs.highlightAll();</script>

A oto cały kod w jedym miejscu:

<head>
    <link rel="stylesheet" href="../../css/highlight/styles/base16/humanoid-dark.min.css">
    <script src="../../css/highlight/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>

Teraz już możemy kolorować składnię. W tym celu używamy znaczników pre i code z atrybutem class określającym język (lista identyfikatorów języków jest dostępna na Githubie):

<pre><code class="language-cpp">
    tutaj kod języka C++
</code></pre>

Oto prosty przykład kolorowania składni kodu:

std::string hello(std::string s)
{
    return "Witaj, " + s;
}

int main()
{
    std::cout << hello("świecie!") << std::endl;
}

Można też nie używać atrybutu class, a biblioteka spróbuje sama wydedukować, z jakim językiem ma do czynienia:

def array_sum(a): 
    sum=0
    for i in a:
        sum = sum + i
    return(sum) 
  
arr = [1, 2, 3, 4] 
result = array_sum(arr)
print ('Wynik: ', result)

W powyższym przykładzie użyliśmy jedynie <pre><code>, a biblioteka wydedukowała, że chcieliśmy wyświetlić kod Pythona.

Możemy również cytować tekst bez jego kolorowania. W tym celu należy użyć class="language-plaintext":

To jest zwykły tekst.
Nic nie jest podświetlane.
void fun(int x)