1. 在HTML頁面中添加代碼顯示框

首先，我們需要在HTML頁面中添加代碼顯示框。代碼顯示框通常是一個文本區域，它可以通過使用<標簽來創建。例如：

<textarea rows="10" cols="50">

在這里輸入HTML代碼

</

這段代碼將創建一個文本區域，寬度為50個字符，高度為10行。用戶可以在這個區域中輸入或粘貼HTML代碼。

2. 使用CSS樣式

為了使代碼顯示框更加美觀，我們可以使用CSS樣式來為其添加樣式。例如：

textarea {d-color: #f8f8f8;

border: 1px solid #ccc;g: 5px;t-size: 14px;tilysolasonospace;

這段CSS代碼將為所有的<標簽添加一個灰色背景色，1像素的邊框，5像素的內邊距，14像素的字體大小和等寬字體。

3. 使用JavaScript

如果我們想要在代碼顯示框中自動添加HTML代碼，我們可以使用JavaScript。例如：

var code = "<h1>Hello World!</h1>";ententById("codebox").value = code;

這段JavaScript代碼將在一個id為“codebox”的<標簽中自動添加一個標題為“Hello World!”的HTML代碼。

使用HTML代碼顯示框可以讓用戶更方便地查看和復制HTML代碼。我們可以通過添加<標簽，使用CSS樣式和JavaScript來自定義代碼顯示框。