Using with Jekyll

cjwit edited this page Jan 22, 2018 · 8 revisions

You can use Remark with Jekyll quite easily.

Create an html file (has to end in .html for it to be rendered correctly by Jekyll) (the file in this example is default-presentation.html) containing your presentation.

---
layout: presentation
title: Default Presentation
permalink: /default-presentation/
---

# My Awesome Presentation

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

[NOTE]: Note that you need active internet connection to access remark.js script file

---

# Introduction

Hello world!

And then make a layout for the presentation in _layouts (here named presentation.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title | strip_html }}</title>
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">
{{ content }}
    </textarea>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create({navigation: {scroll: false,}});
    </script>
  </body>
</html>

Run jekyll serve or jekyll build and you're good to go!

Serving from a project folder

When serving a Jekyll page from a project folder within an account, assets and other relative links can break either when previewing on localhost or when pushed to the GitHub repo because of how Jekyll builds the file structure. The following workaround is adapted from a response to Jekyll Issue #332 .

If you are using the standard URL for a GitHub Pages project (username.github.io/project-name/), here is one approach to the problem of locating assets within a Jekyll project.

In \_config.yml, set the baseurl option to /project-name where the project name is the name of the repository. Keep the leading slash and be sure to exclude any trailing slash.

To create relative links to assets (Javascript or CSS files, images, videos, etc.), reference them using the site.baseurl variable: {{ site.baseurl}}/path/to/file.jpg. Do not forget the slash between the variable and the rest of the file path.

Permalinks or internal links to posts should use {{ site.baseurl }}{{ post.url }} with no slash between variables.

To work using localhost, override the baseurl option with an empty string. Run jekyll serve from the command line with the following:

jekyll serve --baseurl ""

The required folder for the built page on GitHub Pages should not interfere with the localhost:4000 version of the page. It also allows GitHub to properly build the live page.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.