Sean Patrick Hagen bio photo

Sean Patrick Hagen

Just a Vancouver coder

Email Twitter Google+ Instagram Github Stackoverflow Pinterest Steam Flickr

So I ran into a problem with my new love, Octopress. I’m pseudo-live-blogging the CascadiaJS, and for one of the talks I wanted to show off a puzzle, along with the answer. To do this I’d need some sort of spoiler tag.

I did some searching, and I couldn’t find a ‘ready-to-go’ plugin for Octopress. I found a few big sites that use Markdown ( the default way of storing text in Octopress before it’s transformed to HTML ), and had modified it to allow users to put in spoiler tags. A good example is the Stack Overflow group of sites, which use an extension of blockquotes to do spoiler tags.

However, I wasn’t able to find a plug in that I could just drop into my site, and have it just work.

So, being a programmer, I made my own!

The code is up on GitHub, and I was actually pretty surprised at how easy it was to make. These are the only two files I needed to create in order to have spoiler tags:

Ruby Plugin

module Jekyll
  class SpoilerTag < Liquid::Tag
    def initialize(tag_name, text, token)
      super
      @text = text.strip
    end

    def render(context)
      "<div class='octopress-spoiler-tag'>#{@text}</div>"
    end

    private

    def get_config(string)
      Jekyll.configuration({})[string]
    end
  end
end

Liquid::Template.register_tag('spoiler', Jekyll::SpoilerTag)

Stylesheet

.octopress-spoiler-tag {

   background: black;
   color: black;

   &:hover {
      background: white;
   }

}

End Result

And here’s what it lets me do:

"Look at this saucy spoiler!"

Possible Modifications

Here’s a few things I’m thinking of changing so the spoiler tag becomes more useful:

  1. Maybe turn it into a plugin that works similar to the codeblock plugin
  2. Maybe make so that it also works as a plain markdown plugin for other systems, so that you can just do the following: >! text in a block like this is a spoiler!
  3. Have the plugin read from the configuration file so you can easily customize the colors if you don’t want to mess with the stylesheet

That’s about all I can think of right now. If you’ve got any ideas, fork the repo and send me some pull requests!