Language labels on code blocks look as though they're part of the code in the block. Can this be changed?

Question

After encountering the issue with misidentified languages in code blocks, I went to look at my old questions and answers in case any of them were affected.

Even in situations where the language was identified correctly, there was another problem. The below screenshot is from an earlier edit of this question:

Screenshot of lines entered in a Cygwin shell, with the "bash" label looking like one of those lines.

The problem is that despite being a label, and not part of the code in the block, "bash" is positioned in such a way that it looks like the first line of the code. It's in the block, uses the same font, has the same indentation and line spacing...

The issue was also present in a code block containing some of the content of a ~/.bashrc file. As this was meant to be a precise representation of the lines in a file, the fact that "bash" appeared to be one of those lines, and could be manually highlighted and copied along with them, is a problem.

(I'm talking about a manual copy with Ctrl-C, not one using the Copy button. And I have checked that the language tag is pasted when I do a copy-paste.)

As a feature request, could the language labels on code blocks be moved into some sort of tab that visibly separates them from the code in the block? Ideally this tab would be on the right-hand side of the block, since the text is left-justified. It would also be great if the labels could be made impossible to highlight, or to copy with Ctrl-C.

Moving the Copy button out of the block and into a tab like this would also help with code readability in these situations. The code blocks really have lost readability and become prone to error if manually copied because of the change.

• AJM: I'm considering editing my old posts to use lang-none in all code blocks due to this issue.
• zcoop98: I can't see any reason why the language name text should be copyable; that seems like it's just extremely inconvenient in pretty much every way; that's a super unfortunate design choice. Personally, I'm not a fan of you removing highlight hints from posts to workaround this, but I definitely understand why it seems like the best solution right now, and I don't really have any alternative...
• AJM: This now affects at least one other site on the network - SuperUser. See meta.superuser.com/questions/17609/…

Answer 1

The copy button lives on the right-hand side of the code block. I think this is a sensible design decision, because the top-right of a code block is usually empty. We can move the language label there as well. While we're at it, we can make these take up horizontal space, rather than vertical space, allowing as many code blocks on screen at once as we had before the copy button feature was added.

Here's a mockup. On the actual site, the language name and copy button are direct children of the <pre> element: my decision to split out a <div> was arbitrary (I wanted to use indentation in the HTML), but may be more semantically-meaningful. I've placed the language name and copy button in an <aside>, since they are not part of the main document flow. I've also moved it to the end, meaning that that the programming language name and copy button are now late in the reading order. (I don't know whether this is a good thing.) If using the original reading order, write flex-direction: row-reverse;.

<div class=w4-code-block>
 <pre><code>code goes here</code></pre>
 <aside>
 <div class=lang-name>postscript</div>
 <button class=js-copy-button>
 <span aria-hidden=true>🖹</span> Copy
 </button>
 </aside>
</div>

.w4-code-block {
 display: block flex;
 flex-direction: row;
}
.w4-code-block > aside {
 display: block;
 position: sticky;
 align-self: flex-start;
 top: 0;
 right: 0;
}

And an ugly-but-functional demo:

.w4-code-block {
 display: block flex;
 flex-direction: row;
 /* demo styling */
 width: 50%;
 height: 10lh;
 overflow: scroll;
 resize: both;
}
.w4-code-block > aside {
 display: block;
 position: sticky;
 align-self: flex-start;
 top: 0;
 right: 0;
 /* demo styling */
 box-sizing: border-box;
 max-width: 80%;
 background: white;
 padding: 8px;
 border-radius: 8px;
 border-style: solid;
 border-radius: 8px;
}

<div class=w4-code-block>
 <pre><code>/asciiartN {% stack: N row col
 % output: draws an "ASCII art" N
 % PostScript doesn't allow you to pass variables directly into a function;
 % instead, you have to pass variables via the global stack. Pop the variables
 % off the stack and define them locally.
 6 dict begin
 /row exch def
 /col exch def
 /N exch def
 % Define how much space will be between each individual "N"
 /spacing 15 def
 % Get the width of the "N". We need this to know where to draw the right-hand
 % vertical
 /endcol col spacing N 1 sub mul add def
 % One row is drawn at a time, with the bottom row drawn first, and working
 % upwards. This stack variable tracks which column the diagonal is in, and so
 % we start on the right and work leftward
 /diagcol endcol def
 % Repeat N times: draw one row at a time
 N {
 % Left-hand vertical of the "N"
 col row moveto
 (N) show
 % Right-hand vertical of the "N"
 endcol row moveto
 (N) show
 % Diagonal bar of the "N"
 diagcol row moveto
 (N) show
 % Advance to the next row. This means moving the row one space up, and the
 % diagonal position one place to the left.
 /row row spacing add def
 /diagcol diagcol spacing sub def
 } repeat
 end
} def
1 100 200 asciiartN
3 150 200 asciiartN
5 230 200 asciiartN</code></pre>
 <aside>
 <div class=lang-name>postscript</div>
 <button class=js-copy-button>
 <span aria-hidden=true>🖹</span> Copy
 </button>
 </aside>
</div>

I got some CSS help from My position: sticky element isn't sticky when using flexbox, and the example Postscript program is lifted directly from alexwlchan's answer on Code Golf. This obviously needs more design work before it can be used.

• AJM: "allowing as many code blocks on screen at once as we had before the copy button feature was added." - That's a very good point!
• AJM: I think this is a good start, but the box with the label and Copy button currently obscures the text - a good bit of the first few lines of code is unreadable without horizontal scrolling. This is why I think something like a tab would be a good idea, keeping them completely separated from the area of screen containing the code.
• wizzwizz4: @AJM I specifically chose the example program to exhibit this issue: glad you picked up on it! Most programs don't have anything in the upper-right, and you can scroll horizontally to read the obscured portion regardless. I'm not sure what you mean by a tab: could you describe it further, or add a mock-up image to your question?
• AJM: @wizwizz If you think of how a browser tab (on the desktop) is positioned just above and separate to the actual content, you should get an idea of what I have in mind.
• wizzwizz4: @AJM That would still take up vertical space. It's almost always unnecessary for the upper-right corner to be available for code: I had to really hunt to find an example that had something there.