gnab/remark

Cannot use custom classes within {{content}} items in a template slide

Opened this issue · 0 comments

mhaffner commented

I'm wanting to use some nested class and increment elements using {{content}} via a template slide. However, it seems like remark has some trouble with this. The incrementing works on its own, and the nested class elements work on their own, but these two don't work together. See this MWE:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
    <head>
        <title>Issues with Incremental Slides</title>
        <meta charset="utf-8" />
        <script src="libs/jquery-1.11.3/jquery.min.js"></script>
        <script src="libs/elevate-section-attrs-2.0/elevate-section-attrs.js"></script>
        <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
        <link href="libs/remark-css-0.0.1/default-fonts.css" rel="stylesheet" />
        <style>
         .mark {
             background-color: yellow;
         }

        </style>
    </head>
    <body>
        <textarea id="source">

## Highlight/increment demo

.right-column[
Incrementing works fine within classes, like `right-column`.

+ One `Markdown` bullet point
{{content}}

]

--

+ A second bullet point
{{content}}

--

    + Nested point

---

## Highlight/increment demo

.right-column[
Using a nested class like `mark` for highlighting within a class like `right-column` also works fine.

+ One `Markdown` bullet point

+ A .mark[second] bullet point

    + Nested point
]

---

## Highlight/increment demo

.right-column[
Combining the two does not work:

+ One `Markdown` bullet point
{{content}}

]

--

+ A .mark[second] bullet point
{{content}}

--

    + Nested point
                    </textarea>
                    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
                    </script>
                    <script>
                     var slideshow = remark.create();
                    </script>
                </body>
            </html>

The issue is that in the last example, where the word second should appear highlighted (in the second bullet point), it has been replaced with ,[object Object]. So it should be

  • One Markdown bullet point
  • A second bullet point
    • Nested point

But it is actually

  • One Markdown bullet point
  • A ,[object, Object], bullet point
    • Nested point

It seems like remark has a hard time parsing the custom css class and putting it into the {{content}} place holder.