Elenco di evidenziatori per incollare / visualizzare il codice sorgente in WordPress

2018 年 11 月 24 日

Quando si scrive un articolo di programmazione e si introduce il codice sorgente, voglio Evidenziatore, una funzione in grado di visualizzare il codice in modo di facile lettura.In effetti, è stato sviluppato così tanto che è difficile decidere quale usare.In questo articolo, introdurremo gli strumenti per evidenziare il codice sorgente in WordPress e le loro funzionalità separatamente per tipo di libreria, tipo di plug-in e servizio web.

Tipo di libreria

Evidenziatore del tipo per caricare il file di libreria acquisito nella cartella del tema figlio e utilizzarlo.È più leggero di un plug-in, ma richiede un po 'di tempo per l'installazione.

Evidenzia.js

Una libreria JavaScript chiamata Highlight.js. Supporta 189 linguaggi di programmazione e dispone di 89 stili di visualizzazione (a novembre 2018).La funzione è semplice come evidenziare il codice.Molto leggero.Popolare.

https://highlightjs.org/

Prisma.js

Questa è anche una libreria JavaScript leggera.Supporta 153 lingue e 8 stili di visualizzazione (a partire da novembre 2018).Come estensione, puoi aggiungere facilmente numeri di riga, evidenziazione di righe specificate, visualizzazione della lingua, installazione del pulsante di copia, ecc.Anche questo è popolare.

https://prismjs.com/

Abbellisci il codice di Google

Come suggerisce il nome, una libreria JavaScript sviluppata da Google. Supporta i principali linguaggi di programmazione come C, Python, HTML, CSS, JavaScript, Makefile, ma i linguaggi minori devono essere supportati dalle estensioni.Sono disponibili 5 stili di visualizzazione (a partire da novembre 2018).Oltre al metodo di caricamento in una cartella di WordPress come i due tipi precedenti e al suo utilizzo, esiste un metodo per installarlo facilmente utilizzando un caricatore automatico.Ci sono poche informazioni giapponesi perché non ci sono molti utenti.

https://github.com/google/code-prettify

Tipo di plug-in

Un tipo distribuito come plugin gratuito per WordPress.È molto facile da distribuire e gestire, ma può rendere il tuo sito un po 'più pesante di altri tipi.Nel tipo di libreria è possibile scegliere di supportare solo la lingua richiesta, ma nella versione plug-in è un'immagine con tutte le lingue e tutte le funzioni.

Codice WP Highlight.js

È una versione plug-in di Highlight.js introdotta nel tipo di libreria. Compatibile con SyntaxHighlighter, Prettify e CrayonSyntaxHighlighter, quindi puoi migrare anche da altri evidenziatori.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Evidenziatore di sintassi Prism

Una versione plugin di Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Codice Prettify

Stesso.

https://ja.wordpress.org/plugins/code-prettify/

Evidenziatore di sintassi pastello

Impressione che ci siano molti utenti e abbondanti informazioni sull'apertura in giapponese.Anche i principianti possono facilmente modificare la dimensione e il design del carattere, aggiungere numeri di riga, evidenziare, ecc., Ed è molto personalizzabile.Ci sono molte recensioni sul fatto che sia pesante ed è preoccupante che l'ultimo aggiornamento sia stato interrotto dal 2015.

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Evidenziatore di sintassi Mivhak

Supporta più di 130 linguaggi di programmazione e dispone di 36 temi.Sembra che gli script ei temi della lingua vengano caricati su richiesta dai CSS e JS leggeri, ma sembra essere pesante come Crayon Syntax Highlighter.È possibile specificare la dimensione del carattere solo per la parte di codice.

https://ja.wordpress.org/plugins/mivhak/

 

Ho confrontato gli effetti di ciascun plug-in sulla velocità di visualizzazione del sito, quindi fai riferimento anche a questo.

Confronto della velocità di visualizzazione del sito dei plug-in di Evidenziatore di sintassi

 

 

Tipo di servizio Web

È un tipo di evidenziatore che può essere evidenziato convertendo il codice sorgente in un tag di incorporamento sul Web e incollando il tag in un editor di testo Wordpress.

Gist (servizio GitHub)

Gist è un servizio di code sharing su GitHub. Quando carichi il codice su Gist, viene emesso il tag per la visualizzazione. È necessario registrarsi su GitHub, ma al contrario, il vantaggio è che puoi modificare e gestire il codice dal lato GitHub (modifica con un editor di testo,OÈ complicato fare confusione con tag come).

https://gist.github.com/discover

srctohtml

Puoi convertire facilmente il codice in tag HTML per l'incorporamento senza registrazione.I linguaggi supportati sono JavaScript, C ++, PHP e un po 'meno.

http://marginalsoft.com/tools/srctohtml/

Quale scegliere

Si dice anche che quale strumento utilizzare dipende da ciò che si vuole sottolineare.Ho riassunto brevemente gli orientamenti di ciascuno, quindi vi preghiamo di farvi riferimento.È anche importante se ti interessa il design al momento dell'evidenziazione.

Tipo di libreria L'accento è posto sulla leggerezza del funzionamento e sulla velocità di visualizzazione
Tipo di plug-in Enfasi sulla facilità di introduzione
(Alcuni plugin non diventano così pesanti)
Tipo di servizio Web GitHub registrato (Gist), che è affascinato dalla funzione di gestione del codice
Persone che hanno poche opportunità di incorporare (srctohtml)

A proposito, utilizzo il plug-in Evidenziatore di sintassi di Mivhak.È positivo che tu possa specificare la dimensione del carattere solo per la parte del codice e che tu possa operare varie impostazioni dei pulsanti su una semplice schermata di impostazione.Rallenta sui dispositivi mobili, ma la persona che fa riferimento al codice proviene probabilmente dal PC e penso che sia questo il problema.