Come WordPress permette Frammenti di codice da inserire

January 7

Come WordPress permette Frammenti di codice da inserire


Se si esegue qualsiasi tipo di blog lo sviluppo Web, sia che si tratti di HTML, JavaScript o CSS - Cascading Style Sheet -, si sta andando ad avere bisogno di visualizzare un esempio del codice. WordPress non dispone di un elemento naturale per l'incorporamento di codice; invece è possibile utilizzare il codice HTML <code> o una più avanzata plug-in. Il <code> non funziona sempre con il codice basato sul Web, mentre un plug-in WordPress è progettato per aiutare a visualizzare il codice in un formato facile da leggere.

Il Tag Codice

Il <code> in HTML è stato progettato per rendere bit di codice spiccano sulla tua pagina. Tutta la formattazione viene rimosso dal testo, invece rendendolo in un font Courier non formattato. Quello che manca in atmosfera, non fa per semplicità: Hai messo il codice tra l'apertura e la chiusura <code>. Purtroppo, questo non funziona sul codice che altrimenti visualizzare correttamente sulla pagina. Per esempio, usando <code> per mostrare un esempio di un elemento CSS funziona perché CSS è utilizzato all'interno di un foglio di stile, non nel corpo di una pagina come HTML; il codice non significa nulla da solo sulla pagina. Se si tenta di utilizzare <code> per mostrare il codice HTML per una immagine, non funziona perché il codice immagine è valido HTML; invece si ottiene un'immagine in cui si voleva codice. Come tale, <code> è davvero meglio per il codice non-Web, come ad esempio i comandi Unix e simili.

Google Syntax Highlighter per WordPress

Google Syntax Highlighter è un modo ben stile a incorporare il codice nella tua pagina: non solo si colora tutta la sintassi in modo diverso, si alterna il colore di ogni linea di fondo e fornisce ogni linea un certo numero, rendendo il codice facile da leggere e capire. Per visualizzare il codice evidenziatore sulla tua pagina, fare clic sulla scheda HTML nell'angolo in alto a destra del post editor. Una volta che si entra in modalità HTML, non si può lasciare; tornare a "comporre" metterà a nudo la textarea. Mettere lo snippet di codice all'interno di un <textarea> in questo modo:

<Textarea nome = "code" class = "html">
<Img src = "image.jpg" width = "150" height = "150" alt = "Sample Image" />
</ Textarea>

L'attributo nome dice WordPress che questo è il codice di esempio. La classe specifica il tipo di codice è, in modo che la casella utilizza la sintassi di destra. Per esempio, se state visualizzando il codice JavaScript da parte di alcuni, si potrebbe usare class = "js" o class = "JavaScript".

Plum codice di sicurezza

Il Plum codice di sicurezza plug-in per WordPress è un po 'più novizio amichevole. Una volta installato, Plum Box aggiunge un modulo alla pagina di post, direttamente sotto l'editor di entrata. Dal menu a discesa, selezionare il tipo di codice che si sta utilizzando, quindi inserire il codice nell'apposita casella. Nell'angolo a destra della casella, si vedrà "Shortcode: [codebox 1]". Questo significa che si inserisce "[codebox 1]" dove vuoi alla casella di apparire sulla tua pagina. Se avete bisogno di più caselle, selezionare il numero corrispondente da "Numero di caselle". Come con Google Syntax Highlighter, diversi attributi e valore dopo l'altro sono di colori diversi.

Codice WP Evidenziare

Forse il più semplice dei plug-in basati su codice, codice WP Highlight richiede solo che si entra nella modalità di editing HTML sul tuo post sul blog e sul fianco snippet di codice con il "<pre>" tag. Non richiede alcuna formattazione in più e distinzioni; appena rileva il codice e colori che di conseguenza.


Articoli Correlati