hastebin / pastebin如何隐藏标签?

Okay so I'm working on a hastebin/pastebin type application. I need a little help tho. How can I display the raw paste but with pre tags that are hidden in the source but shown on the elements in chrome? For example if you goto https://hastebin.com/raw/mikepucegu you see its raw. If you view the source it only shows the text

"
<?php
hi
?>
"

Okay my question is how can I do that? Here is an image of the elements http://prntscr.com/g06s9l but it doesnt show anything in the source? I'm confused but I want to do this. So heres what i got so far::

<?php
$con=mysqli_connect("localhost","root","","blazebin");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}


$result = mysqli_query($con,"SELECT * FROM pastes WHERE id=".$_GET['id']."");
while($row = mysqli_fetch_array($result))
{
echo "<script>document.write('<pre>');".$row['paste']."</pre>";
}
mysqli_close($con);
?>

BTW I know the snippet wont work but It was acting weird when inputting into my code thingy. Okay so can someone tell me how I can insert elements but them be hidden in the source but not in the elements?

If you deliver a response with a Content-Type of text/plain, the browser will display it as plain text. In PHP, you can do this by calling:

header("Content-Type: text/plain");

You must make this call before sending any output. Once you've done this, any output will be displayed as plain text -- any HTML tags in your output will be ignored.


(The HTML elements you're looking at are a red herring! They were injected by the HTTP Spy browser extension.)

The sites can't choose wether you see the rendered site's tags or not, it's just how your browser chooses to display content to you, i.e., when you see the "raw" text, your browser will wrap it around pre tags and put it inside a body element, but since it was just plain text, it chooses to show you only said text when you want to see the source, in fact, if you inspect the document while seeing only the source you will see that the browser actually wraps it around pre's and puts it inside a body again. Summarizing:

This is what you see:

<?php
hi
?>

This is what the browser does to show it to you:

<html>

    <head>
        <link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css" title="Ajustar líneas largas">
    </head>

    <body cz-shortcut-listen="true"><pre>&lt;?php
    hi
    ?&gt;</pre></body>

</html>

This is what it chooses to show you when you want to see the source of the plaintext document:

<?php
hi
?>

There is nothing magic going on.