markdownの画像埋め込みをHTMLのimgタグに変換する

はじめに

Qiitaへの投稿を含めて、markdownでドキュメントを書いているときに、埋め込んだ画像データの表示時のサイズを指定したくなることがあり、そんなときは、HTMLのimgタグに書き直す必要がある。これまでは、その度に、手動（タイピング）にて書き換えていたのだが、コマンド化して楽しようという試みである。

HTMLのimgタグへの変換とは

Qiitaの公式ページに説明がある。

引用すると、

画像埋め込みmarkdown

## タイトルあり
![代替テキスト](画像のURL "画像タイトル")

## タイトル無し
![代替テキスト](画像のURL)

上記markdownをHTMLのimgタグに書き換えると次のとおり。

画像埋め込みHTML

<img alt="代替テキスト" src="画像のURL" title="タイトル">
<!--  もしくは -->
<img alt="代替テキスト" src="画像のURL">

ここで、画像の表示サイズを変更する場合は、以下の書式となる。

画像埋め込みHTML

<img width="200" alt="代替テキスト" src="画像のURL" title="タイトル">
<!--  もしくは -->
<img style="zoom: 50%;" alt="代替テキスト" src="画像のURL" title="タイトル">

widthは画像の横幅をピクセル数で指定し、style:zoomは元画像からのスケール比で指定する。

試したところ、style:zoomはQiitaでは機能しないようだ

変換コマンド

PythonとSwiftの例を挙げておく。ただし、どちらも入力形式のチェックはしておらず、正しい書式であることを前提としている。

Python3の例

input_markdown = '![代替テキスト](画像のURL "タイトル")' # markdownの画像埋め込み
output_html = '' # HTMLのimgタグ

alt, src, title = "", "", ""
af, sf, tf = False, False, False
for ch in input_markdown:
    if af and ch == ']': af = False
    if sf and ch == ')': sf = False
    if tf and ch == '"': tf = False
    
    if af: alt += ch
    if sf: src += ch
    if tf: title += ch
    
    if not af and ch == '[': af = True
    if not sf and ch == '(': sf = True
    if sf and not tf and ch == '"':
        sf, tf = False, True
        src = src[:-1].strip()

if not af and not sf and alt and src:
    title_string = '' if not title else f' title="{title}"'
    output_html = f'<img width="{300}" alt="{alt}" src="{src}"{title_string} />'
    # output_html = f'<img style="zoom: {50}%;" alt="{alt}" src="{src}{title_string}" />'
else:
    output_html = "ERROR"

Swiftの例

let input_markdown = "![代替テキスト](画像のURL \"タイトル\")" //markdownの画像埋め込み
let output_html: String //HTMLのimgタグ

var (alt, src, title) = ("", "", "")
var (af, sf, tf) = (false, false, false)
for ch in input_markdown {
    if af && ch == "]" { af = false }
    if sf && ch == ")" { sf = false }
    if tf && ch == "\"" { tf = false }
    
    if af { alt += String(ch) }
    if sf { src += String(ch) }
    if tf { title += String(ch) }
    
    if !af && ch == "[" { af = true }
    if !sf && ch == "(" { sf = true }
    if sf && !tf && ch == "\"" {
        (sf, tf) = (false, true)
        src = src.dropLast(1).trimmingCharacters(in: .whitespaces)
    }
}

if !af && !sf && !alt.isEmpty && !src.isEmpty {
    let title_string = title.isEmpty ? "" : " title=\"\(title)\""
    output_html = "<img width=\"\(300)\" alt=\"\(alt)\" src=\"\(src)\"\(title_string) />"
    // output_html = "<img style=\"zoom: \(50)%;\" alt=\"\(alt)\" src=\"\(src)\"\(title_string) />"
} else {
    output_html = "ERROR"
}

実際にコマンドとするには、クリップボード（ペーストボード）から＼への コピー処理を前後に付加する必要がある。

おわりに

自分はGUI化してマウスクリック一発で変換＆結果を取得できるようにした。
ずっと前に作っておくべきだった。

以上