Post History
I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and...
Answer
#3: Post edited
by
manassehkatz
·
2020-08-05T02:42:56Z (over 3 years ago)
- I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and right at the top but then wasted on the rest of the page, but that really doesn't matter for this particular question).
- Anything manual is pretty much guaranteed to be a mess. But maybe there is a CSS way of having a continuation marker on the left for any line that has wrapped. Not a simple ```+``` (or similar) continuation character but rather a solid colored line, sort of like you often have to indicate a quoted blob of text, but have it only show on the continuation lines. That would be clear visually (all within the ```<pre>``` block of code, but with some lines having this "prefix" and some having blank space in the same location.
A little searching and it looks like the key may be **first-line* - like:- <pre>
- p::first-line {
- background-color: yellow;
- }
- </pre>
- The catch is that this would need to be applied to every line within a ```<pre>``` as if it were a separate ```<span>``` (or something) because we don't want this for "the first line of the pre different from the other lines of the pre" but rather "for every single "source line", have a *first-line* and *all other lines based on wrapping*. I am sure this can work, the only question is how much adjustment to typical markdown or other HTML generation needs to be done to make it work.
- I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and right at the top but then wasted on the rest of the page, but that really doesn't matter for this particular question).
- Anything manual is pretty much guaranteed to be a mess. But maybe there is a CSS way of having a continuation marker on the left for any line that has wrapped. Not a simple ```+``` (or similar) continuation character but rather a solid colored line, sort of like you often have to indicate a quoted blob of text, but have it only show on the continuation lines. That would be clear visually (all within the ```<pre>``` block of code, but with some lines having this "prefix" and some having blank space in the same location.
- A little searching and it looks like the key may be **first-line**, like:
- <pre>
- p::first-line {
- background-color: yellow;
- }
- </pre>
- The catch is that this would need to be applied to every line within a ```<pre>``` as if it were a separate ```<span>``` (or something) because we don't want this for "the first line of the pre different from the other lines of the pre" but rather "for every single "source line", have a *first-line* and *all other lines based on wrapping*. I am sure this can work, the only question is how much adjustment to typical markdown or other HTML generation needs to be done to make it work.
#2: Post edited
by
manassehkatz
·
2020-08-05T02:42:37Z (over 3 years ago)
- I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and right at the top but then wasted on the rest of the page, but that really doesn't matter for this particular question).
- Anything manual is pretty much guaranteed to be a mess. But maybe there is a CSS way of having a continuation marker on the left for any line that has wrapped. Not a simple ```+``` (or similar) continuation character but rather a solid colored line, sort of like you often have to indicate a quoted blob of text, but have it only show on the continuation lines. That would be clear visually (all within the ```<pre>``` block of code, but with some lines having this "prefix" and some having blank space in the same location.
- I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and right at the top but then wasted on the rest of the page, but that really doesn't matter for this particular question).
- Anything manual is pretty much guaranteed to be a mess. But maybe there is a CSS way of having a continuation marker on the left for any line that has wrapped. Not a simple ```+``` (or similar) continuation character but rather a solid colored line, sort of like you often have to indicate a quoted blob of text, but have it only show on the continuation lines. That would be clear visually (all within the ```<pre>``` block of code, but with some lines having this "prefix" and some having blank space in the same location.
- A little searching and it looks like the key may be **first-line* - like:
- <pre>
- p::first-line {
- background-color: yellow;
- }
- </pre>
- The catch is that this would need to be applied to every line within a ```<pre>``` as if it were a separate ```<span>``` (or something) because we don't want this for "the first line of the pre different from the other lines of the pre" but rather "for every single "source line", have a *first-line* and *all other lines based on wrapping*. I am sure this can work, the only question is how much adjustment to typical markdown or other HTML generation needs to be done to make it work.
#1: Initial revision
by
manassehkatz
·
2020-08-05T02:30:44Z (over 3 years ago)
I've seen this problem even on desktop - particularly if a blog with some code has a relatively narrow center section due to wasted space on the left and right (typically with stuff on the left and right at the top but then wasted on the rest of the page, but that really doesn't matter for this particular question). Anything manual is pretty much guaranteed to be a mess. But maybe there is a CSS way of having a continuation marker on the left for any line that has wrapped. Not a simple ```+``` (or similar) continuation character but rather a solid colored line, sort of like you often have to indicate a quoted blob of text, but have it only show on the continuation lines. That would be clear visually (all within the ```<pre>``` block of code, but with some lines having this "prefix" and some having blank space in the same location.