web-dev-qa-db-ja.com

HTMLファイル内にマークダウン（.md）ファイルを含める方法

Githubリポジトリに_README.md_ファイルがあるとします。次に、このリポジトリについて、_gh-pages_を使用してホストするWebサイトを作成します。

私が欲しいのは、_index.html_ファイルからコンテンツを取得する_README.md_ファイルのセクションを用意することです。この方法では、1つのファイルのみを更新する必要があります。

マークダウンファイルを最初にhtmlに変換する必要があり、そのhtmlを別のhtmlファイルに入れることができると思います。

私は HTML5 Imports を調査しましたが、それらは現在Chromeでのみサポートされています。 document.write()で別の_.js_ファイルを使用すると便利な場合がありますが、シンプルでクリーンな方法はありますか？

javascripthtmlmarkdown
11
gliemezis

Node.jsを使用した私の完全な回答

1。最初にmarkedマークダウンコンバーターをインストールします。

$ npm install --save-dev marked


2。次に、generateReadMe.jsという新しいファイルで、マークダウンをHTMLにコンパイルし、新しいREADME.htmlファイルに書き込みます。

var marked = require('marked');
var fs = require('fs');

var readMe = fs.readFileSync('README.md', 'utf-8');
var markdownReadMe = marked(readMe);

fs.writeFileSync('./site/README.html', markdownReadMe);


3。次に、index.htmlのコンテンツが必要なREADME.md内に、<object>タグを追加します。

<object data="README.html" type="text/html"></object>


4。次に、コマンドラインでこれを実行して、それを実現します。

$ node path/to/generateReadMe.js


プロセス全体は非常にシンプルで簡単でした。すべてをnpm startスクリプトに追加しました。これで、README.mdファイルに変更を加えるたびに、変更がgh-pages Webサイトに登録されます。

10
gliemezis

https://github.com/markdown-it/markdown-it などのマークダウンパーサーを使用して、マークダウンをhtmlに変換できます。

サーバー上のマークダウンを変換してクライアントに配信されるHTMLにマージするか、それを使用してブラウザーにマークダウンをロードし、そこで変換することができます。

3
Sudsy

マークダウンをhtmlに変換するには、変換ライブラリまたはコマンドツールを使用できます。 Ruby言語を使用した例については、 https://github.com/github/markup にアクセスしてください。

https://www.npmjs.com/search?q=markup にアクセスして、実装に適した変換ライブラリまたはコマンドツールを検索してみてください。上記の受け入れられた答えは、Node.jsのNPMパッケージマネージャーを使用した例です。

2
oklas

< zero-md > Webコンポーネントを使用しています。

<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>

<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<!-- Simply set the `src` attribute to your MD file and win -->
<zero-md src="README.md"></zero-md>
1
Constantin De La Roche