How to display HTML code on browser without executing it?

How to display or print or show the PHP or HTML or JavaScript code on browser without executing it.

If you want to print PHP or HTML codes with script or any other tags to define/state your point, you can do using following way and it works properly and perfectly. Many colleagues get stuck while developing an application where such requirement comes they use this technique to get their work done.

You need to wrap your code within <xmp> Your code lies here </xmp>. Refer to below example:

<br /> <?php echo "<p>test</p>"; ?><br /> <!DOCTYPE html><br /> <html><br /> <script src="angular.min.js"></script><br />   <body><br />     <div ng-app=""><br />       Name: <input type="text" ng-model="name"><br />       You wrote: {{name}}<br />     </div></p> <p>  </body><br /> </html><br /> for($i=0;$i<=5;$i++)<br /> {  <br />   for($k=5;$k>=$i;$k--)<br />   {  <br />     echo "  ";  <br />   }  <br />   for($j=1;$j<=$i;$j++)<br />   {  <br />     echo "*  ";  <br />   }  <br />   echo "<br>";  <br /> }  <br /> for($i=4;$i>=1;$i--)<br /> {  <br />   for($k=5;$k>=$i;$k--)<br />   {  <br />     echo "   ";  <br />   }  <br />   for($j=1;$j<=$i;$j++)<br />   {  <br />     echo "*  ";  <br />   }  <br />   echo "<br>";  <br /> }  </p> <p>ul.header li a {<br />   color: #FFF;<br />   font-weight: bold;<br />   text-decoration: none;<br />   padding: 20px;<br />   display: inline-block;<br /> }<br /> .content {<br />   background-color: #FFF;<br />   padding: 20px;<br /> }<br /> .content h2 {<br />   padding: 0;<br />   margin: 0;<br /> }<br /> .content li {<br />   margin-bottom: 10px;<br /> }<br /> .active {<br />   background-color: #0099FF;<br /> }</p> <p><!DOCTYPE html><br /> <html lang="en"><br />   <head><br />     <meta charset="utf-8"><br />     <meta name="viewport"<br />           content="width=device-width, initial-scale=1, shrink-to-fit=no"><br />     <title>React Router Example</title><br />   </head><br />   <body><br />     <div id="root"></div><br />   </body><br /> </html></p> <p>import React, { Component } from "react";<br /> import logo from "./logo.svg";<br /> import "./App.css";</p> <p>class App extends Component {<br />   render() {<br />     return (<br />       <div className="App"><br />         <header className="App-header"><br />           <img src={logo} className="App-logo" alt="logo" /><br />           <p><br />             Edit <code>src/App.js</code> and save to reload.<br />           </p><br />           <a<br />             className="App-link"<br />             href="https://reactjs.org"<br />             target="_blank"<br />             rel="noopener noreferrer"<br />           ><br />             Learn React<br />           </a><br />         </header><br />       </div><br />     );<br />   }<br /> }</p> <p>export default App;<br />