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></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。