Code on the web
The few snippets of code that I’ve put up here have looked ugly. I first tried using the <pre> tag and with the last post, tried <code>. I think the pre was better, but neither were very satisfactory. Declaring this a problem that needed solving I went to the blogs, what are others doing? There seems to be a mix. Some do just <code> and others use <pre> with a specified class. Then I asked myself, where do I read the most code on the web? answer: developer.apple.com. What do they do? <pre> with a class. Their class ‘notebox’ puts the code in a nice, “hey this is code” box. This method seems desirable. Let’s give it a try, shall we?
- (void) setWookie:(NSWookie *)aWookie
{
// they must have bent their wookie, give them a new one.
[wookie release];
wookie = aWookie;
[wookie retain];
}
you like? I do.
Do I have to consciously wrap the code myself?
ComponentInstance starship = OpenDefaultComponent(MovieExportType, kQTFileTypeMovie);Well, you can’t win them all. xcode wraps nicely for me. It would be nice if I could resize xcode to the width I’d like and then just cut and paste from xcode. The problem is that when you cut, the contents of the clipboard don’t contain the “magic wraps” (this is surely desirable 90% of the time). Oh well, I guess I’ll format by hand.
ComponentInstance starship = OpenDefaultComponent(
MovieExportType,
kQTFileTypeMovie);
I write these posts using ecto. I’ll just make sure the editor’s width is about the width I want to wrap at and format accordingly. Example: in the editor window I’m looking at now, I can tell that the second block of code has wrapped. This method should be fine. I’m happy.
So thanks to developer.apple.com for the CSS (below). I’m not familiar with 80% of the attributes used, but hey, can’t argue with the results.
Here’s the final CSS:
.code
{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(161, 165, 169);
border-right-color: rgb(161, 165, 169);
border-bottom-color: rgb(161, 165, 169);
border-left-color: rgb(161, 165, 169);
background-color: rgb(247, 247, 247);
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
-x-background-x-position: 0%;
-x-background-y-position: 0%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
margin-top: 20px;
margin-right-value: 0pt;
margin-bottom: 20px;
margin-left-value: 0pt;
margin-left-ltr-source: physical;
margin-left-rtl-source: physical;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
padding-top: 8px;
padding-right-value: 8px;
padding-bottom: 8px;
padding-left-value: 8px;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
text-align: left;
font: 1.1em 'monaco,'Courier New',courier,monospace;
}
note: there was no copyright in the .css file, but I feel slightly guilty about just snagging this stuff. Is what I’ve done wrong? We’ll see, if I can’t sleep tonight due to a guilty conscience the first I’ll try is to re-work the CSS to be more of my own.

December 2nd, 2005 at 2:44 pm
Looks nice.
You can add overflow: auto or overflow: scroll to handle the wrap problem.
December 5th, 2005 at 7:32 am
I went with the overflow: auto - I’ll try not to need it, it isn’t ideal, but it’s better then running out of the box.