问题起源

原有博文显示时代码无法高亮,白底黑字的视觉效果不好。

原有博文中无法解析数学公式,导致页面会直接显示数学公式源码。 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化。

(失败的)尝试方案

通过API https://api.cnblogs.com/api/blogposts/博文ID/body 获取到博文的内容。

断点得到内容之后发现是原有markdown形式博文转换后的HTML,比如:

1. GitHub地址

https://github.com/swearitagain/wordlist

2. 项目预估开发时间&实际开发时间

...

最开始考虑将上述内容转换为Markdown格式,参考html2markdown

再使用开源Markdown解析库渲染代码块

方案失效的原因在于博客园对外API返回的HTML中带有特殊标签,最终不能成功实现渲染。

代码分析

代码高亮实现

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

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

//1. 首先从CDN引用CSS和JS

//2. 然后在页面加载之前对于所有的

标签进行highlight

let code_highlight = `

$(document).ready(function() {

$('pre code').each(function(i, block) {

hljs.highlightBlock(block);

});

});

`;

解析之后的效果:

数学公式解析

有了代码解析的先例之后,数学公式解析的方案就比较明确了:

尝试各种开源库——>在页面生成前进行解析——>完成效果

使用MathJax开源类库进行渲染,一个基本的例子:

MathJax.Hub.Config({

tex2jax: {

inlineMath: [ ['$','$'], ["\\(","\\)"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ]

}

});

类似代码渲染的方式:

let code_highlight = `

$(document).ready(function() {

MathJax.Hub.Config({

tex2jax: {

inlineMath: [ ['$','$'], ["\\(","\\)"] ],

displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],

ignoreClass:"class1"

}

});

});

`;

解析之后的效果:

php中高光显示的高数,[技术博客]React Native——HTML页面代码高亮数学公式解析...相关推荐

  1. 不花钱不费力,Hexo + GitHub 五分钟教你免费搭一个高逼格技术博客

    引言 作为程序员拥有一个属于自己的个人技术博客,绝对是百利无一害的事,不仅方便出门装b,面试时亮出博客地址也会让面试官对你的好感度倍增.经常能在很多大佬的技术文章的文末,看到这样一句话: " ...

  2. 如何写出高质量的技术博客

    一.前言:你的博客你做主 有点标题党了.在作者刚入行时,还是个积极上进的好青年.每天浏览各种技术博客和论坛,QQ群里也是常有作者的身影.可时间长了,作者就发现,你不用Google真的就搜不出来你想要的 ...

  3. 我从写技术博客中收获到了什么?- J_Knight_

    我是 J_Knight_,熟悉我的人都应该知道我是一名刚工作满3年的非科班 iOS 开发者,而且一直坚持写技术博客快有2年半的时间了. 其实从去年开始就一直想分享我写博客的心得,但是一直也没有找到合适 ...

  4. 手把手教你写高质量Android技术博客,画图工具,录像工具,Markdown写法

    前言 作为程序员,写博客是一件很有意义的事情,可以加深自己对技术的理解,可以结交更多的朋友,记录自己的技术轨迹,而且分享可以让更多的人从中受益,独乐乐不如众乐乐嘛. 但是要写好博客也不是件容易的事,一 ...

  5. html5互动场景制作系统,春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版发布...

    经过一个月的艰苦努力,春哥团队最新作品即将与大家见面了,<2015年6月春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版>即将来临, 现在春哥接受预定啦,春哥技术博客依然走价格 ...

  6. 高质量 iOS 博客推荐(iOS界技术大牛)

    推荐一些我个人认为非常经典,值得关注的博客. OneV's Den 大家尊称为喵神 @onevcat 的博客.对 Swift 技术在国内的推广做了很大的贡献. Limboy's HQ 李忠关于 RAC ...

  7. 技术博客,从零到数万访问,这两年我都做了什么

    作为一名有追求的程序猿,我是不会满足于每天重复性的搬砖和写bug的.为了能够让自己显得更有"价值",我决定去做一件非常有意义的事情,那就是写技术博客.因为我觉得"分享&q ...

  8. 容器编排中的容器编排技术博客

    文章目录 <容器编排中的容器编排技术博客> <容器编排中的容器编排技术博客> 引言 1.1. 背景介绍 随着云计算和 DevOps 的兴起,容器化技术逐渐成为构建可扩展.灵活. ...

  9. iOS开发中一些优秀的技术博客

    //王魏 https://onevcat.com/#blog //唐巧 http://blog.devtang.com //kitten http://kittenyang.com/page/2/ / ...

最新文章

  1. springboot单例模式注入对象_springboot 请求流程简介
  2. java系统界面找不到符号,找不到符号,java找不到符号
  3. 2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
  4. 友盟的微信登录,QQ,新浪微博登录功能和分享功能
  5. 文本挖掘之 文本相似度判定
  6. 物业管理系统源码java_Java小区物业管理系统 源码报告下载
  7. 多目标跟踪算法FairMOT
  8. 基于keras+VGG-16的小数据集多分类图像识别(附代码数据集)
  9. 为什么宁愿工资低点,也不建议去外包公司?
  10. GBA开发入门(转收藏)
  11. h5广告与html5,什么才是H5广告?
  12. prince2 成功的项目管理_学员心得 | 宋文彬:学习PRINCE2的心路历程
  13. Win10系统此电脑隐藏特定文件夹
  14. 2022年全球与中国超级电容器市场现状及未来发展趋势
  15. 二层交换机VLAN基础配置
  16. 服务器的主要防护手段有哪些
  17. anistropic filer
  18. 单线激光雷达(Lidar)学习三:使用雷达数据/scan转/PointCloud后生成鸟瞰图
  19. Houdini_grass_sim (关于植物结算)
  20. WOT干货大放送:大数据架构发展趋势及探索实践分享

热门文章

  1. 我们为什么使用Node
  2. 简单实现TabBar的自定义
  3. 2014.8.20日结
  4. android.graphics.Color 包含颜色值
  5. Winform 显示Gif图片
  6. mysql压缩包安装教程8.0.19,win10安装zip版MySQL8.0.19的教程详解
  7. 开关电源怎么测试文波_开关电源环路增益测试
  8. 统计一行文本的单词个数_NLP中的文本表示方法
  9. js获取display的值_JS实现多行溢出省略号思路
  10. 给表中指定位置添加字段_利用VBA代码,轻松完成向工作表中添加指定图片到指定位置...