爲typecho文章圖片居中並添加註解

typecho文章使用markdown解析器可以插入圖片，但圖片信息只能作爲alt屬性存在，還需要單獨爲圖片寫註釋，如：

• 插入方式如下：


• 原始markdown插入圖片

• 更改後插入圖片

將註釋信息直接顯示出來，更清晰直觀。

---

修改方式如下：

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;
}