• X

    Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

    By in Wordpress plugin

    Bluehost hosting

    I have been writing about WordPress and lots of Thesis customization posts here at ShoutMeLoud from long. Earlier I used to use an addon for Windows Live writer which made my work easier to embed code in WordPress post. Though later on that addon was not updated and therefore I had to look for another options to show codes in my WordPress posts.

    Here I’m sharing about a useful WordPress plugin call SyntaxHighlighter Evolved plugin which will make your work easier to embed code in your blog post. Specially if you write a Blog on coding, this is the plugin which will make your work easier. This plugin comes with decent settings options like different color themes for highlighting codes, line numbers on or off, toolbar for easy copying and so on. You can access the settings from Settings > Syntax Highlighter

    Syntex highlighertsettings Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

    How to Add codes using SyntexHighlighter WordPress plugin?

    Embedding code using this plugin is very easy. All you need to do is add the shotcodes depending upon the code. You can find the reference from the setting page of this plugin: For example. use

    example shortcodes 550x90 Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

    Here are codes which are added by using this plugin : You don’t need to add the shortcode in HTML mode, you can use visual mode in post editor to embed codes using this plugin.

    Embeding css code by adding the code between CSS shortcode:

    css embeding Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

    .custom #header_area {display:none;}
    .custom #header {padding: 0;}
    .custom #page {padding:5px 20px;}
    

    Embeding Php code between php Shortcode:

    //Auto Thumbnail Code
    function joe_auto_thumb(){
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('//i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      if(empty($first_img)){return $first_img= "http://www.shoutmeloud.com/wp-content/uploads/2011/03/sml-125x125-default.jpg";}
      else {return $first_img;}
    }
    add_action('init', 'ShoutMeloud_auto_thumb');
    

    Since this plugin is authored by Automattic (WordPress parent company), I can recommend this plugin as one of the best WordPress plugin to embed codes.

    Download plugin

    Do let us know what method are you using to embed codes in your blog post.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Harsh has written 1124 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 7 comments… read them below or add one }

    Himanshu

    this plugin will be useful to me. it makes the code look clean in the post

    Reply

    Dheeraj@techreuters

    Really helpful plugin. Its very difficult to embed code in articles but the plugins made it very easy.Also, thanks for the download link.

    Reply

    Tuan @ Technology Blog

    I’ve used this plugin for a while and it is very helpful. The code looks nice and much easier to read. The greatest thing is that we won’t lose the code format and don’t need to make manual changes like before.

    Reply

    Vineet

    Yup, Got this article in just right time

    Thanks Harsh

    Reply

    Ary Miraclepitu

    Thanks Harsh for your share… this is first time i know this plugin, But I’ll try it !!

    Reply

    Kavya Hari

    Generally, it will be useful to all the people in the world wide too. Thank you so much for given up worthy post on here :)

    Reply

    A.Jesin

    How do I use this plugin to highlight CSS in the section of the HTML code while highlighting HTML code too ?

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `