Markdown-it实现打字机AI对话效果

原创

一起重学前端

发布于 2024-09-23 15:25:23

markdown-it

markdown-it是一个流行的JavaScript库，用于将Markdown文本转换为HTML格式。它基于CommonMark规范，一个广泛使用的Markdown解析标准。markdown-it 提供了简单易用的AP

主要特点包括：

强大的解析能力：它能够准确地将 Markdown 文本转换为 HTML 格式，支持常见的 Markdown 语法元素，如标题、段落、列表、链接、图片、代码块等。
可扩展性：允许通过插件进行扩展，可以添加自定义的功能和语法支持。例如，可以添加对特定的数学公式渲染、任务列表、图表等的支持。
简洁高效：代码简洁，性能高效，能够快速处理大量的 Markdown 文本。
易于使用：在前端开发中，可以很容易地集成到各种项目中。通常只需要引入 markdown-it 的库文件，然后创建一个实例并调用其方法即可将 Markdown 文本转换为 HTML。

安装&使用

node.js & bower:

npm install markdown-it --save
bower install markdown-it --save

用法示例

简单用法

// node.js, 用“类”的方式：
var MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// 还是 node.js, 但使用更爽的方式：
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');

// 没有 AMD 的浏览器环境，在 js 脚本加载时才添加到“window”
// 注意，“markdownit” 中没有破折号。
var md = window.markdownit();
var result = md.render('# markdown-it rulezz!');

单行渲染，不进行段落换行：

var md = require('markdown-it')();
var result = md.renderInline('__markdown-it__ rulezz!');

插件加载

var md = require('markdown-it')()
            .use(plugin1)
            .use(plugin2, opts, ...)
            .use(plugin3);

语法高亮

使用 highlight 选项给围栏代码块应用语法高亮功能：

var hljs = require('highlight.js'); // https://highlightjs.org/

// 通常的默认值们
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    return ''; // 使用额外的默认转义
  }
});

或者使用完全的包裹器覆盖（如果你需要复制 class 到 <pre>）：

var hljs = require('highlight.js'); // https://highlightjs.org/

// 通常的默认值们
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

实现打字机AI对话效果

自定义插件光标cursor

// ### 自定义插件 光标
function plugin(md, options) {
        md.core.ruler.after("replacements", "cursor", (state) => {
          const cursor = new state.Token("html_inline", "span", 0);
          cursor.content = `<span class="${options.class || "curour"}" />`;
          let index = -1;
          for (let i = state.tokens.length - 1; i >= 0; i--) {
            if (state.tokens[i].type.indexOf("_close") === -1) {
              index = i;
              break;
            }
          }
          const item = state.tokens[index];
          if (item) {
            if (item.tag && item.tag !== "text") {
              item.attrs = [["class", options.class || "curour"]];
            } else {
              state.tokens.splice(index + 1, 0, cursor);
            }
          }
        });
      }
      
md.use(plugin, {
    class: "cursor",
});

setInterval模拟延迟数据流

通过isEnd模拟标记数据流完成，给content 加上对应className隐藏光标

  // setInterval模拟延迟数据流
      const printEffect = setInterval(() => {
        if (index < content.length) {
          c += content[index];
          index++;
        } else {
          isEnd = true;
          document.getElementById("content").classList.add("isEnd");
          clearInterval(printEffect);
        }
        document.getElementById("content").innerHTML = renderMarkDown(c);
}, 50);

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Markdown-it实现打字机AI对话效果</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
    <style>
      * {
      
      }
      .content {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
      }

      .cursor {
        display: inline-block;
        content: "";
        width: 10px;
        height: 10px;
        background: #141414;
        animation: blink 1s infinite;
      }
      .isEnd {
        .cursor {
          display: none;
        }
      }
      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div id="content"></div>

    <script>
      const md = new markdownit();

      const content = `
清华大学是中国顶尖的综合性研究型大学，属于中国的“C9联盟”成员之一，这是中国版的常春藤联盟，代表着中国最高水平的大学。清华大学也是“985工程”和“211工程”的重点建设高校。

学校招生信息：
- 招生办电话：010－62770334
- 学校官网URL：[清华大学官网](http://www.tsinghua.edu.cn)

专业实力和排名：
清华大学在工程学、计算机科学、建筑学、管理学等领域的专业实力在全球范围内都非常突出。例如，其工程技术学科在2023年QS世界大学专业排名中位列全球第一。此外，清华大学的其他许多专业也在国内外排名中位居前列。

师资力量：
清华大学拥有一支高水平的教师队伍，包括众多中国科学院和中国工程院院士。学校注重引进和培养高水平的教师，不断提升教学和科研水平。`;

      const renderMarkDown = (text) => {
        return md.render(text);
      };

      let index = 0;
      let c = "";
      let isEnd = false;
      // setInterval模拟延迟数据流
      const printEffect = setInterval(() => {
        if (index < content.length) {
          c += content[index];
          index++;
        } else {
          isEnd = true;
          document.getElementById("content").classList.add("isEnd");
          clearInterval(printEffect);
        }
        document.getElementById("content").innerHTML = renderMarkDown(c);
      }, 50);
    </script>
  </body>
</html>

最后

Markdown-it还有很多拓展插件，比如和mathjax结合一起渲染输出公式等等。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S9

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S9

登录后参与评论

0 条评论

热度

Markdown-it实现打字机AI对话效果

Markdown-it实现打字机AI对话效果

markdown-it

安装&使用

用法示例

简单用法

插件加载

语法高亮

实现打字机AI对话效果

自定义插件光标cursor

setInterval模拟延迟数据流

完整代码

最后

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐