Prawie wszyscy blogerzy, twórcy treść lub twórcy technologii czasami muszą wyświetlać wyróżnione fragmenty kodu na swoich blogach. To może być bólem głowy samo w sobie. Jednakże może być również konieczne wyróżnienie jednej lub większej liczby linii w tym fragmencie, a ta funkcja niestety nie jest częścią większości integracji kodu. Na szczęście istnieje wtyczka SyntaxHighlighter Evolved. Pokażemy Ci, jak go używać, aby kod był jak najbardziej czysty i czytelny.
Składnia Highlighter Evolved
Instalacja i aktywacja wtyczki jest prosta. Można go znaleźć w repozytorium wtyczek WP.org ale upewnij się, że dobrze to zrobisz Alex Mills (Viper007Bond)ponieważ rzeczywiście jest wiele wyników. Wiemy jednak, że ten jest niezawodny i aktualny. Co więcej, ten zawiera wyspecjalizowany blok dla edytora Gutenberg. Nie wspominając o szeregu parametrów, które pozwalają spersonalizować swoje doświadczenie, co sprawia, że jest to nasz wybór do tego typu zadań.
W menu Parametry na pulpicie nawigacyjnym WordPress znajdziesz nowy element o nazwie SyntaxHighlighter . Śmiało i kliknij na to. Tam możesz dostosować każdą małą rzecz, której będziesz potrzebować, aby osadzić fragmenty w swojej witrynie WordPress.
Ustawienia składni podświetlacza
Strona ustawień wtyczki jest stosunkowo prosta. Jednym z elementów, który lubimy w tej wtyczce, jest duża liczba dostosowań dotyczących sposobu wyświetlania kodu w Twojej witrynie. Możesz dodać klasy CSS do osadzania, dostosować dopełnienie numeru linii, wybrać motywy kolor, używaj inteligentnych kart i podziałów wierszy oraz decyduj, jak ładuje się wyróżnianie poszczególnych języków kodowania w całej witrynie.
Chcemy zdefiniować trzy szczególne parametry, które powinna znać większość osób.
Wersja wtyczki, numery linii i rozmiary tabulatorów
Pierwszym jest to, którą wersję wtyczki ładujesz. Mimo że wtyczka pozostaje aktualna w repozytorium, możesz wybierać między wersjami wtyczki 2.x i 3.x. , w zależności od tego, jak chcesz wyświetlić swój kod. Oba są bezpieczne, jednak każdy z nich oferuje określone funkcje, których nie ma w drugim (w momencie pisania).
Jeśli użytkownicy skopiują Twój kod, zrobi to wersja 3.x. Jeśli jednak twój jest bardziej przydatny do wyświetlania niż rzeczywiste narzędzie, to nowa linia w wersji 2.x może być dla ciebie lepsza, ponieważ eliminuje potrzebę używania pasków przewijania. dla dużych fragmentów kodu.
Następnie musisz pokazać lub nie numery linii. W przypadku dużych fragmentów kodu i samouczków numery wierszy są nieocenione. Jednak w przypadku krótkich fragmentów nie jest konieczne trwałe oznaczanie ich jako wiersze 1 i 2. Usunięcie ich może znacznie poprawić wygląd kodu.
A potem jest rozmiar zakładki wciąż kontrowersyjne. Domyślna opcja to 4, ale możesz ją zmienić na dowolną liczbę. W tym poprawna wartość 2. (Tak, zdajemy sobie sprawę, że nie ma poprawnej wartości. Po prostu lubimy 2 spacje dla tabulatorów).
Twój kod i skróty
Jeśli przewiniesz na dół strony Parametry , zobaczysz podgląd dużego kodu, a także dużą liczbę parametrów shortcode. Twój czas byłby dobrze spędzony na ich przeglądaniu, aby zobaczyć, co cała wtyczka może zrobić, aby zaprezentować twoje fragmenty. Ponadto wszelkie zmiany wprowadzone powyżej w wyświetlaniu kodu w powyższych ustawieniach zostaną odzwierciedlone w tym miejscu. Dlatego po zmianie którejkolwiek z opcji nie zapomnij kliknąć Zapisz.
Chociaż niektórzy ludzie nie są największymi fanami skrótów, ponieważ mogą łączyć Cię z określonymi wtyczkami, uważamy, że warto ich używać, ponieważ są inteligentne i łatwe do zapamiętania. Jeśli nic więcej, musisz pamiętać o dwóch rzeczach, a wtedy wtyczka będzie działać najlepiej dla Ciebie.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Lub niektóre odmiany. Jeśli pamiętasz, jesteś pewien różnych rzeczy, które możesz zrobić dzięki tej wtyczce. Chociaż możesz użyć długiego identyfikatora, wtyczka SyntaxHighlighter została zbudowana wystarczająco dobrze, aby uprościć pracę.
Użyj krótkich kodów
Wszędzie, gdzie możesz wyrenderować krótki kod, możesz z nich korzystać. W Divi lub klasyczny edytor, możesz użyć modułu Text lub edytora TinyMCE i po prostu wkleić kod między shortcodes. Ze względu na sposób działania zakładki Wizualne sugerujemy korzystanie z zakładki teksty aby zachować te znaki specjalne formatujące.
Jeśli jesteś użytkownikiem Gutenberg / Block Editor, sprawy są takie proste. Możesz ponownie użyć do tego bloku tekstu. Jeszcze łatwiej, niestandardowy blok HTML. Jak wyżej, wklej kod do znaczników shortcode.
Jeszcze lepiej, blok SyntaxHighlighter Evolved jest sobą. Instalacja wtyczki zawiera własny blok Gutenberga; więc jeśli nie jesteś shortcode i nie chcesz bawić się ustawieniami, nie musisz. Po prostu znajdź blok pod formatowanie i wstaw go do swojej wiadomości lub strony.
Bez względu na to, jak wstawisz kod, zobaczysz to samo renderowanie w przedniej części witryny WordPress.
Podsumowując
Może być konieczne przedstawienie odbiorcom fragmentów z wielu powodów. Może piszesz samouczki lub publikujesz rozwiązania typowych problemów, z których publiczność może korzystać i wykorzystywać, jak im się podoba? Ale czasami integracja z GitHub po prostu nie zapewnia takiego doświadczenia, jakiego oczekujesz od swoich użytkowników. To wtedy potrzebujesz wtyczki takiej jak SyntaxHighlighter Evolved.
Za pomocą zaledwie kilku kliknięć, z niewielkimi dostosowaniami i blokiem lub krótkim kodem Gutenberga, Twoi odbiorcy bez problemu poznają Twój kod.
