def _GenerateAlignedHtml(hyp, ref, err_type):
  """Generate a html element to highlight the difference between hyp and ref.

  Args:
    hyp: Hypothesis string.
    ref: Reference string.
    err_type: one of 'none', 'sub', 'del', 'ins'.

  Returns:
    a html string with
      - error of hyp shown in "(hyp)"
      - error of ref shown in "<del>ref</def>"
      - all errors highlighted with yellow background
  """

  highlighted_html = ''
  if err_type == 'none':
    highlighted_html += '%s ' % hyp

  elif err_type == 'sub':
    highlighted_html += """<span style="background-color: yellow">
        '<del>%s</del>(%s) </span>""" % (hyp, ref)

  elif err_type == 'del':
    highlighted_html += """<span style="background-color: yellow">
        '<del>%s</del></span>""" % (
            hyp)

  elif err_type == 'ins':
    highlighted_html += """<span style="background-color: yellow">
        '(%s) </span>""" % (
            ref)

  else:
    raise ValueError('unknown err_type ' + err_type)

  return highlighted_html