[技术博客]React Native——HTML页面代码高亮&数学公式解析

问题起源

1. 原有博文显示时代码无法高亮，白底黑字的视觉效果不好。
2. 原有博文中无法解析数学公式，导致页面会直接显示数学公式源码。
   为了解决这两个问题，尝试了一些方法，最终利用开源类库实现了页面美化。

（失败的）尝试方案

1. 通过API https://api.cnblogs.com/api/blogposts/博文ID/body 获取到博文的内容。
2. 断点得到内容之后发现是原有markdown形式博文转换后的HTML，比如：

1. GitHub地址
https://github.com/swearitagain/wordlist
2. 项目预估开发时间&实际开发时间

...

1. 最开始考虑将上述内容转换为Markdown格式，参考html2markdown
2. 再使用开源Markdown解析库渲染代码块
3. 方案失效的原因在于博客园对外API返回的HTML中带有特殊标签，最终不能成功实现渲染。

代码分析

代码高亮实现

尝试了多种开源Markdown解析引擎之后无果，考虑到简化渲染的步骤，尝试直接对返回的HTMl进行渲染。

翻阅各种资料之后决定使用react-native-syntax-highlighter

react-native-syntax-highlighter是用来渲染html的JS脚本，但是并不能直接使用在组件中，所以考虑通过对于特定标签进行渲染的方式来加载脚本。

//1. 首先从CDN引用CSS和JS
//2. 然后在页面加载之前对于所有的
标签进行highlight
    let code_highlight = `
            
            
            
            
            
                     `;
 
 
解析之后的效果：
 
 
 
 
数学公式解析
 
 
有了代码解析的先例之后，数学公式解析的方案就比较明确了：
 
 
尝试各种开源库——>在页面生成前进行解析——>完成效果
 
 
使用MathJax开源类库进行渲染，一个基本的例子：
 
 

 
 
类似代码渲染的方式：
 
 
            let code_highlight = `
            
            `;
 
 
解析之后的效果：