CODEWITHSUNDEEP
jekyllremarkjs
tcs
tcs

Reputation: 377

Stop '---' being transformed to '<hr />'

I'm inserting remark.js slides (as MD files) into a jekyll site (hosted on github, and pre-processing done there).

Since remark.js uses three dashes to indicate a next slide, it's important that these three dashes do not get transformed into a new line '<hr />'.

Is there a way to turn off jekyll preprocessing within an MD file? Or, change the behavior so that --- are not transformed into <hr /> ?

Upvotes: 1

Views: 171

Answers (3)

idbrii
idbrii

Reputation: 11956

The remarkjs wiki now has a Using with Jekyll page with thorough instructions. It uses two .md files to circumvent the problem you're describing.

Essentially, you make your _layouts/presentation.html file directly grab a .md file that's somewhere in your site but not processed by Jekyll (note sourceUrl instead of a <textarea>):

<!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>

Upvotes: 0

georger
georger

Reputation: 1678

This might be an old post, but recently I hit the same issue: I couldn't escape --- in markdown such that remarkjs can render them as individual slides. In Jekyll 4.2.2, the --- was converted into </hr> and this was braking remarkjs.

My solution was to write my content for slides into an .md file and put it under _includes/presentations. I didn't add any --- at the beginning of this file so it will not be picked-up by Kramdown for processing. Then I added a regular .md file in _posts, to this file I added the previous one as an include between <pre> tags.

Content of the post file is:

---
layout: presentation
title: TDD Workshop Presentation
permalink: /tdd-workshop-presentation/
---

<pre>{% include presentations/tdd-workshop-1.md %}</pre>

Content of presentations/tdd-workshop-1.md


# TDD

## Test Driven Development Workshop

---

# Agenda

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

Please mind the new line at the beginning of this file, as that's necessary for the first tag to be rendered properly.

I hope that this helps.

Upvotes: 0

Zeke Hernandez
Zeke Hernandez

Reputation: 1336

I believe you would need to enter a backslash before the three hyphens, according to this document linked to from Jekyll's website.

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax.

But depending on the markdown processor you are using with Jekyll, the escape character could be something other than a backslash, or you might need to escape each hyphen.

Upvotes: 0

Related Questions