この記事で何ができるか
本記事では、HTML Application (HTA)、jQuery、および Marked.js を組み合わせて、ローカル環境で動作する軽量な Markdown 版ローカル wiki (v1.2) の仕組みと実装例を紹介します。
サーバーを立てることなく、Windows環境でダブルクリックするだけで起動し、Markdown形式で記述したノートをリアルタイムにプレビュー・保存できる環境を構築できます。
想定環境・前提条件
- OS: Windows 10 / 11 (htaファイルを実行可能な環境)
- ライブラリ: jQuery, Marked.js (オフライン環境で利用するためローカルまたはCDNから読み込み)
再構成サンプルコード
以下のコードは、記事記載の仕様を基に現在のブラウザおよびHTA環境に合わせて再構成した実装例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Markdown Local Wiki v1.2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body { font-family: sans-serif; display: flex; height: 100vh; margin: 0; }
#editor-pane, #preview-pane { flex: 1; padding: 20px; box-sizing: border-box; overflow-y: auto; }
#editor { width: 100%; height: 80vh; font-family: monospace; }
#preview-pane { background: #f9f9f9; border-left: 1px solid #ccc; }
</style>
</head>
<body>
Editor