Przestań marnować czas i pieniądze!

Z łatwością stwórz swoją witrynę lub blog WordPress już dziś.

Elementor to najłatwiejsze i co najważniejsze najszybsze narzędzie do tworzenia dowolnego typu strony internetowej lub bloga WordPress. Brak wiedzy technicznej jest wymagany i jest idealny dla początkujących lub profesjonalnych użytkowników. Możesz to zrobić sam, więc zrób to!

Prawie każdy bloger, twórca treści lub programista techniczny musi od czasu do czasu publikować wyróżnione fragmenty na swoim blogu. Samo w sobie może to być ból głowy. Jednak wyróżnienie jednego lub więcej wierszy w tym fragmencie może być również konieczne, 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ł tak czysty i czytelny, jak to tylko możliwe.

Składnia Highlighter Evolved

Podświetlanie składni

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ń.

Wtyczka podświetlacza składni wordpress

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.

Konfiguracja Syntaxhighlighter

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.

Zobacz modyfikacje divi syntaxhighliter

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.

Parametr tekstu Divi

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.

Zablokuj HTML Gutenberg divi

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.

Podświetlanie składni Gutenberg

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.

%d blogerzy lubią tę stronę: