コンテンツの書き方を変えよう
2026/03/21
[Prev] [Next] [Top] , Digital [Prev] [Next]

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

  • 前も同じことを書いた気がしますが、もともと学生時代から$\LaTeX$を使っていたこともあって、マークアップ言語を使うことに慣れていたせいか、HTMLの直接入力もあまり苦に感じること無く、ここのコンテンツもHTMLベタ打ちでした。

  • しかし、ここのところWiki記述やAIとの情報やり取りでMarkdownを使うことが増えたせいか、このHTMLベタ打ちが億劫になってきたのです。

  • 考えてみると、もともとフォーマットは凝らずに中身に注力するタイプのコンテンツだったので、Markdownでもほとんど書けます。足りないところはHTML混ぜちゃえば良いので、これからはMarkdownで書く方針へ変えることにしました。

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

  • とは思うものの、WebブラウザはMarkdownをデフォルトサポートしていないので、WebサーバーにはHTMLをアップする必要があります。

  • そこで試しに簡単なMarkdownを作って、何種類かの方法でHTML変換することにしてみました。

PythonとPerlでHTML変換

  • PythonとPerlでMarkdown⇒HTML変換のパッケージを探して試しました。
    言語パッケージ
    PerlMarkdown::Perl
    Pythonmarkdown
  • 結論から書くと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の呼び出しを行います。
  • 更に今回から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: 初版

Copyright(C) 2026 Altmo
本HPについて
[Prev] [Next] [Top] , Digital [Prev] [Next]