如何像 Stack Overflow 那样在我的网站上显示一段代码？ [关闭]答案

【问题标题】：How to display a piece of code on my website like the way Stack Overflow does? [closed]如何像 Stack Overflow 那样在我的网站上显示一段代码？ [关闭]
【发布时间】：2018-02-10 10:01:09
【问题描述】：

我想在我的网站上安全地显示代码。我在前端使用 Bootstrap，在服务器端使用 PHP。

我的网站有一个评论框。

如果我输入如下内容，则整个网页都会失真。我想检测该文本是一个代码，并像 Stack Overflow 一样以灰色背景显示它。我正在创建一个类似网站的博客，在该网站的主页上显示前 300 个字符。因此，如果我使用代码标签，那么开始标签仍然存在，但没有结束标签，我最终会扭曲我的网站。我也在尝试集成 TinyMCE 和 CKEditor 等文本编辑器。

&lt;div class="text-muted"&gt;

【问题讨论】：

那么，开源stackoverflow页面的源代码，看看它是如何完成的。
仅供参考 github.com/StackExchange/pagedown SE 使用一种降价编辑器

标签： javascript php html css bootstrap-4

【解决方案1】：

您可以尝试使用 pre 和 HTML 实体并应用一些 CSS 样式：

pre {
 border:1px solid #ccc;
 padding:10px;
 background:linear-gradient(#eff0f1,#eff0f1) 8px 8px/calc(100% - 16px) calc(100% - 16px) no-repeat;
}

<pre>
&lt;a class="link"&gt; this a link &lt;/a&gt;
&lt;p&gt; this some content &lt;/p&gt;
</pre>

那么如果你想自动更改<>可以考虑一些JS

let content = $('pre').html();
content = content.replace(/</g, '&lt;');
content = content.replace(/>/g, '&gt;');
$('pre').html(content);

pre {
  border: 1px solid #ccc;
  padding: 10px;
  background: linear-gradient(#eff0f1, #eff0f1) 8px 8px/calc(100% - 16px) calc(100% - 16px) no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<pre>
<div class="container" data-attr="some data">
<img src="https://lorempixel.com/400/200/" >
<a class="link"> this a link </a>

<p> this some content </p>
</div>
</pre>

这些是非常简化的示例，您可以在网上找到许多允许您应用高级样式的库：

【讨论】：

内容是动态的。如果它是静态的，那么它会起作用。
@SamratV 查看更新 ;)
Afif 你能告诉我如果我想显示其他编程语言如 Java、Python 或 C 的代码应该怎么做
@SamratV 你也这样做:) C 或 Python 更容易，因为没有 < 和 > 所以只需将代码放在 pre ;) 或也使用代码标签
@SamratV 这里是一个例子jsfiddle.net/39jpfqb3

【解决方案2】：

您可以使用<pre></pre> 或<code></code> 标签来包装您的代码示例。然后在标签之间插入带有 PHP 的代码。小心转义所有 html 标记 - 在 PHP 中，您可以使用 htmlentities() 转义输出。 http://php.net/manual/de/function.htmlentities.php

<?php
    $code = "<p>This is some <b>html</b> code";
    // safely display the code in the website:
    echo("<pre>" . $code . "</pre>");
?>

如果您喜欢更复杂的东西（如系统税突出显示），请查看这个开源解决方案：https://ace.c9.io/

【讨论】：