Typewriter库：如何在typeString()中添加<与>字符？

问题根源 #

当你使用HTML实体（如<、<）时，Typewriter会将这些实体字符串原样输出，并未解析为对应的<和>；而直接写<和>时，若Typewriter默认开启HTML解析，会将它们当成HTML标签处理，不会显示为文本内容。

可行解决方案 #

方案1：禁用HTML解析，直接使用原生字符

通过options关闭Typewriter的HTML解析功能，这样所有内容都会作为纯文本渲染，<和>可直接写入字符串：

<Typewriter
  options={{ html: false }}
  onInit={(typewriter) => {
    typewriter
      .typeString("import Aadesh from 'org'")
      .pauseFor(1500)
      .typeString("\nconst App() = <Aadesh />")
      .start();
  }}
/>

方案2：解码HTML实体后传入（保留HTML解析）

如果需要保留HTML标签（比如用<div>实现换行），可以先将包含实体的字符串解码为原生字符，再传给typeString：

// 定义HTML实体解码函数
function decodeHtmlEntities(str) {
  const tempElement = document.createElement('div');
  tempElement.innerHTML = str;
  return tempElement.textContent;
}

<Typewriter
  onInit={(typewriter) => {
    typewriter
      .typeString("<div>import Aadesh from 'org'</div>")
      .pauseFor(1500)
      .typeString(decodeHtmlEntities("<div>const App() =&#62; &#60; Aadesh /&#62; </div>"))
      .start();
  }}
/>

内容的提问来源于stack exchange，提问作者Aadesh Kulkarni