Need help? Check out our Support site, then

How do I format source code on my blog posts?

  1. Hi,

    I'm new here and just started blogging yesterday. This morning I posted something with some XML code and had a heck of a time getting it formatted correctly. Are there any tools for formatting programming source code? We use snipsnap wiki at my Job and they have a {code} tag for such purposes. I was wondering what others do here?

  2. You could try using the tag that's available in the formatting buttons above the text window. ;)</p> <p>Collin

  3. You could try putting it in a monospace font (e.g. Courier) although this will still remove double-spaces etc.

    The easiest way is to click the HTML button in the toolbar, paste your code into the popup window, put <pre> before it and </pre> after it. This will retain formatting.

  4. Oh nuts! I posted earlier and it formatted it!


    On the tool bar I have no idea what the "HTML" button in the RTE does, but in the plain text version you can use the "code" button or as in your first post you can manually type < code > without the spaces which will force it into a different font and ignore all the html formatting etc (as you can see in my post above!)


  5. OK, Collin's way is better, I didn't know about his two ways. My way just achieves the same thing, but by going into the source code of the post, which is needlessly complicated ;)

  6. You can also encode/ escape the code as well and see if that works. Here's a link to a search that encodes for you. Haven't tried it but there are others on the web as well.

  7. Thanx Collin, Studley. However I'm still having trouble. I tried the HTML button which brings up a plain text editor with the HTML source of the post. I then put the &tl;code/> tag in manually with the text "code here" as a place hoolder and updated. I then went back in teh RTE and pasted my XML source code over the spot where the "code here" text was and noticed that the preview used a monospaced font (which is half of what I wanted). The indentation was all thrown off though as half of my source fell off the screen and wrapped some wierd way. After the update I guess wordpress reformats and removes all of the indentation. The end result was comparable to where I started (XML with no indentation) with the addition of a monospaced font. It seems to me that there should be a code format button in the toolbar to assist with this sort of thing. By the way Collin, I did not understand your first post. Could you clarify what your intention was?

  8. There's a code button on the normal editor. I have a feeling that TinyMCE/ RTE is mucking things up again.

  9. what is the normal editor? How do I use it? I looked under options and couldn't find an option to enable it.

  10. Dashboard -> Users -> Your Profile -> It's a checkbox at the bottom of the page.

  11. Thanx drmike. The plain text editor looks a little less feature filled the the RTE but I guess I'll manage.

  12. me thinks plain text editor could be found more easily if the checkbox to turn it on would be located on the 'Dashboard ->Options->Writing' tab, which seems to be a more logical place for this option.

    as well as 'Search Engines' (aka "Private" blog) and 'Membership' should go, IMO, to the 'Options/Reading' and 'Options/Discussion' tabs, respectively, but that's by the way.

  13. This is still a major pain! I cannot get XML source code to format correctly! I was trying to use an embedded textarea in the RTE and it throws the whole edit session off. Using the plain text editor is too low level and adds nothing except for the code button which I can do manually from the RTE. There has got to be a better way! I checked that Javascript text escape app from the link above but that escapes the entire text and that's not necessarily what I want. I just want simple HTML encoding.

  14. studley in the some of the posts above has already suggested you the only available on .com method: enclose the PREformatted code into the <pre> element tags.

  15. I'm using the pre tag and the oucome is unacceptable. I've also tried come inlined css to no avail. It seems that WordPress filters out certain HTML from all posts. All I really need is an easy way to get programming source code to format correctly. IF I can't do that I may have to look for another blog host (which I'd rather not do). The major purpose of my blog is to share programming source code. I'm thinking I may have to consider other providers as this is a major shortcoming for me.

  16. sorry CFF, I can't see where on your blog you are using a <pre> element (can see only a <code> usage though) and how exactly would you define an unacceptable <pre> output?

    well, it appears sharing a programming source code is definitely not a strongest .com's side, moreover as far as I could "understand it out of the gate" (may be wrong, "hopefully it’ll become more clear as time goes on") it's targeting somewhat another type of audience.

  17. options,

    I've since updated my blog so that my code samples will read a little better. When I use the pre tag my sample no longer fits into the rectangular dimensions of my blog and appears to wrap in unreadable unpredictable ways. I believe this is a simple problem that could be handled by the inclusion of a CSS style definition for such content. Many sites I've seen use this approach where code is presented in a box with a scroll bar. I tried copying the CSS inline on my post but wordpress stripped it out. It is very frustrating. Is there someone at WordPress I could plea to and beg for such functionality? It's very important for the content of my blog. I only look for rudimentary support for code formatting right now as I am pleased with all of the other features at WordPress. Any little thing that can be done to allow my code samples to at least be comprehensible and retain their original alignment would be greatly appreciated.

  18. Hi codeforfun,

    I'm sorry your code isn't formatting the way you'd like! Until we get selective CSS filtering working, there's little you can do about it here. Unfortunately I have no timeline for this. With your own hosted WordPress blog you'd have unlimited control over CSS and markup but on this site we have to keep security first.

    Different themes offer different CSS rules for code tags so you might find something better in another theme.

  19. Hi andy,

    Thanx for the suggestion. Now I have a question. There is a site here that uses the same template I switched to. I followed example and wrote my own converter and tried to mimic what was done there. After conversion, my content is still being truncated even as I use the same template. It appears that content on this site is using a smaller font but I don't see that specified anywhere when I "view source" on the page. Where am I going wron on my site? I believe a smaller font would definitely help my retain some of my formatting and reduce truncation though it is only a hack or a temporary solution. Could you or anyone else help shed some insight on this?

  20. Subflood is also using a pre tag on his posts it appears. I don't see that on yours.

    I don't see it declaired within the theme's CSS file so I'm not sure if that is what is affecting it or not.

  21. Yeah I didn't use the pre tag because my formatter takes care of converting whitespace as well. I can try the pre tag but I don't think that's it. For now I'm using a font tag but I'm not happy with it.

Topic Closed

This topic has been closed to new replies.

About this Topic