0

I am trying to build a site where I show general JavaScript code snippets for various scenarios. I want to show the code from selected JavaScript file inside HTML ( not execute, just show ). I tried loading file using jQuery load function

$('#code-block').load('./JSSnippets/testCode.js');

& then used Prism library to highlight syntax

Prism.highlightAll();

The problem is when you load JavaScript content dynamically inside div, Prism doesn't render it properly.(It renders it properly only when JavaScript code is hard coded in the div). Is there a simple solution for this scenario ?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Maxx32
  • 25
  • 5
  • 1
    Use `$.ajax()` to make the request and specify `dataType` as `text` so that the response is not interpreted/deserialised automatically. Then append it to the `#code-block` element. Also make sure you only call `Prism.highlightAll()` ***after*** the content has been appended to the DOM – Rory McCrossan May 14 '20 at 09:05
  • @RoryMcCrossan, I tried your way, still Prism renders it the same way. It does highlights syntax, but it also adds initial padding to content which I can't figure out why is being added. You can check the output on below plunker : https://plnkr.co/edit/l5Lm8lLtaUVwGXet – Maxx32 May 18 '20 at 21:43

0 Answers0