2024年7月29日月曜日

GitHub の Markdown ファイルを Web ページ化する

更新が頻繁なページなどで、GitHub の Markdown(MD) ファイルをそのまま Web ページに変換して公開できたら便利かなーと思いまして、簡単に作ってみました。

例えば、以下のような感じになります。


読み込みに若干のタイムラグが発生しますが、とりあえずイメージしたものを作れました。サーバーにファイルを増やさなくていいのがとても楽。


JavaScript は次の通りです。

// URLパラメータからMarkdownファイルのURLを取得する関数
function getMarkdownUrlFromParams() {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get('md');
}

// Markdownファイルを取得し、HTMLに変換する関数
async function convertMarkdownToHtml(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const markdown = await response.text();
        return marked.parse(markdown);
    } catch (error) {
        console.error('Error:', error);
        return null;
    }
}

// HTMLからh1タグの内容を抽出する関数
function extractH1Content(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const h1 = doc.querySelector('h1');
    return h1 ? h1.textContent : null;
}

// メイン処理
async function main() {
    const URL = 'https://raw.githubusercontent.com/ユーザ名/リポジトリ名/ブランチ名/'; // Markdownファイルが置かれているURL
    const mdFile = getMarkdownUrlFromParams();
    const errorElement = document.getElementById('error');
    const contentElement = document.getElementById('content');

    if (!mdFile) {
        errorElement.textContent = 'URLパラメータにMarkdownファイルが指定されていません。(?md=sample/file.md)';
        return;
    }

    const html = await convertMarkdownToHtml(`${URL}${mdFile}`);
    if (html) {
        contentElement.innerHTML = html;
        
        // h1タグの内容を抽出してタイトルに設定
        const h1Content = extractH1Content(html);
        if (h1Content) {
            document.title = `${h1Content}`;
        }
    } else {
        errorElement.textContent = '変換に失敗したか、ファイルが見つかりません。';
    }
}

// ページ読み込み時に実行
window.onload = main;


続いて、HTML ファイルです。先ほど作った JavaScript を md.js として読み込みます。

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="./md.js"></script>
</head>
<body>

    <div id="error"></div>
    <div id="content"></div>

</body>
</html>

Markdown テキストからHTMLへの変換には marked.js ライブラリを利用しています。(ページ内リンクは機能しない?ようです)

GitHub 上の Markdown ファイルは Raw ファイルの URL になります。JavaScript のメイン処理の URL を書き換えてください。

(当然ですが、アクセスできる場所に置いてあれば、GitHub 上の Markdown ファイルの必要はありません)


コケモモ(甲斐犬ハーフ)

昨年に引き続き、今年も暑すぎですね。農業にもいろいろと影響が出ていますが……、何はともあれ健康第一。

皆様もどうぞ、熱中症などには気を付けてお過ごしください。