Jak wyświetlić wyróżnione fragmenty kodu w witrynie WordPress?

Prawie każdy bloger technologiczny, twórca treści lub programista musi czasami wyświetlać wyróżnione fragmenty kodu na swoim blogu. To może być samo w sobie bólem głowy. Jednak podświetlenie wiersza lub wierszy w tym fragmencie może być również konieczne, a ta funkcja niestety nie jest częścią większości osadzonego 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.

Subskrybuj nasz kanał YouTube

Zakreślacz składni Evolved

Instalacja i aktywacja wtyczki jest prosta. Możesz go znaleźć w repozytorium wtyczek WP.org, ale upewnij się, że zrobiłeś to Alex Mills (Viper007Bond) . Istnieje wiele wtyczek o podobnych nazwach i funkcjach, ale wiemy, że ta jest niezawodna i aktualizowana. Dodatkowo ten jest wyposażony w wyspecjalizowany blok dla edytora Gutenberga. Nie wspominając o wielu parametrach, które pozwalają dostosować wrażenia, które sprawiają, że jest to nasz wybór do tego rodzaju zadania.

W menu Ustawienia na pulpicie WordPress znajdziesz nowy element oznaczony SyntaxHighlighter . Śmiało i kliknij w to. Tam możesz dostosować wszystko, czego potrzebujesz, aby osadzić fragmenty kodu w swojej witrynie WordPress.

Ustawienia wyróżnienia składni

Strona ustawień wtyczki jest stosunkowo prosta. Jednym szczególnym elementem, który podoba nam się 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 osadzenia, dostosowywać dopełnienie numeru linii, wybierać motywy kolorystyczne, używać inteligentnych kart i zawijania słów oraz decydować, jak załadować poszczególne języki kodowania w skali całej witryny.

Chcemy przywołać trzy szczególne ustawienia, o których naszym zdaniem większość ludzi powinna być świadoma.

Wersja wtyczki, numery linii i rozmiar karty

Pierwsza to wersja wtyczki, którą ładujesz. Podczas gdy sama wtyczka jest aktualizowana w repozytorium, w zależności od tego, jak chcesz najlepiej wyświetlać swój kod, możesz wybrać wersję 2.x i 3.x wtyczki . Oba są bezpieczne, jednak każdy z nich oferuje określone funkcje, których nie ma (przynajmniej w momencie pisania tego tekstu).

Jeśli użytkownicy kopiujący Twój kod są najważniejsi, wersja 3.x będzie w porządku. Jednakże, jeśli twoja aplikacja jest bardziej do wyświetlania niż do rzeczywistego narzędzia, zawijanie słów w wersji 2.x może być dla ciebie lepsze, ponieważ pozwala uniknąć konieczności używania pasków przewijania na dużych fragmentach kodu.

Następnie masz możliwość wyświetlania numerów linii. W przypadku dużych fragmentów kodu i samouczków numery wierszy są nieocenione. Jeśli jednak masz krótkie fragmenty, nie ma potrzeby ciągłego oznaczania ich jako wierszy 1 i 2. Usunięcie ich może znacznie poprawić wygląd kodu.

Do tego dochodzi kontrowersyjny rozmiar karty . Opcja domyślnie wynosi 4, ale możesz ją zmienić na dowolną liczbę. W tym poprawna wartość 2. (Tak, zdajemy sobie sprawę, że nie ma prawidłowej wartości. Po prostu lubimy 2 spacje na tabulatory).

Twój kod i skróty

Jeśli przewiniesz na dół strony Ustawienia , zobaczysz duży podgląd kodu, a także dużą liczbę parametrów shortcode. Twój czas byłby dobrze spędzony na ich przeglądaniu, tylko po to, aby zobaczyć, co wtyczka może zrobić, aby wyróżnić twoje fragmenty kodu. Dodatkowo wszelkie zmiany wprowadzone powyżej w sposobie wyświetlania kodu w powyższych ustawieniach zostaną tutaj odzwierciedlone. Więc pamiętaj, aby nacisnąć przycisk Zapisz po zmianie dowolnej opcji.

Chociaż niektórzy ludzie nie są największymi fanami skrótów, ponieważ mogą powiązać Cię z niektórymi 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.

• lub

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  i jest sformatowany i wyróżniony.

  Korzystanie z krótkich kodów

  Wszędzie, gdzie możesz wyrenderować 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 skrótami. Sugerujemy, aby ze względu na sposób działania karty Wizualne użyć karty Tekst , aby zachować specjalne formatowanie znaków.

  

  Jeśli jesteś użytkownikiem edytora Gutenberg/Block, wszystko jest równie proste. Możesz ponownie użyć do tego bloku tekstu. Jeszcze prostszy jest blok Niestandardowy HTML. Tak jak powyżej, wklej kod w obrębie tagów shortcode.

  

  Jeszcze lepszy jest jednak sam blok SyntaxHighlighter Evolved. Do instalacji wtyczki dołączony jest własny blok Gutenberga, więc jeśli nie jesteś osobą zajmującą się skróceniem kodu i nie chcesz majstrować przy parametrach, nie musisz tego robić. Po prostu znajdź blok w sekcji Formatowanie i wstaw go do swojego posta lub strony.

  

  Niezależnie od tego, w jaki sposób wstawisz kod, zobaczysz ten sam rendering na interfejsie witryny WordPress.

  

  Kończąc

  Istnieje wiele powodów, dla których możesz potrzebować zaprezentować fragmenty kodu swoim odbiorcom. Może piszesz samouczki, a może publikujesz poprawki do typowych problemów, które publiczność może wziąć i wykorzystać w razie potrzeby. Czasami jednak osadzanie w serwisie GitHub nie zapewnia użytkownikom dokładnie takiego doświadczenia, jakiego oczekujesz. Właśnie wtedy potrzebujesz wtyczki takiej jak SyntaxHighlighter Evolved. Za pomocą kilku kliknięć, niewielkiej personalizacji i albo bloku Gutenberga, albo shortcode, Twoi odbiorcy będą bez problemu przedzierać się przez Twój kod.

  Jakie zastosowania możesz znaleźć w swojej witrynie, aby wyróżnić taki kod?

  Artykuł wyróżniony obrazem autorstwa Adila Bouyghajdena / shutterstock.com