1

I have made my onw jekyll plugin which gives some text special css (spoiler hider).

This is my code:

class Spoiler < Liquid::Tag
   def initialize(tag_name, input, tokens)
     super
     @input = input
   end

   def render(context)
     output = "<div class='spoiler'>" + @input + "<div>"
     return  output;
   end

end
Liquid::Template.register_tag('spoiler', Spoiler)

There is example how I want to use it in my markdown posts:

---
layout: post
title:  "testing file"
date:   2019-09-25
category: article
---

aaaaaaaaaaa  {% spoiler secret text %} bbbbbbbbbbbb

but this is how page looks like:

screenshot of my site

When I look in to generated source code, the text looks like this:

<p>aaaaaaa &lt;div class='spoiler'&gt;secret text &lt;/div&gt; bbbbbbbb</p>

What should I do make jekyll plugin generate html element instead of text ?

PS: If I manually replace &lt; by < and &gt; by >, it works fine.

Jan Černý
  • 1,268
  • 2
  • 17
  • 31

1 Answers1

1

Technically, every line separated by whitespace get rendered into an HTML <p> element.

To avoid generating <p> tags automatically, explicitly wrap lines in a <div>:

<div>
  aaaaaaaaaaa  {% spoiler secret text %} bbbbbbbbbbbb
</div>
ashmaroli
  • 5,209
  • 2
  • 14
  • 25
  • Thanks, this works. But, is there another way to do that within plugin and keep markdown clean without html tags ? – Jan Černý Nov 04 '19 at 08:59
  • 1
    Actually, no. The reason is that Jekyll's Markdown converter (wrapper for `kramdown`) is run after all Liquid in the current document has finished rendering. When `kramdown` encounters a standalone text surrounded by whitespace, it renders that text into HTML `

    ` tags.. If you want to handle this entirely via plugins, you'll have to drop using Liquid Tag and instead rely on string substitution via the `post_render` hook. You may want to look at the source code for `jemoji` plugin for reference.

     – ashmaroli Nov 04 '19 at 13:40