CODEWITHSUNDEEP
rreveal.jsslidify
jalapic
jalapic

Reputation: 14202

Create slide template for slidify

I'm trying to create a template for my slides. I'm using reveal.js as my framework. I'm using the slidify package in Rstudio.

I have saved the following text to as an html file in assets/layouts:

---
layout: slide
---
{{{ slide.content }}}

<style>
  p {
    color: #00BFFF;
  position: relative;
    line-height: 1;
}

</style>

And for the slide(s) that I want to have this style, I mark them like this:

--- &test

### a header

some text

Unfortunately, this changes the formatting of the text for every slide in the presentation, even those where I haven't added &test to the slide divider. The only text that doesn't change are those wrapped in <p> text </p> HTML tags.

Thanks.

Upvotes: 0

Views: 526

Answers (1)

Jonathan Gilligan
Jonathan Gilligan

Reputation: 701

When you write a layout in slidify, the template gets filled in and included in the html file, so your style block applies globally to everything that comes after it in the html file.

The way around this is to restrict it to specific classes:

If test.html contains this:

<section class='test {{slide.class}}' data-state='{{slide.ds}}' id='{{slide.id}}' data-background='{{slide.bg}}' data-transition='{{slide.dt}}' background-transition='{{slide.bt}}'>
  {{{ slide.header }}}
  {{{ slide.content }}}
  {{# slide.pnotes }}
  <aside class='notes'>
    {{{ html }}}
  </aside>
  {{/ slide.pnotes }}
</section>
<style>
  .test p {
   color: #00BFFF;
   position: relative;
   line-height: 1;
   }

then the paragraph style will only apply to paragraphs in slides denoted by --- &test.

Upvotes: 1

Related Questions