Prismjs 框架源码分析
最新回答
失败统治
2022-01-21 11:00:50
Prism文档：prismjs.com/docs/index...
Prism源码：github.com/PrismJS/pris...
Prism源码喊缓分析仓库：github.com/0326/super-m...
Prism初始化逻辑：
Prism能自动初始化，也支持手动初始化，这取决于配置中的manual字段。
核心执行流程在于Prism.highlightAll方法，而该方法内部调用的是highlightAllUnder。
highlightAllUnder遍历文档中所有class为language-xxx或lang-xxx的容器，对匹配的容器元素进行高亮处理。
在此过程中，Prismjs使用hooks实现阶段回调，开发者可在此添加自定义逻辑。
hooks源码分析：
hooks实现简洁，Prismjs内部注册了多个hooks，按执行顺序依次为...
从hooks时序，可清晰了解Prismjs执行流程。
highlightElement源码分析：
简化处理，无异步及异常处理穗困，便于分析。
核心是通过tokenize对匹配文本进行分词，Token.stringify方法对分词进行处理，返回html结构文本信息，最后通过innerHTML插入页面，借助CSS主题样式实现高亮。
tokenize源码分析：
以CSS语法高亮为例，构造简单，假设页面有如下代码：
使用.language-css高亮CSS代码，Prism如何执行tokenize？
关键逻辑在matchGrammar方法，我们先看其定义。
构造CSS语法配置，定义匹配规则，如...
matchGrammar实现伪代码展示，最终构造tokenList链表并转化成tokenArray。
通过Token.stringify方法转化为html字符串，插入页面，显示高亮效果。
Prismjs核心流程至此，接下来介绍plugins机制。
plugins扩展Prismjs功能，保持代码精简，按需引入。prism-ccore挂空plugins对象，便于新增插件。
基于hooks，plugins在高亮过程的各个钩子节点实现自定义操作。
languages自动加载机制：
引入prism.js时，先引入主题样式文件，再引入prism-core.js和autoloader。
prism-core仅包含核心代码，autoloader检测页面语言种类，异步加载grammar配置脚本，执行highlightElement方法进行高郑族模亮。
Prismjs支持近300种语言高亮，使用autoloader即可。如遇不支持语言，可自行实现languages grammar分析及autoloader规则。
热门标签
