🐭喂汁,用Python写个专属Markdown转换工具(下)

简介: 一直使用 Markdown 语法编写文章,然后用Markdown转换工具转换下

④ 四鞭 → 图片、链接


这里有个坑要注意下,笔者再这里卡了好一段时间,手滑按了tab缩进:


网络异常,图片无法展示
|


渲染后的代码:


网络异常,图片无法展示
|


这里是被当成代码块处理了,改为没缩进,或一两个空格缩进就可以了。 同样,抠出样式模板:


网络异常,图片无法展示
|


重写函数渲染模板:


网络异常,图片无法展示
|


这里也有个坑,mistune中会把每一行都当做段落,然后把在这个上面又套一层样式,所以还需要修改下段落渲染函数:


网络异常,图片无法展示
|


传参校验:


网络异常,图片无法展示
|


效果如下:


网络异常,图片无法展示
|


⑤ 五鞭 → 代码高亮、引用、行内代码


代码块的渲染亦称代码高亮,看了网上大部分转换工具,使用的都是使用 highlight.js,样式多多:highlightjs.org/


这里是Python,直接调js渲染有些麻烦,这里使用 pygments代码高亮库 来替换,样式及预览可到下述链接挑选:pygments.org/demo/


pip命令安装一波库:


pip install Pygaments


使用方式也很简单:


网络异常,图片无法展示
|


参数简述:


  • noclasses=True:设置不生成css文件,即使用HTML内联样式;
  • style='perldoc':设置主题;
  • wrapcode=True:使用<code>包裹渲染后的代码;


复制到编辑器看下效果:


网络异常,图片无法展示
|


这里坑可多着呢,罗列下:


  • ① 代码超过屏幕,没有显示横向滚动条,需添加 overflow-x: auto;
  • ② 字体大了,设置12px为佳,要为每个span标签的style属性添加 font-size: 12px;
  • ③ 如下图,代码中的部分字符串没有用span包裹,大小不一,需外层套一个span包裹;


网络异常,图片无法展示
|


此处使用lxml操作节点元素增删及属性修改,具体代码如下:


网络异常,图片无法展示
|


传参校验:


网络异常,图片无法展示
|


字体大小和滚动条都出来了,看似没啥问题了,但如果你点击手机上预览:


网络异常,图片无法展示
|


卧槽,全乱了,有些代码挤在一行上了,归根到底还是换行符\n被微信吃了呗,看了下其他工具的做法:


添加 → white-space:nowrap,指定文本不换行,直到遇到<br>为止。


所以我们需要在合适的地方插入<br>标签,就在lxml解析前加吧:


网络异常,图片无法展示
|


看下手机上的效果:


网络异常,图片无法展示
|


换行倒是换行了,就是前面的缩进没了,看了下别的工具的做法:


前面加上缩进对应数量的&nbsp;


所以,还需要统计每行前面的空格,补上对应数量的&nbsp;


网络异常,图片无法展示
|


看下手机上的效果:


网络异常,图片无法展示
|


好家伙,可以了,也算是把代码块的坑都踩完了!


然后把引用的样式也补上吧:


网络异常,图片无法展示
|


传参校验:


网络异常,图片无法展示
|


最后,把行内代码的样式也补上


网络异常,图片无法展示
|


传参校验:


网络异常,图片无法展示
|


常用结点的解析渲染就讲解到这里,然后就是全文渲染的微调了,换行,各种解析冲突处理啊,限于篇幅,就不一一讲解了,可以参考仓库中的最新代码。


0x5、传统功夫以点到为止


正文的渲染就这样,另外一般公号喜欢每一篇都加上一个特定的头部和尾部,这个简单,直接偷两个样式保存成html模板,正文渲染完后,拼接即可,写下简单示例吧:


网络异常,图片无法展示
|


点击预览,手机看下效果:


网络异常,图片无法展示
|


效果还是很赞的,踩N多坑+写文,总耗时三天,终于把这个工具的雏形做出来了;

尽管它还不完整,不是很人性化,目前只有一个主题,还有各种未知的BUG,鸡动,久违的成就感;


仓库地址github.com/coder-pig/h…


相关文章
|
17天前
|
机器学习/深度学习 数据可视化 搜索推荐
Python在社交媒体分析中扮演关键角色,借助Pandas、NumPy、Matplotlib等工具处理、可视化数据及进行机器学习。
【7月更文挑战第5天】Python在社交媒体分析中扮演关键角色,借助Pandas、NumPy、Matplotlib等工具处理、可视化数据及进行机器学习。流程包括数据获取、预处理、探索、模型选择、评估与优化,以及结果可视化。示例展示了用户行为、话题趋势和用户画像分析。Python的丰富生态使得社交媒体洞察变得高效。通过学习和实践,可以提升社交媒体分析能力。
30 1
|
19天前
|
机器学习/深度学习 数据可视化 数据挖掘
Python数据分析工具有哪些
【7月更文挑战第3天】Python数据分析工具有哪些
122 58
|
8天前
|
SQL API Python
`bandit`是一个Python静态代码分析工具,专注于查找常见的安全漏洞,如SQL注入、跨站脚本(XSS)等。
`bandit`是一个Python静态代码分析工具,专注于查找常见的安全漏洞,如SQL注入、跨站脚本(XSS)等。
|
8天前
|
网络协议 安全 Shell
`nmap`是一个开源的网络扫描工具,用于发现网络上的设备和服务。Python的`python-nmap`库允许我们在Python脚本中直接使用`nmap`的功能。
`nmap`是一个开源的网络扫描工具,用于发现网络上的设备和服务。Python的`python-nmap`库允许我们在Python脚本中直接使用`nmap`的功能。
|
5天前
|
数据采集 并行计算 数据处理
工具人必看:Python并发编程工具箱大揭秘,IO与CPU密集型任务的最佳拍档!
【7月更文挑战第16天】Python并发编程助力IO密集型(asyncio+aiohttp,异步Web爬虫示例)和CPU密集型(multiprocessing,并行计算数组和)任务。asyncio利用单线程异步IO提升Web应用效率,multiprocessing通过多进程克服GIL限制,实现多核并行计算。善用这些工具,可优化不同场景下的程序性能。
10 1
|
17天前
|
数据可视化 数据挖掘 API
数据可视化秘籍聚焦Python的Matplotlib和Seaborn库,它们是数据分析的得力工具。
【7月更文挑战第5天】数据可视化秘籍聚焦Python的Matplotlib和Seaborn库,它们是数据分析的得力工具。Matplotlib是基础库,提供高度自定义的2D图表,而Seaborn在其上构建,提供美观的统计图形。文章介绍了如何用两者画线图、散点图、条形图、饼图和直方图,展示数据趋势和关系。
|
25天前
|
数据可视化 数据挖掘 知识图谱
精选:15款顶尖Python知识图谱(关系网络)绘制工具,数据分析的强力助手
这里有15款免费工具推荐:NetworkX(Python基础),Graph-tool(C++速度),Graphviz(可视化库),ipycytoscape(Jupyter集成),ipydagred3,ipySigma(NetworkX + Web),Netwulf(交互式),nxviz(Matplotlib绑定),Py3plex(复杂网络分析),Py4cytoscape(Python+Cytoscape),pydot(Graphviz接口),PyGraphistry(GPU加速),python-igraph,pyvis(交互式图形),SNAP(大规模网络分析)。绘制和理解网络图从未如此简单!
32 0
|
1月前
|
Linux 开发者 iOS开发
Python常用打包工具比较
以上是常用的四种打包工具比较。各自有着自己的优缺点,开发者可以根据自己的需求来选择合适的工具。如果你只需要在 Windows 平台上运行应用程序,可以选择 py2exe。如果你需要跨平台支持,并且希望打包过程简单,可以选择 Briefcase。如果你需要支持多个平台,并且打包过程比较复杂,可以选择 cx_Freeze。如果你需要支持多个平台,并且对第三方库的兼容性有较高的要求,可以选择 PyInstaller。
23 4
|
8天前
|
数据可视化 Python
时间序列分析是一种统计方法,用于分析随时间变化的数据序列。在金融、经济学、气象学等领域,时间序列分析被广泛用于预测未来趋势、检测异常值、理解周期性模式等。在Python中,`statsmodels`模块是一个强大的工具,用于执行各种时间序列分析任务。
时间序列分析是一种统计方法,用于分析随时间变化的数据序列。在金融、经济学、气象学等领域,时间序列分析被广泛用于预测未来趋势、检测异常值、理解周期性模式等。在Python中,`statsmodels`模块是一个强大的工具,用于执行各种时间序列分析任务。
|
8天前
|
存储 开发者 网络架构
在Python中,`setuptools`是一个强大的工具,用于帮助开发者打包和分发他们的Python代码库。
在Python中,`setuptools`是一个强大的工具,用于帮助开发者打包和分发他们的Python代码库。