如何在格式化的HTML頁面中顯示html代碼

我的網站是一個簡單的教育網站。我想以格式化的方式在我的網頁中顯示HTML代碼，就像他們在編輯器中查看一樣。我的意思是說HTML標籤應該與剩餘的文本等顏色不同。這是來自其他網站的代碼片段。我希望我的網頁這樣的輸出：如何在格式化的HTML頁面中顯示html代碼

這是我的代碼： -

<html> 
 

 
<head> 
 
    <title>HTML Tutorial</title> 
 
</head> 
 

 
<body> 
 
    <div class="code"> 
 
     <xmp> 
 
      <!DOCTYPE html> 
 
      <html> 
 

 
      <head> 
 
       <title>HTML Tutorial</title> 
 
      </head> 
 

 
      <body> 
 
       This is a simple HTML page 
 
      </body> 
 

 
      </html> 
 
     </xmp> 
 
    </div> 
 
</body> 
 

 
</html>

我怎樣才能實現所希望的行爲我網頁。我感謝大家的努力。

來源

2016-06-13 Code Hungry

爲什麼你不把截圖從編輯器中嵌入到你的代碼中？ –

@RachelGallen - 因爲代碼的圖片很糟糕。他們遭受壓縮僞影。不能整潔地縮放。大量使用更多的帶寬。屏幕閱讀器不可見。無法複製/粘貼。 – Quentin

最簡單的方法來做到這一點，並有HTML顯示爲您的網頁上的實際內容是通過包裝你想在'<前>'標籤內顯示的HTML標記。

那麼你就需要使用HTML實體，以顯示你所需要的特殊字符，開括號是

&lt;

和右括號是

&gt;

你也可以使用一個插件以幫助您使代碼看起來更加美觀，例如語法突出顯示等等。一個相當不錯的javascript插件可以在這裏找到http://prismjs.com/

來源

2016-06-13 12:07:12 JustSomeDude

如何將此插件添加到我的網頁？ –

@CodeHungry您可以訪問Prism JS網站，他們有一個下載頁面來下載任何您需要的Prism JS主題。然後，您只需將Prism JS css和javascript文件添加到您的網站。在Prism JS網站的主頁底部，有關於如何編寫和使用Prism JS的教程鏈接。 – JustSomeDude

使用適當的HTML標記。請勿使用<xmp>，它不在HTML中。

使用<pre>表明，白色空間顯著
使用單位對有特殊意義的HTML字符（例如<）
使用<code>來標記代碼（例如<code class="html tag start-tag"><title></code>）。

將CSS應用於所需的顏色。 <code>元素給你一些東西來定位。

來源

2016-06-13 11:56:50 Quentin

如何在格式化的HTML頁面中顯示html代碼

回答

相關問題