Uncaught ReferenceError: MARKED_JS is not defined Uncaught ReferenceError: HIGHLIGHT_JS is not defined Uncaught ReferenceError: JS is not defined

Fix Plan

To fix the issue, we can modify the code to use regular expressions for replacement, allowing for whitespace characters. Here are the steps:

• Update the replacement code to use a regular expression that matches the placeholder with optional whitespace characters:

const regex = new RegExp(`{{\\s*MARKED_JS\\s*}}`, 'g');
const replacedHtml = html.replace(regex, markedJs);

• Repeat the same process for HIGHLIGHT_JS and JS placeholders:

const highlightRegex = new RegExp(`{{\\s*HIGHLIGHT_JS\\s*}}`, 'g');
const jsRegex = new RegExp(`{{\\s*JS\\s*}}`, 'g');
const replacedHtml = html
  .replace(regex, markedJs)
  .replace(highlightRegex, highlightJs)
  .replace(jsRegex, js);

Verification

To verify that the fix worked, check the generated HTML file for the correct replacement of the placeholders. The JavaScript variables should now be defined, and the browser console should no longer report the Uncaught ReferenceError.

Extra Tips

• Consider adding a format ignore rule for the template.html file to prevent similar issues in the future.
• If using a formatting tool like Prettier, configure it to ignore the template.html file or use a different formatting option that preserves the placeholders.