Код с использованиет тега <textarea>.
Он наиболее удобный его можно легко преобразовать и выделять.
А вот собственно и сам код:
<textarea rows="1" cols="30">ВАШ КОД </textarea>

где:
<textarea> - это ОТКРЫВАЮЩИЙ ТЕГ, и ставится вначале кода
</textarea> - ЗАКРЫВАЮЩИЙ, который ставится в конце кода.

При необходимости меняем размер.
Атрибут cols="30" отвечает за ширину окошка. Меняем цифру "30" на нужную нам.
Атрибут rows="1" отвечает за высоту. Высоту окошечка можно менять на удобную вам.
Там где написано ...ВАШ КОД... туда и вставляете свой код.

Вот так будет выглядеть окно:

КОДЫ ЦВЕТНОГО ОКНА, С ЦВЕТНОЙ ОБВОДКОЙ.

<textarea style="background-color: ЦИФРОВОЕ обозначение цвета ОКОШЕЧКА(поменять на своё значение); border: 2px solid ЦИФРОВОЕ обозначение цвета ОБВОДКИ(поменять на своё значение);">ВАШ КОД</textarea>

"цифровые" обозначения цвета  в таблице КОДОВ ЦВЕТОВ, КОТОРАЯ НАХОДИТСЯ ЗДЕСЬ берем вот такие значения
#ffffff - белый,
#cccccc - серый,
#000000 - черный.
#8b0000 бордо и т.д.

В коде кусок border: 2px - 2px это толщина обводки. Меняем цифру на свою необходимую.
ЦВЕТ СТАВИТ ТАК ЖЕ, как и цвет в самом окошечке, то есть ЦИФРОВОЕ обозначение цвета.