Wszystkie wtyczki na dzisiaj nie mają kolorowania dla Hollywood. Znalazłem nawet taką co obsługuje 259 formatowań i też nie ma. Rozwiązaniem jest znalezienie dobrej, która umożliwia kolorowanie ręczne i formułowanie własnych definicji.
I taki jest Code Snippets. Ma milion instalacji więc nie zniknie sobie.
Tworzenie szablonu kolorującego kod
Po instalacji w panelu WordPressa pojawi sie w menu po lewej nowa pozycja z ikonką nożyczek i opisana „Fragmenty kodu”. Są w niej podpunkty, nie rozpisując się można dodawać nowe definicje i zarządzać nimi. W darmowej wersji obsługiwane są PHP i HTML, płatne Pro dodaje CSS i JS. Darmowa wersja nam wystarczy.
Kod w PHP będzie wyglądał tak:
function custom_hollywood_block() {
// Funkcja dodająca kolorowanie składni dla języka Hollywood w blokach kodu WordPress
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Poczekaj na załadowanie strony, aby przetworzyć bloki kodu
const codeBlocks = document.querySelectorAll("pre code.language-hollywood");
codeBlocks.forEach(function(block) {
let code = block.innerHTML.trim(); // Pobierz kod i usuń białe znaki na końcach
const lines = code.split("\n"); // Podziel na linie
const formattedLines = lines.map(function(line) {
const leadingWhitespace = line.match(/^\s*/)[0]; // Zachowaj wcięcia
let trimmedLine = line.trim(); // Usuń białe znaki z początku i końca linii
if (!trimmedLine) return line; // Jeśli linia pusta, zwróć bez zmian
// Kolorowanie komentarzy zaczynających się od ';'
if (trimmedLine.startsWith(";")) {
return `${leadingWhitespace}<span class="custom-comment">${trimmedLine}</span>`;
}
// Kolorowanie stringów w cudzysłowach
trimmedLine = trimmedLine.replace(/"([^"]*)"/g, '<span class="custom-string">"$1"</span>');
// Kolorowanie słów kluczowych języka Hollywood
trimmedLine = trimmedLine.replace(
/\b(Local|Function|EndFunction|If|ElseIf|EndIf|Repeat|WaitEvent|Forever|InstallEventHandler)\b/g,
'<span class="custom-keyword">$1</span>'
);
// Kolorowanie wbudowanych funkcji Hollywood
trimmedLine = trimmedLine.replace(
/\b(MouseX|MouseY|IsLeftMouse|IsRightMouse|Line)\b/g,
'<span class="custom-function">$1</span>'
);
// Kolorowanie liczb
trimmedLine = trimmedLine.replace(
/\b(\d+)\b/g,
'<span class="custom-number">$1</span>'
);
// Kolorowanie parametrów zaczynających się od '#' (np. #BLACK, #WHITE)
trimmedLine = trimmedLine.replace(
/(#\w+)/g, // Poprawione wyrażenie regularne dla #nazwa
'<span class="custom-parameter">$1</span>'
);
return `${leadingWhitespace}${trimmedLine}`;
});
block.innerHTML = formattedLines.join("\n"); // Połącz linie z powrotem
});
});
</script>
<style>
/* Styl dla bloków kodu Hollywood */
pre code.language-hollywood {
display: block;
padding: 1em; /* Wewnętrzny odstęp */
background: #f5f5f5; /* Jasnoszare tło */
border-radius: 4px; /* Zaokrąglone rogi */
font-family: Tahoma, sans-serif; /* Czcionka Tahoma */
font-size: 0.9em; /* Rozmiar czcionki 90% tekstu strony */
line-height: 1.4; /* Wysokość linii dla czytelności */
}
.custom-comment {
color: #008000 !important; /* Zielony kolor dla komentarzy */
}
.custom-keyword {
color: #0000FF !important; /* Niebieski dla słów kluczowych */
font-weight: bold; /* Pogrubienie */
}
.custom-function {
color: #8B4513 !important; /* Brązowy dla funkcji */
}
.custom-number {
color: #FF0000 !important; /* Czerwony dla liczb */
}
.custom-string {
color: #800080 !important; /* Purpurowy dla stringów */
}
.custom-parameter {
color: #FFA500 !important; /* Pomarańczowy dla parametrów typu #BLACK, #WHITE */
}
</style>
<?php
}
add_action('wp_footer', 'custom_hollywood_block'); // Podłącz funkcję do stopki WordPress
Niestety style nadrzędne używane w szablonie WordPressa czasami brużdżą i trzeba trochę pokombinować. Powyższy kod jest pokolorowany wtyczką Enlighter – Customizable Syntax Highlighter. Jest dobra (choć tu w jednym miejscu zagubiła się z kolorami), ale nie uwzględnia Hollywood. Pokazuje ją, bo musiałem pokazać kod PHP, przecież nie będę pisał specjalnie formatowania do Code Snippets jak to leży w sieci.
Wykorzystanie szablonu kodu we wpisie na blogu
Podczas edycji posta kod w Hollywood musi być wklejany jako HTML. I musi być obudowany z dwóch stron.
<pre class="wp-block-custom-hollywood"> <code class="language-hollywood"> Tutaj cały kod w Hollywood </code></pre>
Jak wygląda efekt kolorowania kodu
Ja sobie ustawiłem podobnie, tak jak mam w IDE Hollywood.
– Komentarze zaczynające się od ; są wyświetlane na zielono (#008000).
– Słowa kluczowe języka Hollywood są niebieskie (#0000FF) i pogrubione.
– Wbudowane funkcje mają kolor brązowy (#8B4513).
– Liczby są czerwone (#FF0000).
– Stringi w cudzysłowach są purpurowe (#800080).
– Parametry zaczynające się od # są pomarańczowe (#FFA500).
– Cały kod używa czcionki Tahoma i ma jasnoszare tło.
Konieczne było pomniejszenie czcionki na rozmiar 90% tekstu strony. Niestety nie udało mi sie ustawić kolorowania dla komend preprocesora, znak @ jest problematyczny i próby psuły resztę.
Wyszło jak poniżej:
@VERSION 7, 0
@DISPLAY {Width = 800, Height = 600}
EscapeQuit(True)
SetFillStyle(#FILLCOLOR)
v = {}
v[0] = 100 ;X1
v[1] = 300 ;Y1
v[2] = 200 ;X2
v[3] = 100 ;Y2
v[4] = 300 ;X3
v[5] = 300 ;Y3
v[6] = 100 ;X4
v[7] = 300 ;Y4
While obracanie < 360
Polygon(#CENTER, #CENTER, v, 4, #BLUE, {Rotate = obracanie})
obracanie = obracanie + 5
Wend
LeftMouseQuit(True)
Repeat
WaitEvent
Forever
I rezultat działania kodu:
Powyższy przykład pochodzi z "Podręcznika do Hollywood", strona 81. Można go "kupić" za 0 zł w naszym sklepiku:
https://sklep.amiga.org.pl/wp/produkt/hollywood/
Co dalej
Zasadniczo dałem dzisiaj narzędzia i gotowy szablon. Jeśli ktoś chce, może sobie przerabiać dalej. Na przykład zmieniać czcionkę, dodać kolory do większej liczby poleceń. Jest możliwość eksportu - z poziomu edytowanego szablonu PHP jako PHP, a z poziomu listy fragmentów kodów jako JSON.
W przyszłości może któraś wtyczka dorobi się kolorowania Hollywood. Wtedy cały powyższy artykuł pozostanie jedynie jako niepotrzebny "ślad węglowy". Na razie jest potrzebny.
