Enhance On-Page Assessments with Custom Headings Display

  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  headings.forEach(heading => {
    const tagName = heading.tagName;
    const prefixText = `[${tagName}] `;
    const firstChild = heading.firstChild;
    const isSpan = firstChild && firstChild.nodeType === Node.ELEMENT_NODE && firstChild.tagName === 'SPAN';
    const hasPrefix = isSpan && firstChild.textContent.trim() === prefixText.trim();
    if (!hasPrefix) {
      const prefixSpan = document.createElement('span');
      prefixSpan.textContent = prefixText;
      prefixSpan.style.background = '#ff0000';      // Red background
      prefixSpan.style.padding = '10px';            // 10px padding
      prefixSpan.style.color = '#fff';              // White text color
      prefixSpan.style.marginRight = '10px';        // 10px right margin
      prefixSpan.style.borderRadius = '3px';        // 3px border-radius
      heading.insertBefore(prefixSpan, firstChild);
    }
  });
})();```
And here it is in bookmark format: