繁体   English   中英

Prism.js不显示标记

[英]Prism.js not showing markup

我正在使用Prism.js插件。 我有一个文本字段,您可以在其中键入/粘贴代码,单击“提交”,它将显示在文本区域下方的div中。 我还提供了一个下拉菜单,您可以从列表中选择要使用的语言。 一切正常,除了没有显示任何<>标记(即html标记,C / C ++中的预处理器指令等)之外。 有人知道我是否从下载页面错过了插件吗? 我已经到了哪里,而不是使用

<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如何缺少<>标记? 我不知道该如何解决。 有什么建议么? 在此处输入图片说明

我从这个StackOverflow问题中发现,任何'<'或'>'字符都必须替换为

&lt; and &gt; 

分别。 由于文本是动态的,因此需要进行一些思考.....

这是解决我的问题的原因。 我在php中使用了str_replace()函数来查找任何出现的“ <”或“>”并用那些字符替换。 如果有人在PHP中遇到相同的问题,请执行以下代码:

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

为了显示外观,下面是结果的屏幕截图:

固定标记的屏幕截图

我也可以做一个关联数组以提高可读性:

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

两者产生相同的结果。 繁荣。 :-)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM