0

I am trying to do some tricky CSS, to be able to show color coded PowerShell or XML, including line numbers. Then later I want to be able to reference the line numbers and provide a note about what is going on in those line numbers. Getting the code to look right is done. But the notes look like poo. Basically what I really want in a style that can start after my <code> that styles my line numbers, that will provide a margin for all but the first line. But I fear that just isn't possible.

    code {
      line-height: 1em; 
      font-size: .8em;
      font-family: monospace;
      font-weight: normal;
      background-color: #fff;
      margin-bottom: 0;
      white-space:nowrap;
      display: inline;
      width: 100%;
      max-width:100%;
      overflow-x: visible;
    }
    span.cc_ise_note {margin-inline: 9ch 0;}
    .px_cc_ise_L1_note {color: #2B91AF; margin-left: 6ch; margin-right: 2ch;}
    .px_cc_ise_L2_note {color: #2B91AF; margin-left: 5ch; margin-right: 2ch;}
    .px_cc_ise_L3_note {color: #2B91AF; margin-left: 4ch; margin-right: 2ch;}
<code class="px_cc_ise_L3_note">1&2</code><span class="cc_ise_note">We know we have two registry keys to look in, so assign them to variables. We'll need to use these variables independently later.</span>

Unfortunately, when the span wraps, it doesn't indent. Using a negative value for the left margin-inline changes nothing, but I am not sure if I am doing something wrong, or trying to do the impossible. I could do it with lists I guess, but since I already have the line numbering and other details implemented as Code, and I want to match that appearance, I am hoping I can reuse that work by defining a span or a paragraph or something that can be used like this.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Gordon
  • 6,257
  • 6
  • 36
  • 89
  • Please can you edit your question to include a MVCE demonstrating the problem. – fubar Feb 18 '20 at 20:58
  • 1
    To start, you can change the `` to a `
    ` which will indent everything as a block, and then you can adjust the positioning
     – chrisbyte Feb 18 '20 at 21:07
  • @chrisbyte `
    ` sure looks like the right tree to bark up. But when I do that it drops to another line after the ``. So I moved the `` inside the `
    `, which seems to be even higher up the right tree. `border: none;` gets me the basic look, but the second line doesn't indent, and `text-indent` seems to do the opposite of what I want. But, I have a tree to climb! Thanks!
     – Gordon Feb 18 '20 at 21:32
  • 1
    FWIW, the question is not a duplicate, as the example it's supposed to duplicate uses lists and I specifically don't want to use a list. the solution IS a `
    ` as @chrisbyte points out, with the detail that the `` goes inside the `
    `, not before it as I was trying to do. A little CSS to refine the looks and I am off to the races.
     – Gordon Feb 18 '20 at 21:58

0 Answers0