web-dev-qa-db-fra.com

Mettez en surbrillance la syntaxe en ligne

Je recherche un plug-in compatible avec la version actuelle de WordPress (3.1.1 au moment de la rédaction de cette question) et prenant en charge une sorte de surbrillance en ligne de la syntaxe du langage de programmation. En gros, je veux pouvoir écrire un function name ou un variable name ou un if statement rapide dans un paragraphe et le faire ressembler à code, un peu comme ce que vous obtenez dans l'éditeur StackExchange avec le backticks.

Il existe plusieurs bons plug-ins pour mettre en évidence la syntaxe du langage de programmation dans WordPress, mais ils ne semblent pas prendre en charge la mise en évidence de la syntaxe en ligne.

jQuery.Syntax prétend disposer de la fonctionnalité en ligne, mais je ne parviens pas à le faire fonctionner sur Wordpress 3.1.1.

wysiwygsyntax-highlightingplugin-syntaxhighlighter
4
Alan Turing

Si vous souhaitez toujours utiliser le balisage backtick de type SO pour styliser vos exemples de code intégrés, j'ai créé du code qui y parviendra. Pour en faire votre propre plug-in, ajoutez simplement le code ci-dessous à votre functions.php. Il appelle le filtre wordpress "the_content" pour appliquer la transformation au contenu lors de son affichage, évitant ainsi que les transformations ne soient stockées dans la base de données.

function style_my_inline($content){

//what you use to denote your code
$inline_marker = "`";

//regex for code
$pattern = "/".$inline_marker."[\w\D\d]+?".$inline_marker."/";
preg_match_all($pattern,$content,$matches);

//what you want your surrounding markup to be 
$prepend_tag = "<span class = \"code\">";
$append_tag = "</span>";

//for each occurance in preg match results...
foreach($matches as $match){
    for($i=0;$i<count($match);$i++){
        //remove inline marker from match text
        $match_without_inline_marker = str_replace($inline_marker,'',$match[$i]);
        //add surrounding markup to match
        $match_with_tags = $prepend_tag.$match_without_inline_marker.$append_tag;
        //replace match in original content with marked-up match
        $content = str_replace($match[$i],$match_with_tags,$content);
    }
}

return $content;
}

apply_filters("the_content","style_my_inline");

Maintenant, j'ai testé le code ci-dessus avec du texte factice et utilisé des pseudonymes pour définir des blocs de code comme suit:

Lorem ipsum dolor sit amet, `consectetur adipiscing elit`. Donec nec magna erat. `Aenean nisi ante`, semper vel imperdiet sed, laoreet.

Puis appliqué le css suivant:

<style type = "text/css">
span.code{color:#56aaff;font-family:courier;background:#e5e5e5;padding:1px;}
</style>

Et ce que je reçois ressemble à ceci: screenshot of code block

J'espère que cela fonctionne pour toi.

4
kevtrout