Need help? Check out our Support site, then


WordPress.com Forums » Support

12

Source Code Formatting

  1. mcory1
    Member

    Just thought I'd go back and edit some of my old posts to use the new [sourcecode]...[/sourcecode] stuff, and ran into some issues.

    It's definitely better than it was, but it doesn't seem to preserve whitespace formatting, and in a post I just edited with lots of '<' and '>' (i.e. C# generics), it scrapped those -- "ICollection<MyClass> bob" became "ICollection bob"...

    The FAQ says it'll preserve formatting and automatically encode HTML entities (like '<' or '>'). The formatting is preserved for display perfectly fine, but if I go back to edit it, all the extra white space I added for each line is gone -- it's all straight-edge left aligned.

    Am I just missing something, or....?

  2. thistimethisspace
    Member

    I can't help you with this but perhaps another blogger can. In the meanwhile this is what the forum searchbox produced http://en.forums.wordpress.com/search.php?q=source+code

  3. jamesewelch
    Member

    It's also converting a few characters to some form of extended ascii characters outside of normal characters. I've seen that happen before when things such as double quotes, single quotes, ellipses (three periods) are pasted into the text box and its not converted to the standard symbols. This isn't a problem if the same symbols are placed outside of the "sourcecode" block.

    There's also a text-wrapping problem. My template only provides about 500px width. So lines that are longer than that cause the sourcecode block to get messed up - background doesn't extend all the way to the right.

    Also, XML comments are removed from csharp code blocks.

  4. jamesewelch
    Member

    mcory1, try turning off the rich text editor. When I saved and went back, my white space was preserved. I was having problems with the rich text editor removing the spaces before this was added.

  5. raincoaster
    Member

    You do that on your Profile page, btw.

  6. options
    Member

    > There's also a text-wrapping problem. My template only provides about 500px width. So lines that are longer than that cause the sourcecode block to get messed up - background doesn't extend all the way to the right.

    you might want to embrace all of the code PRE blocks related to a single snippet into a DIV block with a custom style.

    somthing like:

    <div style="overflow-x:scroll; background: lightyellow; border: 1px solid; padding: 1em">
    <pre> code here </pre>
    <pre> code here </pre>
    <pre> code here </pre>
</div>

  7. jamesewelch
    Member

    Just so everyone reading this post is on the same page, we are talking about the new sourcecode tags added by WordPress today and not about using PRE or DIV tags to format our own code within our blog posts. Please read the FAQ and WP blog for reference.

    http://wordpress.com/blog/2007/09/03/posting-source-code/
    http://faq.wordpress.com/2007/09/03/how-do-i-post-source-code/

  8. poppy8sd
    Member

    ~jamesewelch:
    I saw the announcement, almost immediately, about "code" and started to leave (the first) comment, to the affect 'clueless, no idea what this is about, so Good Holiday and I'll tiptoe out' --but didn't, thought maybe I could find out later. "PRE" --"DIV" tags??? After reading, no more enlightened, but you sound like someone I could ask: Do I Need to know what this is? Will the blog --be going weird, this code stuff will fix? Or: can I Ignore and no probs?

    If we/I HAVE to understand this 'new feature': I'm gonna need a Whole Lot simpler and better How To....

    And can someone tell me where to submit a request for: No More New Features, for awhile? Thanks! To Americans: Good Holiday.

    Poppy
    d a V i n e

  9. thistimethisspace
    Member

    @poppy
    IMO it's highly unlikely that this information will be useful to you. And for that matter neither will it be useful to me or the vast majority of wordpress.com bloggers. I say this because we aren't geeks and we don't blog about IT so, we aren't apt to be posting source code in our blog posts. :)

  10. jamesewelch
    Member

    poppy8sd,

    The new feature is only for people who want to show code in their blogs for their readers. The FAQ link above gives an example and shows how to do this. If you're blog isn't a programming/coding blog where you post examples of how to write code, then it won't affect you.

  11. mcory1
    Member

    Thanks for the suggestions. I went back to try it out without the visual editor, and something else kinda screwy happened -- in several places where I'd tried to fix the '<' and '>', the text was repeated. IE, >TItem< became >TItemTItemTItemTItemTItemTItem< -- yes, I know it's the wrong entities, but I was in a hurry and not paying much attention. I was also copy/pasting, so it's possible that I did that myself, but I really doubt that I did (come to think of it, I'm also a little unsure on the swapping of > and <s;...

    Anyways, doing it without the visual editor worked for preserving the whitespace -- thanks! Unfortunately, though, it still scrapes the '<' and '>' out (which is important for the main post I have with a lot of source code), and unfortunately it __does__ replace '&' with an appropriate entity -- so I get '>' in my post, but not '>' (neither as the '>' that would probably be ignored by the browser or as the > that would display properly -- it's just gone, like when I go back to the editor.)

    Thanks for the suggestions anyways though -- maybe going to the straight-roll-your-own formatting is the best way (never really tried it, just didn't look like that much fun.)

  12. options
    Member

    >we are talking about the new sourcecode tags added by WordPress today and not about using PRE or DIV tags to format our own code within our blog posts.

    so am I.

    above you were complaining that you're having a "text-wrapping problem", weren't you?

    the matter is, new sourcecode tags don't prevent you or anyone else 'reading this post is on the same page' from wrapping their content into DIV block with a custom overflow style set to 'overflow: scroll'.

    this way that said DIV block containing a code will have a scroll-bars which secure sourcecode block from getting messed up by the long strings that exceed main column width.

    actually, that's how those [sourcetags] aught to be implemented by devs, perhaps they will add this.

  13. jamesewelch
    Member

    mcory1,

    I've been using the Microsoft Live Writer beta and an "Insert Code" plug-in. The writer is working fine, but there's a bug opening any post from WP with PRE tags in it, so you can't edit it once its been posted. Its been resolved in the next release, but MS dev team hasn't said when they are going to release the next version.

    Otherwise, there's a few different tools you can use to get code into your blog that requires you to hard code a bunch of inline styles, but I think it will probably look better since all of the keywords, classes, etc will be correctly colored (doesn't seem like the new sourcecode tag is catching all of the csharp keywords or coloring all of the code correctly).

    I posted on one tool that works with visual studio at http://jamesewelch.wordpress.com/2007/08/23/how-to-post-code-from-visual-studio-to-your-blog/

  14. matt
    Staff

    You can't use [sourcecode] without a language argument.

  15. mcory1
    Member

    Well, for the most part, I've been using drivel for posting (its a GNOME utility), and it's been decent. I haven't really posted a lot of source code, but mainly because I haven't found a way to do it with something simple (like what this was supposed to be).

    I know there's a few utilities for Linux that handle source -> html, and I think jEdit even has a plugin specifically for that. Just hoping I could get by without it, that's all. That and my previous attempts kept getting most of the html removed, but I think that might have been because of the visual editor; I'll try it again without it.

    I know with the self-hosting solution there's a plugin called geishi, and that worked really well for the few attempts I made at it -- not sure if that's wp or for a different cms though (had it for an old site of mine).

    If nothing else, I think I'll start using the pre and <div style=(scroll stuff)> tags; the actual whitespace formatting was the main thing I wanted. Syntax highlighting was just icing.

  16. mcory1
    Member

    @matt -- I know; I was just putting [sourcecode] instead of w/ language attribute to make it a little quicker to post. In my posts, I was using [sourcecode language='csharp']...[/sourcecode]. It formatted it nicely, just messed around with the characters it was formatting.

  17. poppy8sd
    Member

    >IMO
    Opinion? How does that inform? Is the blog going to stop working? I was looking for: black/white hard answer --from someone who knows. It's 112F here, now (night), I don't have AC, energy or patience to decipher amorphous vagueness of "opinion."

    ~jamesewelch
    >show code...in their blog
    ??? My First instinct was 'this must be something to impress techs.' --Yet, it appeared on my home page --'New Feature,' so 2nd thought: maybe this is like 'You shudda up-graded (e.g. to IE 8), it WAS put on your home page, did you ignore the announcement'
    kinda thing, some day. Did I need to stop what I was doing, ASAP --learn/do something, or Irrelevant? Since I Don't Even get What the Feature is, thot I wouldn't just hit the sand with my head, but ask.

    Not to put too fine a point on it: "showing code on a blog" --isn't that the same as...showing one's underwear? I mean, one Knows it's there, why show it? IF the answer is technical, you can skip it. The Main part I got from you: my blog Isn't going to go haywire If I don't Do something. Thank you for reply (I almost understood it, too). I need to go find someone, now, to turn down the heat, put out some of the forest fires (or just shoot me). Thanks.

    Poppy
    d a V i n e

  18. raincoaster
    Member

    It's an option: use it or don't. There are better things to get upset about, surely.

  19. atthe404
    Member

    Poppy - knowing a little of you and your blog :) I think we can safely say this is not something you need worry about / implement at all. If you survive the heat wave do get back in touch :)

  20. poppy8sd
    Member

    >It's an option: use it or don't.

    Nice. And if isn't understood well enough to use OR to "get upset about"? We can get detailed, cogent, clear explanation from --you?

    I just remembered one of the reasons why I quit coming in to the Forum.

  21. raincoaster
    Member

    "It's an option." How many words do you need? You already said you understood.

    And why do you look for emotional validation in technical help forums? As you've noted, you will not find it here.

  22. atthe404
    Member

    poppy are you actually running a WP com blog anywhere? Or not?

  23. josephscott
    Staff

    I've just deployed an update to the highlighting code, if you've been having problems with the formatting edit your post and try again.

  24. jamesewelch
    Member

    Joseph,

    Thanks. I just checked and it seems like the csharp parser is now accepting gt/lt symbols for generics and XML comments (the original poster's concern).

    However,...
    When using FF, I still have the problem when the lines are longer than the box and the line background (both even/odd rows) appears gray. And the left side's green line isn't matching between the code segment and the header display.

    Here's the csharp code I've been using for testing:

    [sourcecode language='csharp']
/// <summary>
/// Test
/// </summary>
public void IsAssemblyDebug(string fileName)
{
     Assembly assemb = Assembly.LoadFile(Path.GetFullPath(fileName));
     bool isDebug = false;
     foreach (object att in assemb.GetCustomAttributes(false))
          if (att is DebuggableAttribute)
               isDebug = true;
     Console.WriteLine("Assembly is {0}.", isDebug ? "debug" : "release");
}
/// <summary>
/// Hello world.
/// </summary>
public string HelloWorld()
{
     List<string> listOfStrings = new List<string>();
     return "Hello World";
 }
[/sourcecode]

  25. devblog
    Member

    I too see the gray background if the lines are longer than the box, but I don't see the problem with the green line Jame's talking about... I'm using Firefox 2.

    BTW James, excellent blog you have there. I've bookmarked it.

  26. josephscott
    Staff

    As mentioned in the FAQ entry we use Javascript from the syntaxhighlighter project. For rendering issues I recommend working with them to get updates/fixes in.

  27. mcory1
    Member

    Joseph:
    Hey, thanks -- works like a charm now. FWIW, I too am having a bit of funkiness with long lines, but I'm using Konqueror so I don't expect it to really work (surprised that most of my "regular" sites work at all, really...) Strangely, I'm _not_ getting the grayed-out-lines problem that devblog and James are referring too, if that's any assistance...

  28. devblog
    Member

    For rendering issues I recommend working with them to get updates/fixes in.

    Excuse me Joseph, if I'm missing something here, but how are we supposed to work with them to get updates or fixes if we can't even use javascript in our blogs? Shouldn't you guys do that instead?

    To me is like trying to work with the TinyMCE guys to fix those issues in Safari or Opera.

    I'd agree with you if we used this in our own installs of wordpress, but not here.

  29. mcory1
    Member

    devblog -- I think he means (and correct me if I'm wrong) that they aren't planning on modifying the syntaxhighlighter code base, and that any issues with the syntax highlighting should be taken up with them so it comes through in the next release (which I'm assuming WP would install when it's available...). If WP modifies the code, they'd either have to try and introduce those changes to the syntaxhighlighter project (which shouldn't be difficult), or worry about trying to merge any changes they make with any future releases.

    That's my guess, at least....

  30. josephscott
    Staff

    You can preserve spacing a couple of different ways. If you are using the visual editor you can wrap your [sourcecode ....][/sourcecode] lines as preformatted. The other option is to just turn off the visual editor.

    I've just done another update which includes a fix to issues with backslashes.

    The line wrap issues are different depending on the browser you use, I don't get line wraps when using Firefox 2, but I do when using IE7.

    mcory1 is correct, development of the code highlighter should be kept at their site. If there are WordPress specific issues (like space preservation and backslashes) then we'll work on them, if they are syntaxhighlighter specific issues (like how it renders in different browsers), then those should be reported back to the project so that everyone can benefit.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags