[技术博客]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>
            `;

解析之后的效果:

原文地址:https://www.cnblogs.com/PureMan6/p/10946941.html

时间: 2024-10-17 07:37:10

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

[技术博客]react native事件监听、与原生通信——实现对通知消息的响应

在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数,此时可能会用到react-navigation来传递:此外,若要将异步函数.不可预料的事件执行等得到的参数用于页面刷新时,前述的方法都不太奏效. DeviceEventEmitter react-native中采用了DeviceEventEmitter来实现对事件的监听,实现非父子关系的页面之间的

个人技术博客的选择:CSDN、博客园、简书、知乎专栏还是Github Page?(转)

个人技术博客的选择:CSDN.博客园.简书.知乎专栏还是Github Page? 有很多技术人员在学习到一定程度后发现了写博客的重要性,一方面帮助自己记忆,一方面也能帮助他人解决问题,于是会选择自己开始写博客,之后又发现平台太多不知从何下手,在这里我根据自己写博客的经验比较一下各个平台的优缺点. 这里主要对比CSDN.博客园.简书.知乎专栏.Github Page.个人建站和其他 CSDN 笔者是CSDN的长期用户,也见到了很多不错的CSDN博客 优点 SEO做得好,无论是百度还是google(

手把手教你建github技术博客by hexo

适合人群 喜欢写Blog的人 有一定的编程基础 爱折腾的人 熟练使用版本控制Git 了解使用Github 熟悉基本的MarkDown语法 环境准备 安装Git 下载 msysgit 并执行即可完成安装. 安装Node.js 在 Windows 环境下安装 Node.js 非常简单,仅须下载安装文件并执行即可完成安装. 安装hexo 利用 npm 命令即可安装.(在任意位置点击鼠标右键,选择Git bash) npm install -g hexo 问题 * npm ERR! registry e

创建GitHub技术博客全攻略

说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本文中假设用户名为 tiemaocsdn 1. 注册账号:地址: https://github.com/输入账号.邮箱.密码,然后点击注册按钮. 图1 第1步 2. 初始设置注册完成后,选择Free免费账号完成设置. 图2 第2步 2.1 验证邮箱请打开你的邮箱,查看发送给你的确认邮件,你需要验证邮箱后,后面生成的个人主页才会被接受和发布. 3. 创建页面仓库地址:

价值博客们,技术博客

www.raychase.net http://mindhacks.cn 程序员博客墙blogwall.us http://www.cppblog.com/vczh MacTalk-池建强的随想录 Fenng DBA Notes | 闲思录robbin的自言自语风雪之隅-Laruence的博客 blog.vgod.tw 张琮翔的Blog:愛好電腦.科技.程式設計,目前在MIT電腦科學與人工智慧實驗室就讀博士班,尋找人機互動與程式設計交會的創新火花. MIT CSAIL的PhD,现在毕业开始创业了

[转]有哪些值得关注的技术博客(Java篇)

有哪些值得关注的技术博客(Java篇) 大部分程序员在自学的道路上不知道走了多少坑,这个视频那个网站搞得自己晕头转向.对我个人来说我平常在学习的过程中喜欢看一些教程式的博客.这些博客的特点: 1.总结知识点相对比较全面 2.一般来说讲解知识点通俗易懂 3.路线比较清晰,不会有太多的冗余内容. 这样一来,对于自学的朋友来说,一些专业的博客不但大量的缩减了你得学习时间.提高了学习效率.更重要的是这些博客能培养你对编程的兴趣. 于是,这几期文章会主要推荐一些技术博客,目前计划打算主要分为: (已完) 

如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛

    如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己就能找出规律和技巧.所以,要写出高质量的技术博客,首先要解决为什么要写的问题. 为什么要写 我一直很喜欢的一个学习方法是 Learning by teaching 一个课题,如果你能给不懂的人解释清楚,说明你对这个课题的理解足够深入.把一个课题展开来写,你可能会发现某些方面你还写不清楚,这往往说明你

程序猿的技术博客Android客户端--博客园篇

2015年尾了,闲了半年,也忙了半年 年尾了,趁着不忙的这段时间,好好梳理梳理 每天逛逛技术博客的习惯从大学一直延续到现在,博客园,csdn,iteye,51CTO,ITPUB之类的 浏览器里面一个个书签,每次打开又关上,一天天重复,一天天的了解着最新的技术资源 终于开始想着,开发一个Android的app来把这些资源整合起来,不仅能节约时间,还能趁机会好好检验下近一年来Android的技术 先上图,今天晚上才开始的 目前:暂时只有博客园首页的文章列表和文章详情的展示界面 主要涉及技术点: 1.

iOS大神技术博客

唐巧的技术博客 http://blog.devtang.com/atom.xml OneV's Den http://onevcat.com/atom.xml 破船之家 http://beyondvincent.com/atom.xml NSHipster http://nshipster.cn/feed.xml Limboy 无网不剩 http://feeds.feedburner.com/lzyy Lex iOS notes http://ios.lextang.com/rss 念茜的博客