Embedding code in WordPress posts and pages can be a fiddly process.
There is a page in the WordPress codex dedicated to Writing Code in Your Posts, which is a good place to start from.
In the past few years, the preferred way of embedding code was through the use of a plugin, such as Syntax Highlighter Evolved or Crayon (which is becoming even more popular than Syntax Highlighter).
As GitHub became more popular in the past two years, many leading WordPress developers have switched to Gists to display their code.
Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.
Bill Erickson moved all his code to Gists and blogged about it:
“Keeping WordPress from messing up code you’re sharing in the post editor can be difficult, and a lot of my old posts had mangled code. By moving everything to github I don’t have to worry about this anymore. It also means I can have a single source of code linked from multiple places (in a blog post, in a code snippet post…).”
Take a look at these two examples:
http://www.billerickson.net/reusing-wordpress-theme-files/
I’m still undecided whether to switch to Gists, my main concern is that I’d like to keep full ownership, although GitHub is unlikely to be going anywhere in the next few years, considering how popular its become.
I think at the next instance of finding a post with mangled post on my site, I will take the plunge.
Inserting Shortcodes in Documentation
If you have are preparing some documentation and want to insert shortcodes, but not have them run within your post or page, you’ll probably start looking for a plugin to save your day.
It happened to me and I found these two excellent plugins:
The only alternative is to use a full blown syntax highlighter from the plugins mentioned earlier, but that’s overkill in my opinion.
You can also replace ‘[‘ and ‘]’ with their HTML character entities, but that’s a massive pain in the backside.
If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.
18 Responses
The code resides on Github servers and anyone can share that code in their blog posts right. If that saves a plugin from our WordPress installation , that’s good thing for WordPress blogs hosted in shared hosting
Yes that’s a good way to look at it.
By the way, for those who are interested in Markdown (mentioned by Mike above), I’ve found one Mac app which is currently free (Mou and another free online app (Dillinger).
Mou is a great find; I’m definitely checking it out to see if it addresses the few issues I’m having with Markdown Pro.
Also, as far as online here’s another one that also does WordPress plugin-specific Markdown:
Aha! This is just what I needed 🙂 Takes the pain away from creating the readme.txt file for WordPress plugins. Thanks!
Sounds great Mike, you’re making me feel a bit jealous, I really miss being in the US when I read about all you guys meeting at WordCamps. But the virtual world will have to do for now 🙂
Jean,
Ha! Two old sayings for you: “Grass is always greener” and “Be careful what you wish for.” 🙂
True haha. Well right now I really can’t complain, been in Thailand for the last 3 months, and hitting the beaches in the south for a full two weeks from next Wednesday. I guess that will compensate for the lack of WordPress activities 🙂
3 months in Thailand and on the beach? I think so. 😉
Oops, ya I was referring to Gist in my comment.
Thanks Brian.
Thanks for the writeup on this. Had me excited. But after testing for a little bit I realized that the syntax coloring for PHP doesn’t register unless you add the starting PHP tag at the top. For snippets I don’t actually want that because it can confuse users.
I bet they will improve this with time, but for now I think I am going to stick with Google Syntax Highlighter for WordPress. I love the idea though of GIST, and managing all my code snippets from blog in a central location.
Brian, you’re referring to Gist in your first sentence about syntax coloring right? Just to clarify for other readers.
Hi Jean,
I considered using Gist for HardcoreWP but decided against it because I find their color syntax highlighting less than inspiring and I don’t like the fact that the “View Raw” loads another page vs. a pop-up. Instead I’m using Better WordPress Syntax Highlighter which uses GeSHi on the server side vs. a Javascript highlighter.
To resolve the editor situation I wrote a simple plugin to disable WYSIWYG mode and then I write my posts in Markdown Pro (which I love). But it’s still a pain because I have to manually change the markup surrounding the code before I post.
However, you’ve got me thinking about creating another plugin that will let me name and add code snippets in a metabox and then use a shortcode to merge them into the post by name exactly where I want them. Something else for my todo list!
Hi Mike,
That seems like a nice solution. I haven’t really adopted Markdown yet, I quite like WYSIWYG mode and wouldn’t like to do away with that just for inserting code.
As I said, not sure yet, although I’ll probably end up using Gists.
BDW I wasn’t aware of HardcoreWP, some killer articles there, really needed the ones about classes as I’m looking to start building plugins in that style. You’re very welcome to post guest articles here if you’re interested in that.
Thanks Jean for the nice comments. BTW, the way I’m doing code in my posts is not related to Markdown, it’s just that I do both. Also, Markdown Pro has WYSIWYG in the right-hand pane with markdown in the left-hand pane; really nice but it’s Mac only.
And my blog is a new blog but I’ve got lots of things to write about; I’m putting effort into it instead of WordPress Answers where I posted almost 400 answers to date. I might take you up on the offer to guest post once you announce your future plans (assuming you plan to) so I can an idea of what might be a good fit for your site that I have expertise in. But time is always a limiting factor. 🙂
Welcome. I’ll look into Markdown a bit more when I have time, I’m on a Mac so it could be a good thing.
Your blog is a most welcome addition, I only know of Pippinsplugins.com and Tommcfarlin.com which really deal with plugin development mostly exclusively. I do plan to do more writing about plugin development here on WP Mayor, mainly because that’s the direction I’m taking myself, so I’ll have more material and things to share as I learn more myself.
Yes, working with Markdown is just so much easier than raw HTML, and once you get the hang of it it can be quicker than working in WYSIWYG mode.
Thank you. Yes both Pippin and Tom have a lot of offer and I’ve been following their blogs closely. Matter-of-fact I met Tom IRL tonight at the WordCamp Atlanta after party at the 8Bit offices; definitely a great guy and a great asset to the WordPress community.
Hopefully between the four of us (and more) we can churn out some great plugin-related content in 2013 and beyond.