Handy WordPress Blog Tip: Display Source Code Markup with Syntax Highlighting

I’m relatively new to blog authoring in general and to using the WordPress platform for blogging in particular. The first few months of articles I’ve authored have included a number of source code references—PowerShell, C#, HTML, CSS and others—and I’ve put in source code using the Preformatted style. This works okay but I kept drooling over the blogs that had the fancy syntax highlighting.

Alas, I came across a great component from Alex Gorbatchev to integrate syntax highlighting into a blog article. Check out the SyntaxHighlighter project and you can easily integrate this JavaScript-based component into your site for beautiful code syntax highlighting.

Best of all, if you use WordPress.com then you already have access to the component! Check out the shortcode documentation for the sourcecode tag to learn more about all the wonderful syntax highlighting options available. As a teaser, I’ve marked up a simple HTML snippet below. Have fun!

[sourcecode language=”html”] <div id="MyHtmlSnippet" style="background-color: Fuchsia">

<p>You can put some cool content in here. Of course it will look terrible with a Fuchsia-colored background, but this is just a demo of code syntax highlighting.</p>

</div>
[/sourcecode]

Comments are closed.

Sign in
classic
Forgot password?
×
Sign up

(*) Required fields

I agree with OptimaSales Terms & Privacy Policy

×