php+parsedown博客中让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>
注:
pattern, $replacement, $orignal, $limit, $count)
$pattern 正则表达式
$replacement 替换字符串
$orignal 原始字符串
$limit 替换的最大次数,默认-1,全部替换
$count 指定替换次数
难点及总结
对于图片居中,并不能简单设置img标签的css实现。必须要设置img的上层p的text-align为center,用正则反而更简单方便一些。
当然也可以学习某编辑器的思路,直接扩展parser。