How do I format source code on my blog posts?

  • Author
    Posts
  • #14320

    codeforfun
    Member

    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?

    #14462

    cornell
    Member

    You could try using the tag that's available in the formatting buttons above the text window. ;)

    Collin

    #14463

    studley
    Member

    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.

    #14464

    cornell
    Member

    Oh nuts! I posted earlier and it formatted it!

    Oops.

    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!)

    Collin

    #14465

    studley
    Member

    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 ;)

    #14466

    drmike
    Member

    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.

    #14469

    codeforfun
    Member

    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?

    #14473

    drmike
    Member

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

    #14476

    codeforfun
    Member

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

    #14479

    drmike
    Member

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

    #14483

    codeforfun
    Member

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

    #14485

    options
    Member

    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.

    #14496

    codeforfun
    Member

    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.

    #14499

    options
    Member

    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.

    #14505

    codeforfun
    Member

    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.

    #14508

    options
    Member

    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.

    #14606

    codeforfun
    Member

    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.

    #14611

    andy
    Member

    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.

    #14616

    codeforfun
    Member

    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?

    #14627

    drmike
    Member

    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.

The topic ‘How do I format source code on my blog posts?’ is closed to new replies.