Se offri software o suggerimenti per la programmazione, ti consigliamo di condividere snippet di codice. Questo modo di condividere frammenti di codice puĂ² aiutarli a impostare rapidamente una pratica. Tuttavia, la condivisione del codice con tutta la formattazione necessaria non è possibile per impostazione predefinita. Quello che intendo per formattazione è l'evidenziazione della sintassi. Tuttavia, è qualcosa di abbastanza facile da fare.
Fortunatamente, se usi divi, dovresti sapere che esiste un modo integrato per farlo manualmente, per aggiungere stili personalizzati a questi frammenti di codice. Inoltre, ci sono plugin e risorse app di terze parti che possono davvero semplificare il processo di creazione di snippet esteticamente gradevoli e funzionali in Divi.
In questo tutorial, ti mostrerĂ² come condividere frammenti di codice in Divi (manualmente). E ti mostrerĂ² anche come progettare blocchi di snippet con Divi Builder, che ti porterĂ al livello successivo.
Panoramica
Ecco una panoramica dei progetti di snippet possibili in questo tutorial.
Le caselle di frammenti di codice con frammenti di codice hanno aggiunto la modalitĂ manuale.
Prerequisiti per il tutorial
Per questo tutorial, tutto ciĂ² di cui hai bisogno è il Tema Divi, installato e attivo. Costruiremo i frammenti di codice di esempio da zero utilizzando Divi Builder su una nuova pagina.
Per iniziare, crea una nuova pagina e distribuisci Divi Builder sull'interfaccia pubblica. Quindi scegli l'opzione "Crea da zero".
Ora sei pronto per partire!
Progettazione di una scatola personalizzata per frammenti di codice su Divi
Poiché il nostro frammento di codice risiede in un modulo di testo, possiamo utilizzare il generatore di divi per aggiungere elementi di design nel modulo di testo (e attorno ad esso). Per questo progetto, utilizzeremo un modulo di riepilogo per fungere da etichetta per lo snippet. Successivamente, modificheremo e posizioneremo il cursore a sinistra del modulo di testo. Successivamente, modificheremo il modulo di testo del nostro snippet.
Creazione della sezione, riga e colonna
Dobbiamo prima creare una nuova sezione con una riga di una colonna.
Quindi aggiornare i parametri di linea come segue:
Larghezza della grondaia: 1
Padding personalizzato: 0px nella parte superiore, 0px nella parte inferiore
Aggiungi il modulo di testo
Quindi aggiungere un modulo di testo alla riga.
Puoi lasciare il contenuto per impostazione predefinita. Aggiungeremo i nostri snippet di codice WordPress in seguito. Per ora, modelliamo il modulo di testo aggiornando i seguenti parametri di testo:
Colore di sfondo: # eff0f1 Colore del testo: # 000000 Margine personalizzato: 60px a sinistra Padding personalizzato: 3% in alto, 3% in basso, 3% a sinistra, 3% a destra
Larghezza bordo superiore: 10px Colore bordo superiore: # 7cda24
Creazione dell'etichetta dello snippet
Per creare l'etichetta dello snippet, utilizzeremo un modulo blurb. CiĂ² ti consentirĂ di aggiungere un'icona di testo blurb (o un'icona di immagine personalizzata) accanto alla lingua del codice visualizzata.
Crea un modulo di presentazione e trascinalo sopra il modulo di testo. Quindi aggiorna le seguenti impostazioni di presentazione:
Titolo: css Contenuto: [rimuovi contenuto fittizio] Usa icona: SI Icona: vedi screenshot
Quindi aggiornare i parametri di progettazione come segue:
Colore sfondo: # 1b2426 Colore icona: # 7cda24 Posizione immagine / icona: sinistra Dimensione carattere: 20px Colore titolo testo: #ffffff Dimensione testo Titolo: 16px
Altezza riga del titolo: 1.3em Larghezza: 100 px Margine personalizzato: -44 px in basso, -50 px Imbottitura personalizzata a sinistra: 10 px in alto, 2 px in basso, 15 px a sinistra, 15 a destra
Duplica la sezione per creare piĂ¹ progetti di riquadri di snippet
Questo supporta il nostro primo design della scatola del codice. Ora non ci resta che duplicare la sezione contenente il design del blocco di codice e aggiornare l'etichetta ei colori per creare un nuovo blocco di codice per un diverso linguaggio di codifica. Questo è ovviamente facoltativo, ma se prevedi di aggiungere frammenti diversi a una pagina, è utile avere uno schema di colori diverso per ciascuno.
Ad esempio, duplica la sezione e apri le impostazioni del modulo Blurb.
Aggiorna il titolo in "js" per Javascript.
Quindi fare clic con il pulsante destro del mouse su Colore immagine / icona e selezionare Trova e sostituisci.
Opzioni di ricerca e sostituzione aggiornate:
In: questa sezione Sostituisci con: [nuovo colore] Sostituisci tutto: seleziona Sostituisci tutti i valori trovati
Ora hai un nuovo blocco di snippet per i frammenti JS.
Ecco un esempio di caselle di snippet per tipi di codice popolari per WordPress.
Utilizzo del plug-in Prettify Code per aggiungere l'evidenziazione della sintassi agli snippet di codice manuale
Bene, è vero che con il metodo manuale, puoi immediatamente incollare il testo e passare. il Prettifica il plug-in di codice aggiungerà immediatamente il codice evidenziato a tutti i tag "pre". La bellezza di questo plugin è che non è richiesta alcuna personalizzazione. Tutto quello che devi fare è scaricare e attivare il plugin.
Ecco un esempio di come apparirĂ il codice con Active Prettify Code.
Codice Prettifica arriva de Google ed è anche usato per stilizzare tutti quei meravigliosi frammenti stackoverflow.com.
Per finire
La visualizzazione degli snippet di codice su Divi non deve essere difficile. L'aggiunta manuale degli snippet utilizzando i tag pre e Word forniti da WordPress farà il lavoro per la maggior parte degli snippet non html, ma è necessario prima eseguire lo snippet tramite un codificatore. html per essere sicuri. Inoltre, puoi personalizzare ulteriormente lo stile del testo del frammento utilizzando le impostazioni del modulo di testo. E non dimenticare Code Prettify per aggiungere l'evidenziazione ai tuoi frammenti manuali.
Per quelli di voi che condividono regolarmente frammenti, l'uso del plug-in SyntaxHighlighter è probabilmente la soluzione migliore. In ogni caso, avrai sempre la possibilitĂ di aggiungere progetti piĂ¹ creativi ai tuoi snippet utilizzando Divi Builder.
Bonne chance.
