Skip to content

Using with Hugo

Jump to bottom Edit New page
Fabian C. Moss edited this page Feb 15, 2020 · 3 revisions

You can use Remark with Hugo easily by creating a content-type layout that injects the raw Markdown of the page into the element that Remark expects. The key is to use .RawContent to avoid changing the Markdown into HTML.

  • a complete working example of this is in this Hugo theme by xaprb
  • there is another example from eueung

For purposes of this wiki page, imagine that you will host your slideshows on your Hugo-generated website, coexisting with your blog and other content.

  1. Create a directory under content, e.g. /content/slides/ for the content of each slideshow.
  2. Create a layout in /layouts/slides/single.html to render every *.md file in /content/slides/ as a slideshow.

The layout's contents will look like the following:

<html>
<head>
<!-- head content, etc omitted for brevity -->
</head>
<body>
<textarea id="source">
{{- .RawContent -}}
</textarea>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
    <script>
      var slideshow = remark.create({});
    </script>
</body>
</html>

The Markdown file needed to create a simple slideshow might look like the following, in (for example) /content/slides/demo-slideshow/index.md:

---
title: 'Demo RemarkJS Slideshow '
date: "2018-06-02T16:43:02-04:00"
url: "/slides/demo-slideshow/"
---
class: center, middle
# Demo Remark Slideshow 
## Jony Ives &bullet; WWDC
<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