ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

TA
Embed PHP, CSS Codes in WordPress with SyntaxHighlighter Evolved Plugin

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

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

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

.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.

  • Author Bio

  • Latest Post

Article by Harsh Agrawal

Harsh has written 1071 articles.

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


{ 7 comments… add one }

  • A.Jesin

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

    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
  • Ary Miraclepitu

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

    Reply
  • Vineet

    Yup, Got this article in just right time

    Thanks Harsh

    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
  • 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
  • Himanshu

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

    Reply

Leave a Comment