如何在HTML页面上显示原始HTML代码

如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?

换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?

当前回答

如果您正在寻找与框架一起工作的解决方案。

const code = `
 <div>
  this will work in react
 <div>
`
<pre>
  <code>{code}</code>
</pre>

你可以用css给它一个漂亮的外观:

pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}

2022-12-21 03:30:41

其他回答

如果你的目标是显示你在同一页面的其他地方执行的代码块，你可以使用textContent(它是纯js和良好的支持:http://caniuse.com/#feat=textcontent)

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

要在结果中获得多行格式，您需要在目标div上设置css样式“white-space: pre;”，并在每一行的末尾使用“\r\n”单独写入行。

这里是一个演示:https://jsfiddle.net/wphps3od/

与使用textarea相比，这种方法有一个优点:代码不会像在textarea中那样重新格式化。(比如 在文本区域中完全删除)

2017-01-12 15:45:03

<textarea ><?php echo htmlentities($page_html); ?></textarea>

对我来说很好。

“记住亚历山大的建议，这就是为什么我认为这是一个很好的方法”

如果我们只是尝试朴素的<textarea>，它可能并不总是工作，因为可能会关闭textarea标签，这可能会错误地关闭父标签，并在父文档上显示HTML源代码的其余部分，这看起来很尴尬。

使用htmlentities将所有适用的字符(如< >)转换为HTML实体，从而消除了任何泄漏的可能性。

这种方法可能有好处或缺点，也可能有更好的方法来实现相同的结果，如果是这样，请评论，因为我很想从中学习:)

2018-01-10 01:02:52

这是一个简单的技巧，我已经在Safari和Firefox中尝试过了

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

它将显示如下:

你可以在这里现场观看

2018-10-10 11:13:24

我很久以前用过这个，它对我很有用，我希望它也能帮助到你。

var preTag = document.querySelectorAll（'pre'）; console.log（preTag.innerHTML）; for （var i = 0; i < preTag.length; i++） { var pattern = preTag[i].innerHTML; pattern = pattern.replace（/</g， “<”）.replace（/>/g， “>”）; 控制台.log（模式）; preTag[i].innerHTML = pattern; } <pre> <p>例</p> <span>更多文字</span> </pre>

2022-01-05 23:26:20

你可以使用像PHP这样的服务器端语言来插入原始文本:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

然后转储$str htmlencoded的值:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

2014-01-07 08:35:50

如何在HTML页面上显示原始HTML代码

推荐文章

最新文章

标签