prism highlighting is undoing my escaped chars

[mark-hahn]

When I set an element's innerHtml as <code>&</code> and then run the prism highlighting on that element, it is showing as & in the webview. It shows correctly as <code>&</code> when prism is not run. In other words it is reversing my escaping and <code> is being treated as markup. Why is this happening? I will check the prism source code but if this is expected behavior then what is the bext way to fix it?

[mark-hahn]

I got it to work. I had to use a ridiculously complicated fix. I put markers in my html like & replaced with \u0001. Then in a prism hook, right before prism put it's marked-up code into the dom, I converted them to double-escaped codes by replacing the \u0001 markers with &.

Here is my solution in case anyone else runs into this problem. Put this plugin in a js file and add it to your js code as you do with any extension. Enjoy ...
...

// This is a teensie-weensie plugin to escape HTML 
// entities in Prism.js.
// This is needed because Prism undoes escaping.

/* run this on your html before inserting it into the DOM ...

function charsToMrkrs(str) {
  return str.replaceAll(/&/g, "\u0001")
            .replaceAll(/</g, "\u0002")
            .replaceAll(/>/g, "\u0003")
            .replaceAll(/"/g, "\u0004");
}
*/

/* This is the actual plugin code ...

Prism.hooks.add('before-insert', function (env) {
  env.highlightedCode = env.highlightedCode 
      .replaceAll("\u0001", "&amp;amp;" )
      .replaceAll("\u0002", "&amp;lt;"  )
      .replaceAll("\u0003", "&amp;gt;"  );
});

[DmitrySharabin]

Hey there,

I tried to recreate the steps you mentioned (as I understood them):

1. Set innerHTML of an element
2. Run Prism.highlight on the element's textContent (since we'd like to highlight the code itself).

It seems to work fine (here is an example). However, I might not fully understand the issue you are facing. What am I missing?

[mark-hahn]

I also had line-numbers and keep-markup plugins. You might try adding them to your test. I did a really bad job of documenting the problem.

The example <code>&</code> is a small piece of a large app output. I never actually tested that in isolation.

If you really want to chase this, you can clone my repo. It is for a vscode extension. It is at https://github.com/mark-hahn/vscode-definition-stack and the commit is 2ef6e1e471effb082ea491fe46393e76bb5e33f4. I realize this would be ridiculous amount of work for you to do. I would minimize the problem case but I don't have the time and I have a working hack. Sorry. I will put working on this on my to-do list but it will be at least a month before I could get to it.