BTW, personally I'd like it if the link were closer to the code block vertically, but I haven't quite worked out how to do it, as it seems to vary anyway, at least in Firefox anyway.

# current:
<pre><tt class="code"><font size="-1">my $message=&quot;Hello world\n&
+quot;;
print $message;
</font></tt></pre><div class='embed_code_dl'><a href="?part=1;abspart=
+1;displaytype=displaycode;node_id=487248">(d/l)</a></div>

# like this?
<table cellpadding="0" cellspacing="0" border="0"><tr><td>
<pre><tt class="code"><font size="-1">my $message=&quot;Hello world\n&
+quot;;
# adding filler lines
# adding filler lines
# adding filler lines
print $message;
</font></tt></pre>
</td><td valign="bottom">
<div class='embed_code_dl'><a href="?part=1;abspart=1;displaytype=disp
+laycode;node_id=487248">(d/l)</a></div>
</td></tr></table>
[download]

<table cellpadding="0" cellspacing="0" border="0"><tr>
<td><pre><tt class="code"><font size="-1">my $message=&quot;Hello worl
+d\n&quot;;
# adding filler lines
# adding filler lines
# adding filler lines
print $message;
</font></tt></pre></td>
<td class='embed_code_dl'><a href="?part=1;abspart=1;displaytype=displ
+aycode;node_id=487248">(d/l)</a></td>
</tr></table>
[download]

The "download code" block seems to be so far from the code itself because there is the additional newline within the code-PRE block. I've restyled the download link and PRE tags page to be like the following:

pre { display: inline;  }
tt.code { display: block; background: #EEE; }
div.embed_code_dl { 
  text-align: right; 
  display: block; 
  padding: 0px; 
  margin: 0px;  
  background: #EEE;
}
[download]

This integrates the download links nicely with the code blocks, at least on the one node I've tried so far. I'm not sure how this works with inline code blocks like this one though. I should maybe add a class (or rather, three) to the PRE tags, one for code blocks in general and one for inline and one for non-inline code blocks. But some browsers have difficulties with multi-classed elements, don't they?

Update: After some trials, it seems that inline code blocks are unaffected, so this is all nice.

Ugh. I like this in concept but I think the HTML for it is poor:

<p><tt class="code"><font size="-1">my $message=&quot;Hello world\n&qu
+ot;;<br />
print $message;<br />
</font></tt></p><div class='embed_code_dl'><a href="?part=1;abspart=1;
+displaytype=displaycode;node_id=487248">(d/l)</a></div>
[download]

The code is wrapped in <p> tags. The d/l link is wrapped in a <div>. And nothing wraps the two of them to keep them together. If I style my CSS to put a border, some indent, and some margin around my code, the d/l link is on the outside of that. I'd rather see something more like this (indents for clarity of explanation only):

<div class="codeblock">
    <div class="codebody">
        <tt class="code">
            [actual code]
        </tt>
    </div>
    <div class='embed_code_dl'>
        [the link]
    </div>
</div>
[download]

That way, styles that should apply to both can be applied to the "codeblock", and the other styles can be individually set, too.

I also removed the <font> tags in my example -- I think those should be removed from pm wherever they appear as they make custom CSS a real pain. (I just set the font-size style for font tags to be 100% and that seems to defuse them.) If they are deemed "necessary", they should be replaced by a <span> with an appropriate class and the font-size set in CSS. (I'm not saying someone really needs to hunt them down, but when tweaking the HTML output for a section, that's a great time to remove them.

-xdg

Ugh. I like this in concept but I think the HTML for it is poor

Agreed. And I like your proposed change. Off the top of my head the only reason I can think of to leave it as it is would be legacy support. A lot of people have styling for code based around the existing tags. Changing it would break that. OTOH, long term I think it would be for the better.

BTW, you are a member of pmdev, if you felt like putting together a patch, the code involved is wrapcode.

---
$world=~s/war/peace/g

I am a member of pmdev... but I'm completely intimidated by the learning curve necessary and protocols among existing developers. Is there a useful starter tutorial that I'm missing? I know there's a Pmdev HowTo Wiki, but even that's a bit sparse on detail and mostly suggests poking around. Do I just need to plow through the Everything docs? Or should I just start hacking patches and learn on the job as more senior pmdevs slap me around for stuff that doesn't make sense?

-xdg

Code written by xdg and posted on PerlMonks is public domain. It is provided as is with no warranties, express or implied, of any kind. Posted code may not have been tested. Use of posted code is at your own risk.

The html has been restructured somewhat, not quite as you describe, but there is now an outer wrapper over both tags. There are a bunch of reasons why going to the div representation you suggest can just happen, but IMO it could be an optional way to present it. Anyway, patches welcome. ;-)

---
$world=~s/war/peace/g

I'd find the d/l links on the left much better than centered (the last line of code is very often short and usually not indented much or at all, so putting the link on the left usually makes it closer to the actual code content, making it clearer what it is for). As for the gap, I think this would fix that for CSS-enabled browsers:

.code { margin-bottom: 0; }
.embed_code_dl { margin-top: 0; }
[download]

Updated CSS that works right now in user-specified CSS is:

tt.code { margin-bottom: 0; }
p { margin-bottom: 0; }
div.embed_code_dl { margin-top: 0; text-align: left; }
[download]

"tt.code" is required because that is what the site CSS uses so ".code" isn't considered specific enough to override. The "p" is needed when "auto" code wrapping is turned on because the HTML produced is <p><tt class="code">...</tt></p><div class="embed_code_od">....

So I'd change the HTML output to <p class="code"><tt class="code>... and change the on-site CSS to use .code instead of tt.code, something like:

.code { margin-bottom: 0; display: block; }
.embed_code_dl {
  font-size: smaller;
  text-align: left;
  display: block;
  margin-top: 0;
}
[download]

I know it probably isn't for everyone, but for quite a while I've had code blocks styled with a border around them for easier skimming. This makes it very apparent what the (d/l) links are attached to. Here's the CSS if anyone is interested:

.code {
    font-size: 13;
    display: block;
    border: 1px solid #666;
    color: #040;
    padding: 1em;
}
[download]

Modify to taste.

displaycode not available for this node type

This is not right. Either you have a working link, or you don't see a link at all. But not this mess.

Also, would it be possible to add a target for the link, perhaps user configurable, so it doesn't open in the same window?

Ok, thanks. Ill look into fixing this.

And yeah I bet we could arrange a target option.

---
$world=~s/war/peace/g

This is fixed now. No link.

---
$world=~s/war/peace/g

<niggle>
embed_code_dl should really be embed-code-dl. Plain underscores aren't legal in CSS identifiers (see the relevant bit of the spec). This means some browsers (earlier Mozilla based browsers for a start) ignore them.
</niggle>

I changed the class name as you requested. We still have a lot of classes that have underbars in our CSS however, so I kinda feel like it was a drop in the bucket/waste of time. What a bizarre and foolish restriction. Sigh.

---
$world=~s/war/peace/g

I changed the class name as you requested. We still have a lot of classes that have underbars in our CSS however, so I kinda feel like it was a drop in the bucket/waste of time

I now find out that I am a big fat liar. Underscores have been in the spec since the 1998 errata.

Apologies. My bad.

What a bizarre and foolish restriction. Sigh.

Personally I find hyphens far more readable. I really miss not being able to use them in variables, etc. from my years with Lisp.

... now $this is a reference to $that...

... now <c>$this</c> is a reference to <c>$that</c>...
[download]

This is no longer possible, I see:

... now $this is a reference to $that...

Update: ... and of course this post loses meaning once the bug has been fixed :) Thanks demerphq.

This was a bug. Sorry. Should be fixed now.

---
$world=~s/war/peace/g

I mostly use lynx to browse Perlmonks (for personal and technical reasons that are beyond the point here).

The problem is that, before this fateful change, I used to see the code blocks well formatted in lynx. Now, they appear all like flat text, even after removing the mandatory "download" link.

Is there any chance that this change can be made optional, so that the site looks like it used to be for us poor text mode diehards?

Thanks.

I believe this is fixed. In any case, code blocks look better in lynx (but only when the in-line download links are disabled). I've also disabled the in-line download links for Anonymous Monk (for now).

Let me know if the code blocks look as good as they used to.

Thanks.

Update: Looking at the HTML produced and how lynx rendered it, my only guess was that having a DIV inside of the PRE made lynx stop honoring the PRE. So now the inner DIV is not produced if there is no need for two containers (one containing just the code and one containing the code and the "download" link). Adjustments welcome.

- tye        

Thanks tye.

lynx's rendering now is back to readable.

Yeah ok, ill do my best. But it would be helpful to know what the cause is, can you play around with the markup until it looks ok for you and then let us know the cause?

---
$world=~s/war/peace/g

Update 3: To duplicate this, turn on "Auto code wrapping" in user settings.

<p class="code"></p><div class="codeblock"><tt class="codetext">my $me
+ssage="Hello world\n";<br>
print $message;<br>
</tt></div> <!-- </p> should be here, not before opening <div> -->
[download]

That p tag should wrap the entire codeblock.

Update: This change breaks any css using the .code selector (including the blue web-safe Perl-blue theme).

Update 2: Not necessary any more, demerphq++ fixed it (div became span). "On-site css markup" fix:

p.code { display: none }
div.codeblock {
    display: block;
    border: 1px solid #666;
    color: #069;
    padding: 1em;
}
[download]

This is odd. I see the following markup (with a few line breaks added inside of tags to make it easier to read:

<p class="code"><div class='codeblock'><tt class='codetext'><font size
+="-1">my $message=&quot;Hello world\n&quot;;<br />
print $message;<br />
</font></tt></div><font size='-1'><div class='embed-code-dl'
><a href="?part=1;abspart=1;displaytype=displaycode;node_id=487248"
>&#91;download&#93;</a></div></font></p>
[download]

I thought it might be a glitch in the HTML cleaning code we have, but it doesn't appear to be so. Likewise I've inspected the code and I dont see how the html youv'e posted could be generated. Since I can't repeat the bug I'm not sure how to proceed with this.

What browser are you using?

Update: I've worked it out. The problem was nesting a div inside of a p is apparently illegal, so if you had CSS keyed on the p tag it would show up as _though_ it was an empty p block even thought it wasnt really. Ive changed things so that when p tags are used the internal sections are spans and not divs. From what i can tell this sorts it all out. I also checked the Perl-Blue scheme and it seems to look fine.

---
$world=~s/war/peace/g

When I wanted the entire code for a node, I simply hit that big download button.

When I wanted just a snippet, I must be the most talented web user on the planet, because it's trivial for me to just (a) highlight a section of the text on my screen, (b) select "copy", (c) go to my text editor, and (d) press "paste".

Now, even though I had an easy method to get the whole doc and get any portion of the doc, I now have sometimes upwards of 4 or 5 more lines of screen real-estate taken up, for no apparent reason, because it's actually harder to have it pop up a new window or screen and go find that, just again to do the cut-n-paste there instead.

So, again, what problem is this solving for people? Can we get these things turned off on a per-user basis? Or even better, can we get these things turned off for everyone until this is somehow explained as being better for everyone overall?

Can we get these things turned off on a per-user basis?

Obviously you didn't read the root post very well. The third sentence answers your question by saying:

If this annoys you, please visit Node Display Settings and disable it there.

As for the problem it solves, well many people surf on small screens, and use the code wrapping support that PM provides, while this makes simple reading of the code perfectly acceptable it makes cut and pasting the code problematic. Obviously you dont have this problem, but please try to remember that we deal with users on all kind of devices, operating systems and browsers and we try to do stuff that makes most of them happy. IOW: The site isn't here just for your benefit. (Case in point obviously you don't browse the site on lynx)

On that note, most of the respondants I've heard from like the feature, and apparently the ones that don't found the link in the root node without difficulty and turned it off.

---
$world=~s/war/peace/g

As for the problem it solves, well many people surf on small screens, and use the code wrapping support that PM provides

Not to mention some of us have line numbering turned on (which is what I actually assumed it was addressing)
-- Argel