Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm looking for a plugin that is compatible up to the current version of WordPress (3.1.1 as of writing of this question) and that supports some kind of inline highlighting of programming language syntax. Basically, I want to be able to write a function name or a variable name or a quick if statement as part of a paragraph and have it look like code, much like what you get in the StackExchange editor with the backticks.

There are several good plugins for highlighting programming language syntax in WordPress, but they don't seem to support inline syntax highlighting.

jQuery.Syntax claims to have the inline capability, but I can't get it to work on Wordpress 3.1.1.

share|improve this question
1  
Hate to answer my own question, but I've figured out that the <code>bla</code> tag is actually inline so accomplished the task I was KIND OF looking for. Also, the Markdown Qucktags plugin is a good example of a plugin that does the same with the Markdown markup language that StackExchange uses in its editors. –  Lex Apr 24 '11 at 15:56
add comment

1 Answer

up vote 4 down vote accepted

If you still want to use SO-type backtick markup for styling your inline code examples, I've created some code that will accomplish it. To make it into your own plug-in, just add the code below to your functions.php. It calls the wordpress filter "the_content" to apply the transformation to the content when it is displayed, thereby keeping any transformations from becoming stored in the database.

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");

Now, I tested the code above with some dummy text and used backticks to define code blocks like so:

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

Then applied the following css:

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

And what I get looks like this: screenshot of code block

Hope this works for you.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.