[技術博客]React Native——HTML頁面代碼高亮&數學公式解析

問題起源

1. 原有博文顯示時代碼沒法高亮，白底黑字的視覺效果很差。
2. 原有博文中沒法解析數學公式，致使頁面會直接顯示數學公式源碼。
   爲了解決這兩個問題，嘗試了一些方法，最終利用開源類庫實現了頁面美化。

（失敗的）嘗試方案

1. 經過API https://api.cnblogs.com/api/blogposts/博文ID/body 獲取到博文的內容。
2. 斷點獲得內容以後發現是原有markdown形式博文轉換後的HTML，好比：

<h2 id="github地址">1. GitHub地址</h2>
<p><a href="https://github.com/swearitagain/wordlist" class="uri">https://github.com/swearitagain/wordlist</a></p>
<h2 id="項目預估開發時間實際開發時間">2. 項目預估開發時間&amp;實際開發時間</h2>
<table>
...
</table>

1. 最開始考慮將上述內容轉換爲Markdown格式，參考html2markdown
2. 再使用開源Markdown解析庫渲染代碼塊
3. 方案失效的緣由在於博客園對外API返回的HTML中帶有特殊標籤，最終不能成功實現渲染。

代碼分析

代碼高亮實現

嘗試了多種開源Markdown解析引擎以後無果，考慮到簡化渲染的步驟，嘗試直接對返回的HTMl進行渲染。

翻閱各類資料以後決定使用react-native-syntax-highlighter

react-native-syntax-highlighter是用來渲染html的JS腳本，可是並不能直接使用在組件中，因此考慮經過對於特定標籤<code>進行渲染的方式來加載腳本。

//1. 首先從CDN引用CSS和JS
//2. 而後在頁面加載以前對於全部的<pre code>標籤進行highlight
    let code_highlight = `
            <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
            <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
            <script>hljs.initHighlightingOnLoad();</script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('pre code').each(function(i, block) {
                        hljs.highlightBlock(block);
                    });
                });
            </script>
                     `;

解析以後的效果：

數學公式解析

有了代碼解析的先例以後，數學公式解析的方案就比較明確了：

嘗試各類開源庫——>在頁面生成前進行解析——>完成效果

使用MathJax開源類庫進行渲染，一個基本的例子：

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
});
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

相似代碼渲染的方式：

let code_highlight = `
            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript">
                $(document).ready(function() {
                    MathJax.Hub.Config({
                        tex2jax: {
                            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
                            ignoreClass:"class1"
                            }
                        });
                });
            </script>
            `;

解析以後的效果：