Share
La mise en évidence de la syntaxe est devenue assez standard sur la plupart des sites de didacticiels (comme vous pouvez le voir ci-dessous) et de nombreuses options sont disponibles, toutes dépendantes des langues que vous utilisez et de la manière dont vous souhaitez que vos extraits de code soient affichés..
J'utilise depuis longtemps Prettify de Google, car il était facile à configurer. Le seul problème réel que j’ai eu, c’est que cela n’a pas capturé tous les éléments appropriés de mon code et ne les a pas mis en évidence en conséquence. J'ai essayé de le retravailler, mais ce n'était pas le code le plus facile à naviguer.
Heureusement, je suis récemment tombé sur un nouveau surligneur de syntaxe légère de Lea Verou, appelé Prism.js, qui offre la possibilité de développer la mise en surbrillance du balisage HTML et CSS de base à l'aide de simples crochets de plug-in..
J'ai pris son code JavaScript principal et ajouté l'option d'inclure la numérotation des lignes et la surbrillance PHP. J'ai également modifié quelques-uns de ses modèles de regex de base pour que son code de surbrillance original capture quelques éléments supplémentaires pour chaque langue..
Tout ce que nous avons à faire est d’ajouter une fonction de shortcode dans WordPress afin que nous puissions facilement inclure la coloration syntaxique dans nos extraits de code à l’aide de mon script Prism.js modifié. Le moyen le plus simple de tout incorporer est de transformer le tout en un plugin. Notre dossier de plugins terminé ressemblera à ceci:
Commençons donc notre plugin avec les champs obligatoires:
/ * Nom du plug-in: Syntax Highlighter Plug-in URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js Description: Mettez en surbrillance vos extraits de code avec une facilité d'utilisation shortcode basé sur Prism.js de Lea Verou. Version: 1.0.0 Auteur: c.bavota URI de l'auteur: http://bavotasan.com * /
La prochaine chose que nous voulons ajouter est notre hook shortcode actuel et un correctif de pré-processus pour s’assurer qu’il se déclenche au bon moment:
Accentsconagua
add_filter ('the_content', 'sh_pre_process_shortcode', 7); / ** * Fonctionnalité pour configurer correctement le shortcode surligneur. * * Cette fonction est attachée au hook de filtre 'the_content'. * * @since 1.0.0 * / function sh_pre_process_shortcode ($ content) global $ shortcode_tags; $ orig_shortcode_tags = $ shortcode_tags; $ shortcode_tags = array (); // Nouveaux codes abrégés add_shortcode ('code', 'sh_syntax_highlighter'); $ content = do_shortcode ($ content); $ shortcode_tags = $ orig_shortcode_tags; retourne $ contenu; / ** * Fonction de code abrégé * * Cette fonction est associée au hook code 'code'. * * @since 1.0.0 * / function sh_syntax_Highlighter ($ atts, $ content = null) extract (shortcode_atts (array ('type' => 'balise', 'title' => ", 'linums' =>", ), $ atts)); $ title = ($ title)? 'rel = "'. $ title. '"': "; $ linums = ($ linums)? 'data-linums ="'. $ linums. '"':"; $ find_array = array ('[', ']'); $ replace_array = array ('[', ']'); revenir ' '. preg_replace_callback ('| (. *) | isU', 'sh_pre_entities', trim (str_replace ($ find_array, $ replace_array, $ content))). ''; / ** * Fonction d'assistance pour 'sh_syntax_highlighter' * * @since 1.0.0 * / function sh_pre_entities ($ matches) return str_replace ($ matches [1], htmlentities ($ matches [1]), $ matches [0] )
le sh_pre_process_shortcode () function est nécessaire pour que notre syntaxe de shortcode soit traitée avant que tous les filtres de contenu ne commencent à nettoyer le texte par défaut dans WordPress. La fonction d'assistance va filtrer notre code et remplacer les entités HTML par leur valeur d'entité appropriée.
Pour que notre plugin fonctionne correctement, nous devons également ajouter quelques fonctions supplémentaires afin de charger les fichiers CSS et JS..
add_action ('wp_enqueue_scripts', 'sh_add_js'); / ** * Charge tout le JavaScript dans l'en-tête * * Cette fonction est attachée au hook d'action 'wp_enqueue_scripts'. * * @us is_admin () * @ @ isssing1 () * @us wp_enqueue_script () * @us plugins_url () * * @since 1.0.0 * / function sh_add_js () if (sh_has_shortcode ('code')) wp_enqueue_script ('sh_js', plugins_url ('js / sh.js', __FILE__), ",", true); wp_enqueue_style ('sh_css', plugins_url ('css / sh.css', __FILE__)); / ** * Vérifier les publications pour voir si le shortcode a été utilisé * * @since 1.0.0 * / / fonction sh_has_shortcode ($ shortcode = ") global $ wp_query; foreach ($ wp_query-> posts en tant que $ post) if (! empty ($ shortcode) && stripos ($ post-> post_content, '['. $ shortcode)!! == false) return true; return false; Nous devons mettre en file d'attente notre script et nos styles, mais uniquement si le shortcode a été utilisé dans notre contenu de publication. C’est pourquoi nous avons besoin de cette petite fonction conditionnelle pour vérifier si le shortcode est présent.
Ajouter une quicktag pour notre shortcode n'est pas très difficile, alors autant faire:
add_action ('admin_enqueue_scripts', 'sh_add_quicktags'); / ** * Ajoute une balise rapide surligneur de syntaxe à l'éditeur de publication * * Cette fonction est associée au crochet d'action 'admin_print_footer_scripts'. * * @since 1.0.0 * / function sh_add_quicktags ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('sh_quicktag_js', plugins_url (' js / quicktag.js ', __FILE__), array (' quicktags '), ", true); C’est tout ce dont nous avons besoin dans notre quicktag.js fichier:
QTags.SyntaxButton = function () QTags.TagButton.call (this, 'syntax_highlighter', 'surligneur de syntaxe', ", '[/ code]');; QTags.SyntaxButton.prototype = new QTags.TagButton (); QTags.SyntaxButton.prototype.callback = fonction (e, c, ed) type var, linums, titre, t = ceci; if (t.isOpen (ed) === faux) type = invite ('Type (balise , php, css, javascript) ',' markup '), title = prompt (' Title (facultatif) '), linums = prompt (' numéro de ligne (optionnel) '); type = (type)?' type = "' + type + '"':"; titre = (titre)? 'title = "' + title + '' ':"; Linums = (Linums)?' Linums = "'+ Linums +" ":"; "; if (type) t.tagStart = '[code' + type + titre + linums + ']'; QTags.TagButton.prototype.callback.call (t, e, c, ed); else QTags.TagButton.prototype.callback.call (t, e, c, ed); ; boutons edb [150] = new QTags.SyntaxButton (); Pour ma coloration syntaxique, je préfère un thème sombre, j'ai donc créé mes surligneurs en utilisant le CSS suivant:
code [class * = "language-"], pre [class * = "language-"] color: #fff; ombre du texte: 0 1px 1px # 000; font-family: Menlo, Monaco, "Courier New", monospace; direction: ltr; text-align: left; espacement des mots: normal; espace blanc: pré; habillage des mots: normal; hauteur de ligne: 1,4; fond: aucun; bordure: 0; -moz-tab-size: 4; -o-tab-size: 4; taille de la languette: 4; -webkit-traits d'union: aucun; -moz-traits d'union: aucun; -ms-traits d'union: aucun; traits d'union: aucun; pre [class * = "language-"] code float: left; remplissage: 0 15px 0 0; pre [class * = "language-"],: not (pre)> code [class * = "language-"] background: # 222; .syntax-highlighter [rel] position: relative; .syntax-highlighter [rel] pre [class * = "language-"] padding-top: 44px; .syntax-highlighter [rel]: before content: attr (rel); text-align: center; ombre du texte: 1px 1px 2px rgba (0,0,0,0,6); position: absolue; en haut: -1px; arrière-plan: # 3A87AD; rembourrage: 5px 10px; gauche: 0; à droite: 0; police de caractère: gras 16px / 20px "myriad-pro-1", "myriad-pro-2", "Lucida Grande", sans-serif; couleur: #fff; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0; / * Blocs de code * / pre [class * = "language-"] padding: 15px; marge: 1em 0; débordement: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; / * Code en ligne * /: not (pre)> code [class * = "language-"] padding: 5px 10px; hauteur de ligne: 1; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; .token.comment, .token.line-comment, .token.prolog, .token.doctype, .token.cdata color: # 797979; .token.selector, .token.operator, .token.punctuation color: #fff; .namespace opacity: .7; .token.tag, .token.boolean color: # ffd893; .token.atrule, .token.attr, valeur, .token.hex, .token.string color: # B0C975; .token.property, .token.entity, .token.url, .token.attr-name, .token.keyword color: # c27628; .token.regex color: # 9B71C6; .token.entity curseur: aide; .token.function, .token.constant color: # e5a638; .token.variable color: # fdfba8; .token.number color: # 8799B0; .token.important, .token.déliminateur color: # E45734; pre [ligne de données] position: relative; rembourrage: 1em 0 1em 3em; .line-highlight position: absolute; gauche: 0; à droite: 0; Rembourrage: hériter de 0; marge supérieure: 1em; / * Identique au padding-top * de .prism * / background: rgba (255,255,255, .2); événements de pointeur: aucun; line-height: hériter; espace blanc: pré; .line-highlight: avant, .line-highlight [data-end]: après content: attr (data-start); position: absolue; en haut: .3em; à gauche: .6em; largeur min: 1em; rembourrage: 0.5em; couleur de fond: rgba (255,255,255, 0,3); couleur: #fff; police de caractères: bold 65% / 1.5 sans-serif; text-align: center; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; texte-ombre: aucun; .line-highlight [data-end]: après content: attr (data-end); en haut: auto; en bas: .4em; / * pour les numéros de ligne * / ol.linenums margin: 0; remplissage: 0 0 0 35px; .linenums li padding-left: 10px; bordure gauche: 3px # d9d336 solide;
Le code de shortcode pour notre surligneur de syntaxe a trois attributs: type, title et linums.
type: il existe quatre types de langues compatibles avec notre surligneur: balisage, css, php et javascript
Titre: vous pouvez inclure un titre qui apparaîtra au-dessus du surligneur de syntaxe (facultatif)
linums: ajouter des numéros de ligne à votre code, en commençant par le numéro que vous avez défini (facultatif)
Le seul attribut requis est "type", bien qu'il s'agisse par défaut de "balisage".
Mettre en place un plugin pour vous donner la possibilité d’utiliser un shortcode surligneur de syntaxe a quelques étapes, mais heureusement, vous pouvez toujours simplement télécharger le plugin et l’installer sans avoir à vraiment savoir comment il a été assemblé. L’un des avantages de WordPress est de comprendre comment tout fonctionne afin que vous puissiez personnaliser les éléments pour que cela fonctionne vraiment pour vous. De cette façon, si vous n'êtes pas fan de mon thème sombre, vous pouvez facilement jouer avec le CSS pour modifier les styles de votre surligneur de syntaxe afin qu'il corresponde à votre conception..
.
