问题起源

  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>
`;

解析之后的效果:

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

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

    在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...

  2. HelloDjango 第 09 篇:让博客支持 Markdown 语法和代码高亮

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...

  3. 50家硅谷IT公司技术博客

    分享一下 50 家硅谷优秀 IT 公司技术博客,从中可以了解企业文化,技术特色和设计语言,如果直接列出来很单调,加上点评,算吐槽版吧. 知名大厂   1. Facebook https://www.f ...

  4. 技术博客——微信小程序的架构与原理

    技术博客--微信小程序的架构与原理 在两个月的微信小程序开发过程中,我曾走了不少弯路,也曾被很多现在看来十分可笑的问题所困扰.这些弯路与困扰,基本上都是由于当时对小程序的架构理解不够充分,对小程序的原 ...

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

    有哪些值得关注的技术博客(Java篇)   大部分程序员在自学的道路上不知道走了多少坑,这个视频那个网站搞得自己晕头转向.对我个人来说我平常在学习的过程中喜欢看一些教程式的博客.这些博客的特点: 1. ...

  6. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  7. 一文搞定scrapy爬取众多知名技术博客文章保存到本地数据库,包含:cnblog、csdn、51cto、itpub、jobbole、oschina等

    本文旨在通过爬取一系列博客网站技术文章的实践,介绍一下scrapy这个python语言中强大的整站爬虫框架的使用.各位童鞋可不要用来干坏事哦,这些技术博客平台也是为了让我们大家更方便的交流.学习.提高 ...

  8. 创建GitHub技术博客全攻略【转】

    本文转载自:http://blog.csdn.net/renfufei/article/details/37725057/ 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比 ...

  9. 技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客

    上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中 ...

随机推荐

  1. css, js 项目练习之网页换肤

    首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调). HTML: <nav> <li>< ...

  2. 浏览器标签页切换时jquery动画的问题

    最近公司在做大屏设备上的页面,其中动画的部分居多,开始的时候是用的jquery做的动画,在做完后无意中发现jquery动画存在一个问题,就是浏览器在切换标签页后,过段时间切换回来页面中的动画会出现连续 ...

  3. Java 之 LinkedHashSet 集合

    一.概述 java.util.LinkedHahset 集合 extends HashSet 集合 在HashSet下面有一个子类java.util.LinkedHashSet,它的底层是一个哈希表( ...

  4. nano命令

    1. 禁止自动换行 # nano -w xxx 2. 保存 Ctrl+O 3. 退出 Ctrl+X 4. 撤销 在请求确认文件名时按Ctrl+C来取消 5. 剪切 Ctrl+K 移动多行,只需多按几次 ...

  5. Thinkphp5.1允许uni-app的H5跨域请求接口解决方法

    情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...

  6. pecl安装php扩展

    Pecl全称The PHP Extension Community Library,php社区扩展库,由社区编写,维护. 使用pecl方便之处在于我们不用到处找源码包下载编译,配置,不用手动phpiz ...

  7. Dapper: How to get return value ( output value) by call stored procedure

    使用Dapper 执行存储过程插入一条数据,同时返回主键 Dapper 的参数类型有以下四种 System.Data.ParameterDirection public enum ParameterD ...

  8. Python3如何上传自己的PyPI项目

    有过一定的 Python 经验的开发者都知道,当引入第三方包时,我们常常会使用 pip install 命令来下载并导入包. 那么,如何写一个自己的包,上传到 PyPI 呢,其他开发者也可以通过 pi ...

  9. css3 -webkit-image-set 设置不同分辨率 背景图片

  10. ffmpeg的源码调试

    转自:windows下使用Visual Studio编译可以调试的FFmpeg 2017年01月05日 13:33:39 阅读数:3654 因本人主要在windows环境下开发,Linux下的gpb调 ...