v148 · HTML · DOM

Annotation Stream

Use processing instructions as annotation markers in an HTML document. Edit the markup with <?highlight start?>, <?comment start?>, and <?todo start?> PIs — Chrome 148 parses them into ProcessingInstruction nodes, and the renderer extracts annotation ranges from the DOM.

Checking ProcessingInstruction parsing support…

HTML with processing instructions

Parse to see DOM tree.

Rendered with annotations

Click "Parse & render" to see the output.

How it works

// Chrome 148: HTML parser preserves processing instructions
const parser = new DOMParser();
const doc = parser.parseFromString(`
  <p>Normal text
  <?highlight start?>important phrase<?highlight end?>
  more text</p>
`, 'text/html');

// Walk nodes looking for ProcessingInstruction
const walker = doc.createTreeWalker(doc.body,
  NodeFilter.SHOW_PROCESSING_INSTRUCTION);
let node;
while ((node = walker.nextNode())) {
  // node.target === 'highlight', node.data === 'start' or 'end'
  console.log(node.target, node.data);
}

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗