Getting source code to display correctly in your blog can be a pain. I tried and tried to work with the <code> tags, but occasionally the visible code wasn't ok (for example replacing quotes and doublequotes incorrectly), taking one "-" off from html comment etc. Jumping on and off from "Visual" and "HTML" editor and updating a post seems to do this.
But of course there's a solution in the wonderful open source community and WordPress plugins that utilize the power. This isn't exactly breaking news as these have been around for while, as I picked up this post:
- WordPress Support: Writing & Editing Code. At that time, Alex Gorbatchev’s SyntaxHighlighter Google Code project was used to implement the source code highlighting feature.
I checked if this would've worked by default on self-hosted WordPress, but it seemed like it wouldn't, so I went to plugin hunt. And there seemed to be aplenty of plugins for source code publishing, some with syntax highlighting, some just making sure code displays correctly in <code> tag.
But this is what I decided to try for now and it seems to work nicely:
So whether you want to display just some html code or more advanced source code, these kind of plugins are for you. They are good for both one-two liners as they are for hundreds of lines of serious code. There's plenty of tags in use and all you have to do is enclose the code in a tag and define a language if you want. And the plugin supports a "lighter" style with no highlighting, but securing the formatting the same way.
Since writing this post I have removed the plugin, as I only post sourcecode to posts so often, and the plugin is on with the default so it puts the javascript code to every page, unless you set if off on the post window. However, if you're blog is about coding and you post sourcecode, like html, php, c, or whatever almost every post, this plugin works great (at least until WordPress version 2.7).
Thanks for all these great blogs and bloggers for helping me by providing a bunch of information on the subject:
- WordPress Plugins That Help You Write Code @Lorelle on WordPress
- Writing Code in Your Posts - WordPress Codex
- Posting Source Code @WordPress.com Blog
- Writing and Publishing Code in Your WordPress Blog Posts @The Blog Herald
- Displaying Code In WordPress Posts @ThemeLab
So if you like to read more about source code in posts, check the above for detailed info.
17 comments.
Antti, have you found any code converter plugins other than the one you mentioned? I'm having some issues with writing code in some of my tutorials on my WP site – the quotation marks keep getting turned around. I've been searching for something to fix this (either a plugin or perhaps a hard coded fix), but I haven't really found anything that works yet.
The best code highlighting plugin I've seen is the SyntaxHighlighter Evolved I mention on the post.
I don't use it myself, since I don't like having the Javascript thing here, when I only post code every so often. I personally use HTML tags and CSS to format the bits of code… At minimum, the code needs to be in CODE-tag, or in PRE-tag, and those should use “monospace” font, like Monaco, 'Courier New' or similar.
The “quotation mark issue” is “fixed” by using a PRE-tag or editing the post only in the HTML-side (not WYSIWYG), and use the character code. More about that in the WordPress codex link on the post: http://codex.wordpress.org/Writing_Code_in_Your...
I only write in the HTML window anyway, but I just wrote a guest blog tutorial and the code (if copied off the page) renders with backward quotation marks. Curiously I did not find a “code” class in my own site's stylesheet. Is that something I have to create myself?
The “smart quotes” or “curly quotes” is a WordPress theme feature. If you want to disable it completely (affects all quotes, not just in code), add this to functions.php of your WP theme:
remove_filter('the_content', 'wptexturize');The option for just code is using the escaped character code of quotation mark instead of just typing it:
" instead of: "…and after using the character code, just publish. If you edit after that, the code will be converted back to ” (In that sense, WordPress editor sucks a bit, thus disapling the wptexturize is good option).
For the styling, add something like this to the .css file (you don't necessary need it, unless you want particular style for the code- or pre-tagged text):
code {font:1em Monaco,'Courier New',monospace}I already tried adding the “remove_filter” line to my functions.php file and it didn't do anything. I coded a div with some inline styles to dress up that ugly code section in my article, but since it's not a proper “code” tag it didn't do anything but make the boxes better looking.
I actually present a fair bit of code, and WP-Syntax doesn't play well with Thesis theme.
Thinking about switching to SyntaxHighlighter Evolved next.
If the remove_filter didn't work, you did it wrong -or- there is overriding line of code elsewhere in your theme-files (checking other filters for “the_content” or “_filter” from the .php should do the trick).
And the reason the code-tag didn't do anything probably has something to do with the having style definition for code in the css-file :)
Nope, I entered it correctly, but it didn't do anything. I don't have a code style in my stylesheet. That's why I asked, “Curiously I did not find a “code” class in my own site's stylesheet. Is that something I have to create myself?
As I already said on earlier comment, having style for code in the css is just styling, does not help with quotation issue. Here's example if you want to style however:
code {font:1em Monaco,'Courier New',monospace}The thing is I can't find a code attribute anywhere in my stylesheet in order to style it.
How does editing existing element differ from adding a new one? Just add it, if you need to. Use my example if you want (it just makes the text monospace, taken that you actually have the code inside code-tags).
Ok, now I understand. You mean just place the code you wrote directly in the stylesheet, as is. Got it. But now it still has those bizarre quotation marks so the only way to fix that is with a plugin, eh?
The “remove_filter” does the trick. I don't why it's not working for you as that's something related to your theme, but other than that, yeah, using the escaped HTML code is the way to go – not a good way, but a way :)
Antti, I replaced all instances of quotation marks in my code with the escaped characters and it works perfect. I just used the Find and Replace feature in my text editor, which made it really easy to accomplish this quickly.
Thank you for your help.
Awesome. I'm happy it helped! Reminder me fix the “curly quotes” on my blog as well, never liked'em that much :)
Antti, I replaced all instances of quotation marks in my code with the escaped characters and it works perfect. I just used the Find and Replace feature in my text editor, which made it really easy to accomplish this quickly.
Thank you for your help.
Awesome. I'm happy it helped! Reminder me fix the “curly quotes” on my blog as well, never liked'em that much :)