ExASIC
分享让工作更轻松

Markdown博客中让图片居中

我们知道在标准markdown中,不带有图片的位置信息,如居中。比如下面是常见的引用图片的方法,经parsedown解析后的html是<p><img /></p>的形式。

![exasic logo](image/exasic.png)
<p><img src="image/exasic.png" alt="exasic logo" /></p>

一些markdown的扩展方法

某编辑器

{:tag=value}的方法来定义额外的属性,然后由parser解析这些属性。

![test image size](url){:class="img-responsive"}
![test image size](url){:height="50%" width="50%"}
![test image size](url){:height="100px" width="400px"}
csdn

通过在图片url后面附加一些特殊字符来表示对齐和大小:

带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30)
居中的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center)
居中并且带尺寸的图片: ![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)
Typora

Typora中的markdown不支持图片对齐和调整大小,而是通过插入html来实现。

Currently Typora does not support image alignment. But you could use HTML code like <center>![img](src)</center> to align images on exported HTML or PDF. Typora allows to use <img> tag for displaying images, which can also be used to adjust the size of images.

上面提到的这些方案都需要扩展parser的功能,比较繁琐。

本博客中的方案

本博客中采用后处理的方式,用特殊格式把对齐方式定义在alt文字里,只需要一条正则语句就可以实现。

如下,用:center|left|right:的方式来扩展。

![exasic logo:center:](image/exasic.png)

那么,这markdown经解析后,就变成了,

<p><img src="image/exasic.png" alt="exasic logo:center:" /></p>

然后重点来了,我们只需要识别:center:,并在<p>中增加style属性或class即可。用正则来实现:

// $pd_html = $Parsedown->text($contents);
echo preg_replace('/<p><img(.*):(\w+):(.*)<\/p>/u', '<p style="text-align:$2;"><img$1$3 </p>', $pd_html);

就用这一行正则,我们就得到了需要的html。

<p style="text-align:center;"><img src="image/exasic.png" alt="exasic logo" /></p>

注:

$ret = preg_replace($pattern, $replacement, $orignal, $limit, $count)
$pattern 正则表达式
$replacement 替换字符串
$orignal 原始字符串
$limit 替换的最大次数,默认-1,全部替换
$count 指定替换次数

难点及总结

对于图片居中,并不能简单设置img标签的css实现。必须要设置img的上层p的text-align为center,用正则反而更简单方便一些。

当然也可以学习某编辑器的思路,直接扩展parser。

阅读数:
更多文章:文章目录
解惑专区
(支持markdown插入源代码)
欢迎使用ExASIC订阅服务
仅用于ExASIC最新文章通知,方便及时阅读。
友情链接: IC技术圈问答ReCclayCrazyFPGA