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 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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 nam się podoba w tej wtyczce jest to, że otrzymujesz dużą liczbę dostosowań dotyczących sposobu wyświetlania kodu w Twojej witrynie. Możesz dodawać klasy CSS do osadzania, dostosowywać dopełnienie numerów wierszy, wybierać motywy kolorów, używać inteligentnych zakładek i podziałów wierszy oraz decydować, czy załadować indywidualne podświetlanie języka 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).

Ł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, 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.

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]

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></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 ich użyć. W Divi lub klasycznym edytorze możesz użyć modułu Text lub edytora TinyMCE i po prostu wkleić kod między krótkimi kodami. Ze względu na sposób działania karty Wizualne sugerujemy użycie rozszerzenia 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.

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]

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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie 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