今まではHTMLベタ打ちだった

• 前も同じことを書いた気がしますが、もともと学生時代から$\LaTeX$を使っていたこともあって、マークアップ言語を使うことに慣れていたせいか、HTMLの直接入力もあまり苦に感じること無く、ここのコンテンツもHTMLベタ打ちでした。
  
  
• しかし、ここのところWiki記述やAIとの情報やり取りでMarkdownを使うことが増えたせいか、このHTMLベタ打ちが億劫になってきたのです。
  
  
• 考えてみると、もともとフォーマットは凝らずに中身に注力するタイプのコンテンツだったので、Markdownでもほとんど書けます。足りないところはHTML混ぜちゃえば良いので、これからはMarkdownで書く方針へ変えることにしました。
  
  

まだブラウザはデフォルトでMarkdownをサポートしていない

• とは思うものの、WebブラウザはMarkdownをデフォルトサポートしていないので、WebサーバーにはHTMLをアップする必要があります。
  
  
• そこで試しに簡単なMarkdownを作って、何種類かの方法でHTML変換することにしてみました。
  • テスト用Markdownファイル
    
    

PythonとPerlでHTML変換

• PythonとPerlでMarkdown⇒HTML変換のパッケージを探して試しました。

  言語	パッケージ
  Perl	Markdown::Perl
  Python	markdown

• 結論から書くとMarkdown::Perlが良かったです。使い方はMarkdown::Perl::convert()の引数としてMarkdownを与えるだけです。

  use Markdown::Perl;
  ...
  my $html = Markdown::Perl::convert($md);
  

• HTML変換結果は「これならcss設定でいける」と思えるものでした。良いですね、Markdown::Perl。
  
  
• Pythonのmarkdownを選ばなかった理由ですが、<ul>〜</ul>で字下げを入れた表のHTML変換に失敗したからです。字下げを入れないとOKなのですが...惜しい。
  
  

CSSの検討

• 変換のメイン手段はMarkdown::Perlとし、あとは従来のスタイルと合うようにCSSを追加することになります。
  • <body>
  • <pre>, <code>
  • <h1>, <h2>, <h3>, <h4>
  • <table>, <th>, <td> ...
    
    
• HTMLベタ書き時に使用していたCSSが default.css で、フォント設定や線の太さ等はこれに合わせていくことになります。そのまま使おうかとも思いましたが、<table>タグの使い方が違うので別のCSSとして作ることにしました。mdbase.cssにしようかなと。
  
  
• とりあえずHTMLのヘッダとmdbase.cssを作成して、上記ヘッダをとりあえず手編集でHTMLに付けました。だいぶ従来と雰囲気が近くなりました。
  
  

HTMLの<head>記述検討

• MathJaxを使うので、<head>ブロックでCSSとJavaScriptの呼び出しを行います。
  • MathJax-script
    
    
• 更に今回からHighlight.jsも使うことにしました。
  • Highlight.css, Highlight.js
    
    
• 最終的なHTMLの<head>ブロックはこのようになりました。

表示合わせの細かい変更

• ここから先は、本サイトの従来表示に合わせるための細かな変更です。
  
  
• 従来のページは大きな<table>の中に、タイトル,リンク,本文を入れていました。ざっくりは下記ですね。
  • <body><table align=center>
    • <tr><td class=title>タイトル</td></tr>
    • <tr><td class=navigate>リンク</td></tr>
    • <tr><td class=body>本文</td></tr>
    • <tr><td class=body>Notes</td></tr>
    • <tr><td class=body>Copyright</td></tr>
    • <tr><td class=navigate>リンク</td></tr>
  • </table></body>
    
    
• これらの記述位置をスクリプトから判別させるため、Markdownソースのテンプレートを作りました。ブロック判別にHTMLのコメントを利用します。
  • <!-- __TITLE__ -->
  • <!-- __LINK__ -->
  • <!-- __BODY__ -->
  • <!-- __NOTES__ -->
  • <!-- __COPYRIGHT__ -->
    
    
• このテンプレートに入れたテスト用MarkdownをMarkdown::PerlでHTML変換しました。HTMLソースを見るとブロック判別用のHTMLコメントが残っています。OKです。
  
  
• あとはブロックに入れる+微修正スクリプト作りました。先程作成したHTMLヘッダの付加も行っています。

  #!perl
  use lib qw(.);
  use ModMdBaseHtml;
  use warnings;
  use strict;
  
  my $o_mod = ModMdBaseHtml->new();
  $o_mod->md_to_html('test_b.md'); # test_b.md ⇒ test_b.html
  

• 上記の実行結果が、このHTMLです。ほぼ見た目が従来と同じになりました。セクションタイトルは少し違いますが、従来より見やすい気がするのでそのままとしています。

今回のコンテンツもMarkdownで書きました。

• 今見てもらっている本HTMLは、今回立ち上げた方法で、Markdown(*1)を変換したものです。
  
  
• 今後は編集も少し楽になるし、Wiki等で書いたMarkdownのサイト移行も簡単になりそうです。

Notes

1. Markdown編集時はUTF-8ですが、サイトはShift-JISです。HTML出力時コード変換しています。

2026/03/22: 内容整理
2026/03/21: 初版