我需要帮助来创建一个新的 html 应答器以显示代码

Question

i try to make a html balise named <code>

this balise will show some code i try this:

<code>
ceci n'est pas prosses
ligne 2
ligne 3
Ligne 4 ldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjf
</code>

<code>
    <div class='num elem'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='txt elem'>
        <div>ceci est prosses</div>
        <div>ligne 2</div>
        <div>ligne 3</div>
        <div>ligne 4 ldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjfklsdjfldksjflsdjflksdjf</div>
    </div>
</code>

code {
    display: block;
    border: 1px ridge green;
    background-color: bisque;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;

    white-space: pre-line;
    word-break: break-all;
}

code .elem {
    margin: 0;
    padding: 5px;
    border: 1px rgba(0, 0, 0, 0.3) solid;
}

code .num {
    background-color: greenyellow;
    width: auto;
    border-right: 0;
    max-width: max-content;
}

code .txt {
    background-color: pink;
    width: auto;
    border: 1px rgba(0, 0, 0, 0.5) solid;
}

i want to first case in html example, un-numered code balise simple code balise, and it actualy work and on second case, numered code balise, with selectable code without numbers

but for the second case, i try to make balise inline to nums balise without overflow and number will grow with line

like table without selectable numbers

i cannot do that?
i'm forced to use JS?

Picture second case error

Answer 1

You are wrapping the numbers with a div tag and this is by default a block element, that's why you get a column of them. Take a look at this: Block and Inline Elements So, you could use span tag within the div tag that contains the text:
<div class="..."><span class="...">number</span>text</div>

---

Try this CSS:

code {
    display: block;
    border: 1px ridge green;
    background-color: bisque;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
    word-break: break-all;
}

code .elem {
    margin: 0;
    padding: 5px;
    border: 1px rgba(0, 0, 0, 0.3) solid;
}

code .num {
    background-color: greenyellow;
    width: auto;
    border-right: 0;
    max-width: max-content;
    float: left;
}

code .txt {
    background-color: pink;
    width: auto;
    border: 1px rgba(0, 0, 0, 0.5) solid;
    padding-left: 20px;
    margin-left: 20px; 
}