html,CSS,JavaScriptを用いてスタンドアロンかつマークダウン記法によって書かれたナレッジベースを作りました。
CSSやJavaScriptのライブラリは、CDNからコピー＆ペーストする形で、できる限りダウンロードを避けて製作しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ホーム - テーブル検索</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./assets/css/water.css">
<link rel="stylesheet" href="./assets/css/animate.css">
<link rel="stylesheet" href="./assets/css/print.css">
<style>
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
padding: 0.6em;
word-break: break-word;
}
</style>
</head>
<body>
<h1>ホーム</h1>
<p>ページ名、説明、カテゴリから検索：</p>
<input type="search" id="search" placeholder="例：開発、連絡先" />
<table>
<thead>
<tr>
<th>タイトル</th>
<th>説明</th>
<th>カテゴリ</th>
</tr>
</thead>
<tbody id="pageTableBody">
<!-- JSで動的に埋め込み -->
</tbody>
</table>
<script src="./assets/js/fuse.js"></script>
<script src="./assets/js/marked.js"></script>
<script>
const pages = [
{
title: "自己紹介",
url: "profile.html",
description: "筆者の経歴やスキルセットの紹介ページ。",
category: "プロフィール"
},
{
title: "プロジェクト一覧",
url: "projects.html",
description: "これまでに関わったプロジェクトの一覧です。",
category: "制作物"
},
{
title: "お問い合わせ",
url: "contact.html",
description: "メールやSNSでの連絡手段をまとめています。",
category: "連絡先"
},
{
title: "開発ノート",
url: "devlog.html",
description: "開発中の記録やアイデアを書き留めています。",
category: "ブログ"
},
{
title: "テストページ",
url: "test.html",
description: "デザインや機能のテスト用ページです。",
category: "その他"
}
];
const fuse = new Fuse(pages, {
keys: ["title", "description", "category"],
threshold: 0.4
});
const input = document.getElementById("search");
const tbody = document.getElementById("pageTableBody");
function renderTable(results) {
tbody.innerHTML = "";
results.forEach(({ item }) => {
const tr = document.createElement("tr");
const tdTitle = document.createElement("td");
const a = document.createElement("a");
a.href = item.url;
a.textContent = item.title;
tdTitle.appendChild(a);
const tdDesc = document.createElement("td");
tdDesc.textContent = item.description;
const tdCat = document.createElement("td");
tdCat.textContent = item.category;
tdCat.className = "category";
tr.appendChild(tdTitle);
tr.appendChild(tdDesc);
tr.appendChild(tdCat);
tbody.appendChild(tr);
});
}
renderTable(pages.map(p => ({ item: p })));
input.addEventListener("input", () => {
const query = input.value.trim();
if (!query) {
renderTable(pages.map(p => ({ item: p })));
} else {
const results = fuse.search(query);
renderTable(results);
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Markdown Viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./assets/css/water.css">
<link rel="stylesheet" href="./assets/css/animate.css">
<link rel="stylesheet" href="./assets/css/print.css">
</head>
<body class="full-height">
<div id="bg"></div>
<main>
<pre id="markdown-source" style="display: none;">
<!-- ここからMarkdown記法 -->
# サンプル見出し
これは**マークダウン**のテストです。
記法
- リスト1
- リスト2
- リスト3
これは `file:///C:/Users/Example/` のように書きます。
```plaintext
file:///C:/Users/Example/
```
<!-- ここまでMarkdown記法 -->
</pre>
<div id="markdown-rendered" class="animate__animated animate__fadeInUp"></div>
</main>
<script src="./assets/js/marked.js"></script>
<script>
// 1. プレ要素からマークダウン文字列を取得
const markdownText = document.getElementById("markdown-source").textContent;
// 2. marked.js を使ってHTMLに変換
const html = marked.parse(markdownText);
// 3. 変換したHTMLをレンダリングエリアに出力
document.getElementById("markdown-rendered").innerHTML = html;
</script>
</body>
</html>
コメントを残す