Skip to content

Using with Jekyll

Jump to bottom Edit New page
RVirmoors edited this page Jan 7, 2021 · 9 revisions

You can use Remark with Jekyll quite easily.

Create an .md file (the file in this example is default-presentation.md) 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">
{{ page.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.

<title>Title</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>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally