LoginSignup
0

More than 5 years have passed since last update.

Remark.js on JekyllをGithub Pagesで公開する

Posted at

Jekyllで構築したウェブサイト上でスライドを公開したい人向けの記事です.

Remark.jsとJekyll, JekyllとGithub Pages, Github PagesとRemark.jsの組み合わせは検索に引っかかるため, なんの疑いもなく3つを組み合わせようとしたところGithub上でスライド部分のMarkdownがHTMLに変換されてしまい, 上手くいかなかったため解決策を共有しておきます.

ここではそれぞれが使える環境を想定しています.
もし不十分であればお手数ですが他のページで整えてからご覧ください.

また, こちらのページを参考にさせていただきました. 中国語のため本文はあまり理解できませんでしたが, この場を借りてお礼を申し上げます.

Integrating RemarkJS with Jekyll

Thank you for your post!

環境

Remark.js: remark-latest.min.js
Jekyll: v3.6.2

方法

まずはじめに必要なディレクトリツリーを示しておきます.

username.github.io/
 ├── _includes
 │    └── slides
 │         └── your_slide.md
 ├── _layouts
 │    └── slide.html
 └── _posts
      └── YYYY-MM-DD-your_slide.md

まずはlayoutから作っていきます. ここはRemark.jsの公式のテンプレートを元にtextareaを変更します.

Liquid構文を用いて_includesディレクトリから本文をインポートしています.

_layouts/slide.html
    <body>
      <textarea id="source">
- {{ content }}
+ {% include slides/{{ page.slide }} %}
      </textarea>
      <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript">

次に_includes/slides/以下にRemark.jsに与えたいMarkdownのファイルを置きます.
このファイルの先頭にはFront-matterを書く必要がないので普通にスライドを作って大丈夫です.
また, このファイルは公式のように.htmlにする必要はなく, .mdで書きましょう.

最後に_posts/以下にJekyllに認識させるファイルを置きます.
以下が全文です. Front-matterのみ書いておけば良いです.
このとき, slideの引数として_includes/slides/以下のファイル名を与えておきましょう.
なお, こちらの拡張子も.mdでOKです.

_posts/YYYY-MM-DD-your_slide.md
---
layout: slide
title: Title
slide: your_slide.md
---

あとはGithubにPushしてください.

結果

Remark.js on JekyllをGithub Pagesで公開できる.

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
0