Highlighting Syntax (Embed Code) in WordPress.


If you would like to embed highlighted code that looks pretty like it does in your text editor, such as Sublime Text, this is the post for you. Check out the sample below to see what i’m talking about, then read on.

.wp-caption {

    background: #fff;

    border: 1px solid #f0f0f0;

    max-width: 96%; /* Image does not overflow the content area */

    padding: 5px 3px 10px;

    text-align: center;

If you aren’t working in WordPress I would go straight to Googles solution which is Google Prettify, that seems to be the most popular choice by far. If you are writing on a WordPress site like this, you will need another solution, since the WordPress CMS doesn’t play nicely with the other kids.

There are two way to accomplish this that I would recommend (not in order of preference, each of these methods has their own advantage):

Table of Contents

#1

Github Gists – If you are into Github, or you think that people will actually be forking what you are working on, you will want to checkout Github Gists. They are basically embedable Github code files, that will link back to your profile and can then be shared with others.

 

#2

Method two would be to get the AWESOME plugin called Crayon Syntax Highlighter which blows all the other plugins i’ve seen for this out of the water. Check out this excellent sample and some screenshots below.

<?php
/*
*Template Name: Template-No Sidebar
*Description: Custome page template without the distracting sidebar. 
Basically a copy of the parents page.php file, with the get_sidebar call removed and changed the div class to "single_inside_content".
Out of the box this theme did not have any page templates available. 
*/
get_header(); ?>	
	
	<div class="single_inside_content">
		

			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		

				<h1 class="single_title"><?php the_title(); ?></h1>
				

				<div class="single_inside_content">
				

					<?php the_content(); ?>
					

				</div><!--//single_inside_content-->
				

				<br /><br />
				

				<?php //comments_template(); ?>							
				

			<?php endwhile; else: ?>
	

				<h3>Sorry, no posts matched your criteria.</h3>

			<?php endif; ?>                    									


		</div><!--//single_left-->

		
		<div class="clear"></div>
		

<?php get_footer(); ?>

Crayon makes this really easy in a lot of way. For starters you get a Crayon button right in your WYSIWYG, so you don’t have to put in any <pre> or <code> tags manually yourself.

addcrayon

 

which then leads you to an excellent pop-up with all the options you could ever dream of. You get to paste in your code, select the language from the dropdown menu, add a title, pick a color scheme and tweak other items like max width. They really couldn’t make it any easier.

crayon menu

I’ll go ahead and show 3 different color scheme samples but that is basically it. None of the other plugins I tested even came close to this level of functionality, and could only be described as “busted”. Hope this helps.

<?php if(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'youtube') { ?>

						<iframe width="560" height="315" src="http://www.youtube.com/embed/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?wmode=transparent" frameborder="0" allowfullscreen></iframe>

					<?php } elseif(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'vimeo') { ?>

						<iframe src="http://player.vimeo.com/video/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=085e17" width="500" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

					<?php } else { ?>				

						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('slide-image'); ?></a>

					<?php } ?>
<?php if(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'youtube') { ?>

						<iframe width="560" height="315" src="http://www.youtube.com/embed/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?wmode=transparent" frameborder="0" allowfullscreen></iframe>

					<?php } elseif(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'vimeo') { ?>

						<iframe src="http://player.vimeo.com/video/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=085e17" width="500" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

					<?php } else { ?>				

						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('slide-image'); ?></a>

					<?php } ?>
<?php if(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'youtube') { ?>

						<iframe width="560" height="315" src="http://www.youtube.com/embed/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?wmode=transparent" frameborder="0" allowfullscreen></iframe>

					<?php } elseif(get_post_meta( get_the_ID(), 'page_featured_type', true ) == 'vimeo') { ?>

						<iframe src="http://player.vimeo.com/video/<?php echo get_post_meta( get_the_ID(), 'page_video_id', true ); ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=085e17" width="500" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

					<?php } else { ?>				

						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('slide-image'); ?></a>

					<?php } ?>

Performance takes a little bit of a hit. Increases page load time by .16 seconds.
syntaxlag

+ There are no comments

Add yours