ST_FUNC開発日記

建築構造設計Excelアドイン開発の記録

mdからhtmlの変換 その4

htmlができたので、ロリポップにアップロードしてみたら、htmlが文字化けしてしまっていた。

なんでかなと思ってみていたら、meta charsetのところで、"が全角になってしまっていた。

ということで、修正。

また、htmlフォルダの中にさらにhtmlフォルダができてしまっていることを発見。

これはmdのみの時は問題なかったが、画像コピーの処理を入れたときに、再帰的にコピーされてしまった聖なようだ。

除外する設定を書いてもよかったけど、面倒だったので、markdown置き場はmarkdownフォルダ内として、

ややこしいことが起こらないようにした。

そんな感じで最終的なコードはこちら。

template.html

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="utf-8" />
<title>{{TITLE}}</title>
<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@2.7.9/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
{{BODY}}
</body>
</html>

md_to_html.py

import os
import glob
import markdown
import shutil


def convert_md_to_html(input_path, output_path):
    with open(input_path, "r", encoding="utf-8") as md_file:
        md_text = md_file.read()
        html: str = markdown.markdown(
            md_text,
            extensions=["tables", "mdx_math"],
            extension_configs={"mdx_math": {"enable_dollar_delimiter": True}},
        )

    with open("template.html", "r", encoding="utf-8") as template_file:
        template_text: str = template_file.read()
        title: str = os.path.splitext(os.path.basename(input_path))[0]
        html = template_text.replace("{{TITLE}}", title).replace(
            "{{BODY}}", html
        )
        html = html.replace('.md"', '.html"')

    with open(output_path, "w", encoding="utf-8") as html_file:
        html_file.write(html)


def main():
    input_folder = "markdown"
    output_folder = "html"

    if not os.path.exists(output_folder):
        os.makedirs(output_folder)

    for md_file_path in glob.glob(f"{input_folder}/**/*.md", recursive=True):
        relative_path = os.path.relpath(md_file_path, input_folder)
        output_path = (
            os.path.splitext(os.path.join(output_folder, relative_path))[0]
            + ".html"
        )
        output_dir = os.path.dirname(output_path)

        if not os.path.exists(output_dir):
            os.makedirs(output_dir)

        convert_md_to_html(md_file_path, output_path)
        print(f"変換完了: {md_file_path} -> {output_path}")
    IMAGE_EXTENSIONS = (
        ".gif",
        ".jpg",
        ".png",
        ".svg",
    )
    for image_extension in IMAGE_EXTENSIONS:
        for image_file_path in glob.glob(
            f"{input_folder}/**/*{image_extension}", recursive=True
        ):
            relative_path = os.path.relpath(image_file_path, input_folder)
            output_path = os.path.join(output_folder, relative_path)
            output_dir = os.path.dirname(output_path)
            if not os.path.exists(output_dir):
                os.makedirs(output_dir)
            shutil.copy2(image_file_path, output_path)
            print(f"コピー完了: {image_file_path} -> {output_path}")


if __name__ == "__main__":
    main()

ホームページにもアップロードした。

https://st-func.main.jp/

準備が整ったので、今後はドキュメントを少し整備していこうと思う。

テンプレートのmetaの修正、markdownの置き場を修正 · st-func/st_func_docs@69bdfde · GitHub