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.
Wymagania 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.
Następnie zaktualizuj parametry linii w następujący sposób:
Szerokość rynny: 1
Niestandardowe dopełnienie: 0px na górze, 0px na dole
Dodaj moduł tekstowy
Następnie dodaj moduł tekstowy do linii.
Moż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
Szerokość górnego obramowania: 10px Kolor górnego obramowania: # 7cda24
Tworzenie 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
Nastę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
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
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ń.
Zaktualizowane 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.
Uż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.
Kod 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.