Prism.js not showing markup

Question

I am using the Prism.js plugin. I have a text field where you can type/paste your code, click "Submit," and it will display it in a div below the textarea. I've also included a dropdown where you can pick the language you're using from a list. Everything works great, except that any < > tags do not show up (i.e. html tags, preprocessor directives in C/C++, etc). Does anyone know if I missed a plugin from the download page? I've made it to where instead of specifying a specific language with

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

I've made it where the php will append the class name from the dropdown.

Here is my code. As I said, everything is working except those tags:

The 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>

The relevant PHP:

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

}

Here is a screenshot to show that code works, except for the <> tags:

Before "Submit", I choose the C language:

And here is after submission. Notice how the #include is missing the <> tags? I don't know how to fix this. Any suggestions?

score 2 · Accepted Answer · edited May 23 '17 at 12:09

I discovered from this StackOverflow question that any '<' or '>' characters must be replaced with

&lt; and &gt;

respectively. Since the text is dynamic, this took some thinking.....

Here is what fixed my problem. I used the str_replace() function in php to find any occurrence of '<' or '>' and replace with those characters. Here is the code to do that in case anyone runs into the same problem in PHP:

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

And to show how it looks visually, here is a screenshot of the result:

I could also do an associative array for better readability:

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

Both produce the same result. Boom. :-)

Prism.js not showing markup

1 Answers1