代码高亮插件+打字效果 highlight+marked.js+typing.js

文档

1.highlight

highlight.js 中文文档 (cndoc.wiki)

Download a Custom Build - highlight.js (highlightjs.org)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js">
</script> 
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>

1.直接全局应用

hljs.initHighlightingOnLoad();

2.部分渲染

hljs.highlightElement(ele);

2.marked.js

GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script> document.getElementById('content').innerHTML = marked.parse('# Marked in browser\n\nRendered by **marked**.'); </script>

Markdown源代码分解为token流

const lexer = new marked.Lexer();

解析效果

3.typing.js

cdn.jsdelivr.net/npm/typed.j…

var typing = new Typing({
     source: div,
     output: document.getElementsByClassName('chat-loading')[0],
     scrollDiv: document.getElementById('chat-body'),
     delay: 30
 });
typing.start();