例えば、以下のような感じになります。
読み込みに若干のタイムラグが発生しますが、とりあえずイメージしたものを作れました。サーバーにファイルを増やさなくていいのがとても楽。
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 ファイルの必要はありません）
昨年に引き続き、今年も暑すぎですね。農業にもいろいろと影響が出ていますが……、何はともあれ健康第一。
皆様もどうぞ、熱中症などには気を付けてお過ごしください。