4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

GitHubPagesでMarkDown(MD)とPDFを公開するには

Last updated at Posted at 2020-07-24

はじめのはじめに

このページの情報は

  • 「mdファイルをGitHubPagesで公開するにはどうすればよいのか」
  • 「pdfファイルをGitHubPagesで公開すればどうすればよいのか」

という2つの問いに対応します。

はじめに

VSCodeの追加プラグインでMarpというものがあります。

これはGoogleスライドやPowerPointでのプレゼン資料の作成作業を、
MarkDown記法によって代用できる!というものです。

詳しくはこちら

さて、私はこのMarpを利用して、スライドをPDFファイルとして作成(= MarkDownで記述→PDFとして保存)したのですが、

「PDFファイルそのもの」「もととなったMarkDownファイルのソースコード」を、GitHubPagesで公開するにはどうすればよいのか?

という問題に遭遇し、解決することができたので、
そこで得られたことを共有します。

前提条件

PDFファイルと、そのもととなるMarkDownファイルは、すでに作成されているものとします。

注意

GitHubpagesではmdファイルは出力できない

README.mdは例外として一応表示できるようなのですが、
他のmdファイルにアクセスしようとすると404が返ってきます。

image.png

そこで、md形式ではなくtxt形式として保存しなおし、GitHubにアップロードします。

image.png

HTMLでの記述方法

インラインフレームタグを利用します。
widthやheightなどはお好みで調整してください。
CSSなどで回り込みなどの設定をすると、さらにきれいになるはずです。


    <iframe
      class="slide"
      src="projectSlidebyMD20200626.pdf"
      width="50%"
      height="500px"
    ></iframe>

    <iframe
      src="projectSlidebyMD.txt"
      width="45%"
      height="500px"
      class="sorce"
    ></iframe>

出力例

image.png

参考

LTのスライド作成に時間をかけたくない

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?