- Notifications
You must be signed in to change notification settings - Fork861
Using with Jekyll
You can use Remark withJekyll by simply creating afolder and with html files containing Remark presentations: Make aremark/folder and put anhtml file containing a remarkpresentation. However, you won't have anyindex of talks and they won't be a part of your Jekyll posts.
You can also use Remark in Jekyllposts, but it's a bit trickier: when Jekyllprocesses the markdown for the frontmatter of your page, it also processes themarkdown in your presentations. To work around this, you can directly link to amarkdown 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 firstpresentation post. This was verified working in Github Pages (jekyll 3.10.0).
Create a layout for your presentations. Unlike most remarkjs pages, thisdoesn't have a<textarea> and instead uses a link to a markdown file. All ofyour presentations will share this file.
<!DOCTYPE html><!-- https://github.com/gnab/remark/wiki/Using-with-Jekyll/ ---><html><head><metacharset="utf-8"><title>{{ page.title | strip_html }}</title><style>@importurl(https://fonts.googleapis.com/css?family=Lato);@importurl(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><scriptsrc="https://remarkjs.com/downloads/remark-latest.min.js"></script><script>varslideshow=remark.create({sourceUrl:'{{site.baseurl}}{{page.remarkjs_source}}'});</script></body></html>
Create a post file for each presentation. It only contains frontmatter becausethe actual presentation is in another file.
---layout:presentationtitle:Default Presentationcategories:[slides]remarkjs_source:/talks/default-presentation.md---You can put a blurb here which appears on the home page, but is not part of thepresentation.
Create the actual remarkjs for each presentation. Note it has no Jekyll frontmatter.
You can rename thetalks/ folder, but make sure to use the correct path inremarkjs_source in your posts.
#My Awesome Presentation---#Agenda1. Introduction2. Deep-dive3. ...[NOTE]: Note that you need active internet connection to access remark.js script file---#IntroductionHello world!
That's it! Now your presentation will show up in your main page and everywhereelse posts show up, but when loaded it shows the presentation.
Runjekyll serve orjekyll 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 toJekyll 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 thebaseurl 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 thesite.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. Runjekyll 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:
defadd(a,b)a +bend
name
</textarea><script src="https://remarkjs.com/downloads/remark-latest.min.js"></script><script> var slideshow = remark.create();</script>