Liste de surligneurs pour coller / afficher le code source dans WordPress

2018 FÉVRIER, 11

Lors de l'écriture d'un article de programmation et de l'introduction du code source, je veux Highlighter, une fonction qui peut afficher le code de manière facile à lire.En fait, il a été tellement développé qu'il est difficile de décider lequel utiliser.Dans cet article, nous présenterons les outils pour mettre en évidence le code source dans WordPress et leurs fonctionnalités séparément pour le type de bibliothèque, le type de plugin et le service Web.

Type de bibliothèque

Surligneur du type pour télécharger le fichier de bibliothèque acquis dans le dossier du thème enfant et l'utiliser.C'est plus léger qu'un plugin, mais l'installation prend un peu de temps.

Highlight.js

Une bibliothèque JavaScript appelée Highlight.js. Il prend en charge 189 langages de programmation et dispose de 89 styles d'affichage (à partir de novembre 2018).La fonction est aussi simple que de mettre en évidence le code.Très léger.Populaire.

https://highlightjs.org/

Prism.js

Il s'agit également d'une bibliothèque JavaScript légère.Il prend en charge 153 langues et 8 styles d'affichage (à partir de novembre 2018).En tant qu'extension, vous pouvez facilement ajouter des numéros de ligne, mettre en évidence des lignes spécifiées, afficher la langue, installer le bouton de copie, etc.Ceci est également populaire.

https://prismjs.com/

Google code-joliment

Comme son nom l'indique, une bibliothèque JavaScript développée par google. Il prend en charge les principaux langages de programmation tels que C, Python, HTML, CSS, JavaScript, Makefile, mais les langages mineurs doivent être pris en charge par des extensions.Il existe 5 styles d'affichage (à compter de novembre 2018).En plus de la méthode de téléchargement dans un dossier WordPress comme les deux types ci-dessus et de son utilisation, il existe une méthode pour l'installer facilement à l'aide d'un chargeur automatique.Il y a peu d'informations japonaises car il n'y a pas beaucoup d'utilisateurs.

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

Type de plug-in

Un type distribué sous forme de plugin WordPress gratuit.C'est très facile à déployer et à gérer, mais cela peut rendre votre site un peu plus lourd que les autres types.Dans le type de bibliothèque, vous pouvez choisir de ne prendre en charge que la langue requise, mais dans la version du plug-in, il s'agit d'une image avec toutes les langues et toutes les fonctions.

WP Code Highlight.js

Il s'agit d'une version plug-in de Highlight.js introduite dans le type de bibliothèque. Compatible avec SyntaxHighlighter, Prettify et CrayonSyntaxHighlighter, vous pouvez donc également migrer à partir d'autres surligneurs.

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

Surligneur Prism Syntax

Une version plugin de Prism.js.

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

Code Prettify

Même.

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

Crayon Syntax Highlighter

Impression qu'il existe de nombreux utilisateurs et de nombreuses informations sur l'ouverture en japonais.Même les débutants peuvent facilement modifier la taille et la conception de la police, ajouter des numéros de ligne, surligner, etc., et c'est très personnalisable.Il existe de nombreuses critiques selon lesquelles il est lourd, et il est préoccupant que la dernière mise à jour soit arrêtée depuis 2015.

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

Surligneur de syntaxe Mivhak

Il prend en charge plus de 130 langages de programmation et dispose de 36 thèmes.Il semble que les scripts et les thèmes de langage soient chargés à la demande à partir du CSS et du JS légers, mais cela semble être aussi lourd que Crayon Syntax Highlighter.Vous ne pouvez spécifier la taille de police que pour la partie de code.

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

 

J'ai comparé les effets de chaque plugin sur la vitesse d'affichage du site, veuillez donc vous y référer également.

Comparaison de la vitesse d'affichage du site des plugins Syntax Highlighter

 

 

Type de service Web

C'est un type de surligneur qui peut être mis en évidence en convertissant le code source en une balise d'intégration sur le Web et en collant la balise dans un éditeur de texte Wordpress.

Gist (service GitHub)

Gist est un service de partage de code sur GitHub. Lorsque vous téléchargez le code sur Gist, la balise à afficher est sortie. Il est nécessaire de s'inscrire sur GitHub, mais au contraire, l'avantage est que vous pouvez éditer et gérer le code côté GitHub (édition avec un éditeur de texte,Ou alorsIl est compliqué de jouer avec des balises telles que).

https://gist.github.com/discover

srctohtml

Vous pouvez facilement convertir le code en balises HTML pour l'incorporation sans enregistrement.Les langages pris en charge sont JavaScript, C ++, PHP et un peu moins.

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

Lequel choisir

On dit également que l'outil à utiliser dépend de ce que vous voulez mettre en valeur.J'ai brièvement résumé les orientations de chacun, veuillez donc vous y référer.Il est également important que vous vous souciez du design au moment de la mise en évidence.

Type de bibliothèque L'accent est mis sur la légèreté de fonctionnement et la vitesse d'affichage
Type de plug-in Accent sur la facilité d'introduction
(Certains plugins ne sont pas aussi lourds)
Type de service Web Enregistré sur GitHub (Gist), fasciné par la fonction de gestion de code
Les personnes qui ont peu d'occasions d'intégrer (srctohtml)

Au fait, j'utilise le plugin Mivhak Syntax Highlighter.Il est bon que vous puissiez spécifier la taille de la police uniquement pour la partie de code et vous pouvez utiliser divers réglages de bouton sur un écran de réglage simple.Cela ralentit sur mobile, mais la personne qui fait référence au code vient probablement du PC, et je pense que c'est le problème.