为typecho文章图片居中并添加注解

typecho文章使用markdown解析器可以插入图片，但图片信息只能作为alt属性存在，还需要单独为图片写注释，如：

• 插入方式如下：


• 原始markdown插入图片

image

• 更改后插入图片

我是注释

将注释信息直接显示出来，更清晰直观。

修改方式如下：

1. 找到typecho安装目录下的var/HyperDown.php，第357行

  // image
        $text = preg_replace_callback(
            "/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\(((?:[^\)]|\\\\\)|\\\\\()+?)\)/",
            function ($matches) use ($self) {
                $escaped = htmlspecialchars($self->escapeBracket($matches[1]));
                $url = $self->escapeBracket($matches[2]);
                $url = $self->cleanUrl($url);
                return $self->makeHolder(
                    "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
                );
            },
            $text
        );

将357行的：

<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">

修改为

<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"><center><div class=\"image-caption\">{$escaped}</div></center>

2. 添加自定义css

/*设置图片插入居中*/
p img {clear:both;display:block;margin:auto;}
/* 设置注释样式*/
.image-caption{
min-width: 20%;
    max-width: 80%;
    min-height: 22px;
    display: inline-block;
    padding: 10px;
    margin: 0 auto;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    color: #969696;
    line-height: 1.7;
}