Przejdź do głównej treści

Jak dodać fragment kodu za pomocą Gutenberga na WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Prawie wszyscy blogerzy, twórcy treści lub twórcy technologii czasami muszą wyświetlać wyróżnione fragmenty kodu na swoim blogu. To może być ból głowy sam w sobie. Jednak może być również wymagane wyróżnienie jednego lub więcej wierszy 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 istnieje wiele wyników. Wiemy jednak, że jest niezawodny i aktualny. Ponadto jest dostarczany ze specjalnym blokiem dla wydawcy Gutenberga. Nie wspominając o wielu parametrach, które pozwalają dostosować swoje wrażenia, dzięki czemu jest to nasz wybór do tego rodzaju zadań.

Menu taneczne Parametry na pulpicie nawigacyjnym WordPress znajdziesz nowy element o nazwie SyntaxHighlighter , Śmiało i kliknij na to. Tam możesz dostosować każdą drobiazg potrzebną do włączenia fragmentów kodu do swojej witryny WordPress.

Ustawienia składni podświetlacza

Strona ustawień wtyczki jest stosunkowo prosta. Jedną z rzeczy, które lubimy w tej wtyczce, jest to, że otrzymujesz wiele dostosowań dotyczących sposobu wyświetlania kodu w Twojej witrynie. Możesz dodawać klasy CSS do osadzania, dostosowywać dopełnianie numerów linii, wybierać motywy kolorów, używać inteligentnych zakładek i podziałów linii oraz decydować, czy załadować indywidualne podświetlanie języka kodowania na poziomie witryny.

Chcemy zdefiniować trzy szczególne parametry, które powinna znać większość osób.

Wersja wtyczki, numery linii i rozmiary tabulatorów

Pierwszą jest ładowana wersja wtyczki. Chociaż 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ć kod. Oba są bezpieczne, jednak każda z nich oferuje określone funkcje, których druga nie ma (w momencie pisania tego artykułu).

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Jeśli użytkownicy skopiują Twój kod jest najważniejszy, wersja 3.x załatwi sprawę. Jednak jeśli twoje jest bardziej przydatne do wyświetlania niż rzeczywiste narzędzie, owijanie wersji 2.x może być dla ciebie lepsze, ponieważ nie musisz używać pasków przewijania. dla dużych fragmentów kodu.

Następnie musisz wyświetlić lub nie numery linii. W przypadku dużych fragmentów kodu i samouczków numery linii są nieocenione. Jednak jeśli masz krótkie fragmenty, nie musisz trwale oznaczać ich jako linii 1 i 2. Usunięcie ich może znacznie poprawić wygląd kodu.

A potem jest rozmiar zakładki zawsze kontrowersyjne. Domyślną wartością tej opcji jest 4, ale możesz zastąpić ją wybranym numerem. W tym poprawna wartość 2. (Tak, zdajemy sobie sprawę, że nie ma prawidłowej wartości, po prostu lubimy spacje tabulatorami 2.)

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Twój kod i skróty

Jeśli przewiniesz w dół na dole strony Parametry zobaczysz podgląd dużego kodu, a także dużą liczbę parametrów krótkiego kodu. Dobrze byłoby przejrzeć je, aby zobaczyć, co wszystkie wtyczki mogą zrobić, aby podświetlić fragmenty kodu. Ponadto wszelkie zmiany dokonane powyżej w zakresie wyświetlania kodu w powyższych ustawieniach zostaną odzwierciedlone tutaj. Pamiętaj, aby nacisnąć przycisk Zapisz po zmianie dowolnej opcji.

Chociaż niektórzy ludzie nie są największymi fanami krótkich kodów, ponieważ mogą łączyć Cię z niektórymi wtyczkami, uważamy, że warto z nich korzystać, 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></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

Gdziekolwiek możesz zrobić krótki kod, możesz go użyć. W Divi lub klasycznym edytorze możesz użyć modułu Tekst lub edytora TinyMCE i po prostu wkleić kod między krótkimi kodami. Ze względu na działanie karty Visual zalecamy korzystanie z tej karty teksty aby zachować te znaki specjalne formatujące.

Jeśli jesteś użytkownikiem Gutenberg / Block Editor, wszystko jest takie proste. Możesz ponownie użyć do tego bloku tekstowego. Jeszcze łatwiej niestandardowy blok HTML. Jak wyżej, wklej kod do tagów shortcode.

Co więcej, blok SyntaxHighlighter Evolved jest sam. Instalacja wtyczki obejmuje własny blok Gutenberga; więc jeśli nie jesteś shortcode i nie chcesz grać z ustawieniami, nie musisz. Po prostu znajdź blok pod formatowanie i wstaw go do swojej wiadomości lub strony.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Bez względu na to, jak wstawisz kod, zobaczysz to samo renderowanie w przedniej części witryny WordPress.

Podsumowując

Z wielu powodów może być konieczne przedstawienie fragmentów opinii. Być może piszesz samouczki lub publikujesz rozwiązania typowych problemów, które społeczeństwo może podjąć i wykorzystać według własnego uznania? Ale czasami integracja z GitHub po prostu nie zapewnia pożądanego doświadczenia dla użytkowników. Właśnie 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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer