-
Notifications
You must be signed in to change notification settings - Fork 860
Using with Jekyll
You can use Remark with Jekyll by simply creating a
folder and with html files containing Remark presentations: Make a remark/
folder and put an html file containing a remark
presentation. However, you won't have any
index of talks and they won't be a part of your Jekyll posts.
You can also use Remark in Jekyll posts, but it's a bit trickier: when Jekyll processes the markdown for the frontmatter of your page, it also processes the markdown in your presentations. To work around this, you can directly link to a markdown file from your presentation to provide Remark with the raw markdown. You'll need to create two markdown files for each presentation:
- One in the
_posts/folder that only contains frontmatter. - One in a
talks/folder that only contains your Remark presentation markdown.
Here's the complete details of the three files you need for your first presentation post. This was verified working in Github Pages (jekyll 3.10.0).
Create a layout for your presentations. Unlike most remarkjs pages, this
doesn't have a <textarea> and instead uses a link to a markdown file. All of
your presentations will share this file.
<!DOCTYPE html>
<!-- https://github.com/gnab/remark/wiki/Using-with-Jekyll/ --->
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title | strip_html }}</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
body {font-family: 'Lato';}
h1, h2, h3 {font-family: 'Lato'; font-weight: normal; font-weight: 400; margin-bottom: 0;}
.remark-code, .remark-inline-code { font-family: 'Roboto Mono'; }
</style>
</head>
<body>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create({
sourceUrl: '{{site.baseurl}}{{page.remarkjs_source}}'
});
</script>
</body>
</html>Create a post file for each presentation. It only contains frontmatter because the actual presentation is in another file.
---
layout: presentation
title: Default Presentation
categories: [slides]
remarkjs_source: /talks/default-presentation.md
---
You can put a blurb here which appears on the home page, but is not part of the
presentation.Create the actual remarkjs for each presentation. Note it has no Jekyll frontmatter.
You can rename the talks/ folder, but make sure to use the correct path in
remarkjs_source in your posts.
# 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!
That's it! Now your presentation will show up in your main page and everywhere else posts show up, but when loaded it shows the presentation.
Run jekyll serve or jekyll build and you're good to go!
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.
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>
Code:
def add(a,b)
a + b
endname
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>