mdjs-viewer: GitHubでMarkdown JavaScriptデモを実行して表示する
mdjs-viewerは、Thomas Allmerによって開発されたChrome拡張機能で、ユーザーはGitHub上で直接インタラクティブなMarkdown JavaScriptデモを実行して表示することができます。この拡張機能は、mdjs(Markdown JavaScript)ライブラリの機能を強化し、GitHubプラットフォームにもたらします。
mdjs-viewerを使用すると、ユーザーはGitHubのさまざまな場所でライブデモを表示することができます。これには、README.mdやGitHub IssuesなどのGitHub Markdownファイルが含まれます。この拡張機能は、ユーザーコードの実行を分離し、コードを実行する前にユーザーアクションを要求するなどの対策を実施し、サンドボックス設定内のiframe内でデモを実行し、iframeの外部へのリクエストを制限することでセキュリティを確保します。
mdjs-viewerは、GitHubのContent Security Policy(CSP)を変更し、script-srcに特定のルールを追加することで、mdjs iframe内でのコードブロックの実行と、iframe内からのユーザー依存関係の読み込みを許可します。
mdjs-viewerを使用するには、拡張機能を有効にしてGitHub上のマークダウンページやIssueにアクセスします。この拡張機能は、これらのページに「show demo ▹」ボタンを追加し、クリックするとmdjsを使用して生のマークダウンテキストを処理し、インポートをunpkg.comのURLに置き換えます。最後に、mdjsで生成されたHTMLとJavaScriptの出力を表示するためのiframeが作成されます。
GitHubへの匿名API呼び出しの数には制限(1時間に60回)があり、Issueメッセージの生のコンテンツを要求するにはAPIキーが必要です。
mdjs-viewerを試して、インタラクティブなMarkdown JavaScriptデモでGitHubのエクスペリエンスを向上させてみてください!