Any instructions how to set up PHP with HTML highlight correctly?

[TimeDropsSB]

Related to #1238. Using Prism v1.14.0.

I'm trying to highlight PHP code which has HTML in it. More specifically, this is what I am trying to highlight.

<link rel="stylesheet" href="<?php echo $this->getStaticUrl('css/styles.css'); ?>">

I included the PHP component and its dependencies and executed Prism.highlight(). However, the result I'm getting is similar to C-like syntax.

From the Test Drive page, PHP should be working correctly so I have no clue what I'm doing wrong. I'm trying to look for instructions to set it up correctly but I see none so I assume it should be simple.

Here's the code:

import Prism from "prismjs";
import "prismjs/components/prism-markup-templating.js";
import "prismjs/components/prism-php.js";

const hl = Prism.highlight(snippet, Prism.languages["php"]);

// Output hl to DOM

The parsed HTML is as follows:

<span class="token operator">&lt;</span>
link rel
<span class="token operator">=</span>
<span class="token double-quoted-string string">"stylesheet"</span>
href
<span class="token operator">=</span>
<span class="token double-quoted-string string">"&lt;?php echo 
  <span class="token interpolation">
    <span class="token variable">$this</span>
    <span class="token operator">-</span>
    <span class="token operator">&gt;</span>
    <span class="token property">getStaticUrl</span>
  </span>
  ('css/styles.css'); ?&gt;"
</span>
<span class="token operator">&gt;</span>

[mAAdhaTTah]

The parsed HTML looks basically correct. Do you have a reproducible test case we can look at?

[Golmote]

@Sylphony You also need to import prismjs/components/prism-markup.js, before prismjs/components/prism-markup-templating.js.

[TimeDropsSB]

@Golmote Prism includes markup by default so that won't change anything. For the record, I did try doing that though - it doesn't change anything.

@mAAdhaTTah Here's a small repo test case. Load index.html through a server.

One thing I neglected to mention is that I'm actually writing the code snippet in a markdown file, which is then passed through a markdown parser prior to outputting the DOM. This is done through the Marked library. How the library outputs markdown to HTML to the DOM I'm not sure.

Standalone, the PHP highlight does work as expected. When comparing the differences between the standalone and the repo example, the only difference I can tell is in the standalone, Prism does one more routine to apply additional PHP tokens after it gets inserted into the DOM, presumably by a hook. I'm not sure how hooks work though and I'm not sure if there needs to be a specific way for the Prism parsed results to be inserted into the DOM for the hook to work.

[mAAdhaTTah]

Based on the repo test case, it appears docsify is bundling an older version of Prism vs the one you're loading via CDN. It doesn't include the {before/after}-tokenize hooks required to make the markup-templating work. You'll want to ask them to update to the latest version.

Also, if you're using Prism with a bundler, you want want to look at the new babel plugin for handling language dependencies.