Jeśli oferujesz jakąkolwiek wskazówkę dotyczącą oprogramowania lub programowania, na pewno zechcesz udostępnić kilka fragmentów kodu. Ten sposób udostępniania fragmentów kodu może pomóc im szybko skonfigurować praktykę. Jednak udostępnianie kodu z całym niezbędnym formatowaniem nie jest domyślnie możliwe. Przez formatowanie mam na myśli wyróżnianie składni. Mimo wszystko jest to dość łatwe do zrobienia.

Na szczęście, jeśli używasz divi, powinieneś wiedzieć, że istnieje wbudowany sposób, aby zrobić to ręcznie, aby dodać niestandardowe style do tych fragmentów kodu. Dodatkowo istnieją wtyczki i Zasoby aplikacje innych firm, które naprawdę mogą uprościć proces tworzenia estetycznych i funkcjonalnych fragmentów w Divi.

W tym samouczku pokażę, jak udostępniać fragmenty kodu w Divi (ręcznie). Pokażę ci również, jak projektować bloki fragmentów za pomocą Divi Builder, co przeniesie Cię na wyższy poziom.

badanie

Oto przegląd projektów skrawków możliwych w tym samouczku.

Pola fragmentów kodu z dodanymi fragmentami kodu w trybie ręcznym.

Podgląd kodu możliwy z diviWymagania wstępne dotyczące samouczka

W tym samouczku wszystko, czego potrzebujesz, to Motyw Divi, zainstalowany i aktywny. Przykładowe fragmenty kodu zbudujemy od podstaw za pomocą Divi Builder na nowej stronie.

Aby rozpocząć, utwórz nową stronę i wdróż Divi Builder w interfejsie publicznym. Następnie wybierz opcję „Buduj od podstaw”.

Teraz jesteś gotowy do pracy!

Projekt spersonalizowanego pudełka na fragmenty kodu w Divi

Ponieważ nasz fragment kodu znajduje się w module tekstowym, możemy użyć kreatora divi, aby dodać elementy projektu do modułu tekstowego (i wokół niego). W tym projekcie użyjemy modułu podsumowania, który posłuży jako etykieta dla fragmentu. Następnie nadamy styl i umieścimy kursor po lewej stronie modułu tekstowego. Następnie nadamy styl modułowi tekstowemu naszego fragmentu.

Tworzenie sekcji, wiersza i kolumny

Najpierw musimy utworzyć nową sekcję z rzędem kolumny.

Kolumna ma wiersz divi

Następnie zaktualizuj parametry linii w następujący sposób:

Szerokość rynny: 1
Niestandardowe dopełnienie: 0px na górze, 0px na dole

Zmodyfikuj parametr linii diviDodaj moduł tekstowy

Następnie dodaj moduł tekstowy do linii.

Moduł tekstowy Divi 1Możesz zostawić treść domyślnie. Później dodamy do niego fragmenty kodu WordPress. Na razie zamodelujmy moduł tekstowy, aktualizując następujące parametry tekstowe:

Kolor tła: # eff0f1 Kolor tekstu: # 000000 Niestandardowy margines: 60 pikseli po lewej Wypełnienie niestandardowe: 3% na górze, 3% na dole, 3% po lewej, 3% po prawej

Ustawienia parametrów modułu tekstowego Divi

Szerokość górnego obramowania: 10px Kolor górnego obramowania: # 7cda24

Ustawienia tekstu obramowaniaTworzenie etykiety fragmentu

Aby utworzyć etykietę fragmentu, użyjemy modułu blurb. Umożliwi to dodanie ikony tekstu (lub niestandardowej ikony obrazu) obok wyświetlanego języka kodu.

Utwórz moduł prezentacji i przeciągnij go nad moduł tekstowy. Następnie zaktualizuj następujące ustawienia prezentacji:

Tytuł: css Treść: [usuń fikcyjne treści] Użyj ikony: TAK Ikona: zobacz zrzut ekranu

Zmodyfikowany moduł divi textNastępnie zaktualizuj parametry projektu w następujący sposób:

Kolor tła: # 1b2426 Kolor ikony: # 7cda24 Lokalizacja obrazu / ikony: po lewej Rozmiar czcionki: 20 pikseli Kolor tytułu tekstu: #ffffff Rozmiar tekstu Tytuł: 16 pikseli

Ustawienia modułu Divi Blurb

Wysokość linii tytułu: 1.3em Szerokość: 100px Margines niestandardowy: -44px Dolny, -50px Lewy Wypełnienie niestandardowe: 10px Góra, 2px Dolny, 15px Lewy, 15px Prawy

Ustawienie modułu blurb CSS

Powiel sekcję, aby utworzyć więcej projektów pól z fragmentami

Obsługuje to nasz pierwszy projekt skrzynki kodowej. Teraz musimy tylko zduplikować sekcję zawierającą projekt bloku kodu i zaktualizować etykietę i kolory, aby utworzyć nowy blok kodu dla innego języka kodowania. Jest to oczywiście opcjonalne, ale jeśli planujesz dodać różne fragmenty do strony, warto mieć dla każdego inny schemat kolorów.

Na przykład zduplikuj sekcję i otwórz ustawienia modułu Blurb.

Zaktualizuj tytuł do „js” dla Javascript.

Następnie kliknij prawym przyciskiem myszy Kolor obrazu / ikony i wybierz Znajdź i zamień.

Powiel sekcję diviZaktualizowane opcje wyszukiwania i wymiany:

W: ta sekcja Zamień na: [nowy kolor] Zamień wszystko: zaznacz zamień wszystkie znalezione wartości

Masz teraz nowy blok fragmentów dla fragmentów JS.

Oto przykład pól fragmentów dla popularnych typów kodu dla WordPress.

Dodaj fragmenty kodu DiviUżywanie wtyczki Kod wstępny do dodawania podświetlania składni do fragmentów kodu ręcznego

Cóż, to prawda, że ​​metodą ręczną możesz natychmiast wkleić tekst i przekazać. Wtyczka kodu wstępnego natychmiast doda podświetlony kod do wszystkich znaczników „przed”. Piękno tej wtyczki polega na tym, że absolutnie nie jest wymagana żadna personalizacja. Wszystko, co musisz zrobić, to pobrać i aktywować wtyczkę.

Oto przykład, jak będzie wyglądał kod z aktywnym kodem prettify.

Prettfy kod w akcjiKod wstępny przychodzi od Google i jest również używany do stylizacji wszystkich tych wspaniałych fragmentów stackoverflow.com.

Na koniec

Przeglądanie fragmentów kodu w Divi nie musi być trudne. Ręczne dodanie fragmentów za pomocą tagów kodu pre i Word dostarczonych przez WordPress wykona zadanie dla większości fragmentów innych niż HTML, ale najpierw musisz uruchomić fragment za pomocą kodera. html dla pewności. Ponadto możesz dodatkowo dostosować styl tekstu fragmentu, korzystając z ustawień modułu tekstowego. I nie zapomnij o Code Prettify, aby dodać podświetlenie do ręcznych fragmentów.

Dla tych z Was, którzy regularnie udostępniają fragmenty, prawdopodobnie najlepszym rozwiązaniem jest użycie wtyczki SyntaxHighlighter. Tak czy inaczej, zawsze będziesz mieć możliwość dodania bardziej kreatywnych projektów do swoich fragmentów za pomocą Divi Builder.

Bonne szansa.