3

I am using Prismjs for syntax highlighting, the way I am doing it is by fetching the data from a json file using fetch method and dynamically rendering the html using js. The problem is Prismjs is doing its job in local environment but not in production, btw I am using Netlify to host the site. I am also using the Prismjs.highlightall() method still it can't seem to work after hosting the site. Link to the site : css-shorthands
My JSON file

[
  {
    "id": "background",
    "name": "background",
    "longhand": "\n  .element {\n\t background-color: #000;\n\t background-image: url(image.png);\n\t background-repeat: no-repeat;\n\t background-position: top left;\n\t background-attachment: fixed;\n  }",
    "shorthand": "\n  .element {\n\t background: #000 url(img.png)no-repeat top left fixed;\n  }"
  },
  {
    "id": "border",
    "name": "border",
    "longhand": "\n  .element {\n\t border-width: 1px;\n\t border-style: solid;\n\t border-color: black;\n  }",
    "shorthand": "\n  .element {\n\t border: 1px solid black;\n  }"
  },
  {
    "id": "outline",
    "name": "outline",
    "longhand": "\n  .element {\n\t outlie-width: thick;\n\t outline-style: dotted;\n\t outline-color: red;\n  }",
    "shorthand": "\n  .element {\n\t outline: thick dotted red;\n  }"
  },
  {
    "id": "font",
    "name": "font",
    "longhand": "\n  .element {\n\t font-weight: bold;\n\t font-style: italic;\n\t font-variant: small-caps;\n\t font-size: 1em;\n\t line-height: 1.6;\n\t font-family: Arial, Helvetica, sans-serif;\n }",
    "shorthand": "\n  .element {\n\t font: bold italic small-caps 1em/1.6 Arial, Helvetica, sans-serif;\n  }"
  },
  {
    "id": "margin",
    "name": "margin",
    "longhand": "\n  .element {\n\t margin-top: 1em;\n\t margin-right: 1.5em;\n\t margin-bottom: 2em;\n\t margin-left: 2.5em; \n  } \n\n /* or */ \n\n  .element {\n\t margin-top: 1em;\n\t margin-right: .5em;\n\t margin-bottom: 1em;\n\t margin-left: .5em; \n  }",
    "shorthand": "\n  .element {\n\t margin: 1em 1.5em 2em 2.5em;\n  } \n\n /* or */ \n\n  .element {\n\t margin: 1em .5em;\n  }"
  },
  {
    "id": "padding",
    "name": "padding",
    "longhand": "\n  .element {\n\t padding-top: 1em;\n\t padding-right: 1.5em;\n\t paddin-bottom: 2em;\n\t padding-left: 2.5em; \n  } \n\n /* or */ \n\n  .element {\n\t padding-top: 1em;\n\t padding-right: .5em;\n\t padding-bottom: 1em;\n\t padding-left: .5em; \n  }",
    "shorthand": "\n  .element {\n\t padding: 1em 1.5em 2em 2.5em;\n  } \n\n /* or */ \n\n  .element {\n\t padding: 1em .5em; \n  }"
  },
  {
    "id": "list",
    "name": "list",
    "longhand": "\n  .element {\n\t list-style-type: square;\n\t list-style-position: inside;\n\t list-style-image: url(\"image.png\");\n  }",
    "shorthand": "\n  .element {\n\t list: square inside url(\"image.png\");\n  }"
  },
  {
    "id": "animation",
    "name": "animation",
    "longhand": "\n  .element {\n\t animation-name: motion;\n\t animation-duration: 2s;\n\t animation-timing-function: ease-in;\n\t animation-delay: 1s;\n\t animation-direction: alternate;\n\t animation-iteration-count: infinite;;\n\t animation-fill-mode: none;\n\t animation-play-state: running;\n  }",
    "shorthand": "\n  .element {\n\t animation: motion 2s ease-in 1s alternate infinite none running;\n  }"
  },
  {
    "id": "flex",
    "name": "flex",
    "longhand": "\n  .element {\n\t flex-grow: 1;\n\t flex-shrink: 1;\n\t flex-basis: auto;\n  }",
    "shorthand": "\n  .element {\n\t flex: 1 1 auto;\n  }"
  }
]

JavaScript code : 
const root = document.getElementById("root");

fetch("./shorthands.json")
  .then((res) => res.json())
  .then((data) => appendData(data))
  .catch((err) => console.log(err));

function appendData(data) {
  for (let i = 0; i < data.length; i++) {
    const syntaxContainer = document.createElement("div");
    syntaxContainer.classList.add("w-full", "py-5");

    syntaxContainer.innerHTML = `<div class="flex items-center" id="${data[i].id}">
          <img src="./hashtag.svg" alt="hashlink" class="w-8" />
          <h1 class="text-white text-3xl">${data[i].name}</h1>
        </div>
        <div class="mt-5 ml-2 text-white">
          <p class="text-lg">longhand</p>
          <pre id="pre" >
          <code class="language-css">${data[i].longhand}
              </code></pre>
        </div>
        <div class="mt-5 ml-2 text-white">
          <p class="text-lg">shorthand</p>
          <pre><code class="language-css ">${data[i].shorthand}
              </code></pre>
        </div>

        </div>
        `;

    root.appendChild(syntaxContainer);
  }
}
Nikhil
  • 31
  • 5

1 Answers1

1

I had a similar problem with some python code I wanted to render. Solved it by first passing the string to Prism.highlight(). So if your input string was input_str

html_with_highlight = Prism.highlight(input_str, Prism.languages.html, 'html'); syntaxContainer.innerHTML = html_with_highlight;

You can find the function documentation here.

Hope that helps!

alta_
  • 11
  • 3