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

EN

<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;
}