Prism.js不显示标记

Question

我使用的是Prism.js插件。我有一个文本字段，您可以在其中键入/粘贴您的代码，单击“提交”，它将在文本区域下面的div中显示代码。我还提供了一个下拉列表，您可以从列表中选择您正在使用的语言。一切都很好，除了<>标签没有出现(即html标签，C/C++中的预处理器指令，等等)。有谁知道我是不是错过了下载页面上的插件？我已经实现了where，而不是使用指定特定的语言

<pre><code class="language-java"></code></pre>

我已经在php会追加下拉列表中的类名的地方实现了。

这是我的代码。正如我所说的，除了这些标签之外，所有的东西都在工作：

HTML：

<select required name="language-select" class="form-control" id="language-selector">
            <option value="" selected disabled>Language</option>
            <option value="markup">Markup</option>
            <option value="apacheconf">Apache Conf</option>
            <option value="aspnet">ASP.NET</option>
            <option value="bash">Bash</option>
            <option value="c">C</option>
            <option value="csharp">C#</option>
            <option value="cpp">C++</option>
            <option value="css">CSS</option>
            <option value="java">Java</option>
            <option value="javascript">JavaScript</option>
            <option value="matlab">MatLab</option>
            <option value="objectivec">Objective C</option>
            <option value="perl">Perl</option>
            <option value="php">PHP</option>
            <option value="powershell">PowerShell</option>
            <option value="python">Python</option>
            <option value="ruby">Ruby</option>
            <option value="scala">Scala</option>
            <option value="smalltalk">Smalltalk</option>
            <option value="sql">SQL</option>
        </select>
        <br/>
        <button id="drive_submit_btn" class="btn btn-md" type="submit">Submit</button>
    </div>
</form>
<div class="show-code">
    <script src="custom-js/prism.js"></script>
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
    <pre><code class="language-<?php echo $language?>"><?php echo $user_code; ?></code></pre>

</div>

​

相关PHP：

$user_code = "";
$language = "";
if (!empty($_POST["code_input"])) { //get input from textarea and dropdown
$user_code = $_POST["code_input"];
$language = $_POST['language-select'];

}

下面的屏幕截图显示了代码的工作方式，但<>标记除外：

在“提交”之前，我选择了C语言：

​

这是提交后的内容。注意到#include是如何缺少<>标记的吗？我不知道该怎么解决这个问题。有什么建议吗？

​

Answer 1

我从this StackOverflow question中发现，任何'<‘或'>’字符都必须替换为

< and > 

分别使用。由于文本是动态的，这需要一些思考……

这就是解决我的问题的方法。我在php中使用了str_replace()函数来查找任何出现'<‘或'>’的地方，并替换为这些字符。以下是在PHP中遇到相同问题时执行此操作的代码：

$user_code = str_replace(array('<','>'), array('&lt;', '&gt;'), $_POST["code_input"]);

为了展示它的视觉效果，下面是结果的屏幕截图：

​

​

我也可以使用关联数组来获得更好的可读性：

$user_code = strtr($_POST['code_input'], [
        '<' => '&lt;',
        '>' => '&gt;'
]);

两者产生相同的结果。轰隆隆。:-)