https://github.com/strappazzon/jekyll-spoiler

💎 Jekyll support for spoiler text as Liquid filter and tag
https://github.com/strappazzon/jekyll-spoiler

jekyll jekyll-plugin liquid-filters liquid-tag ruby-gem

Last synced: 3 months ago
JSON representation

💎 Jekyll support for spoiler text as Liquid filter and tag

• Host: GitHub
• URL: https://github.com/strappazzon/jekyll-spoiler
• Owner: Strappazzon
• License: mit
• Created: 2025-05-05T12:58:05.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-05-17T14:11:34.000Z (about 1 year ago)
• Last Synced: 2025-06-30T11:18:42.571Z (12 months ago)
• Topics: jekyll, jekyll-plugin, liquid-filters, liquid-tag, ruby-gem
• Language: Ruby
• Homepage: https://strappazzon.xyz/jekyll-spoiler/demo/
• Size: 40 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: .github/README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.txt
  • Codeowners: .github/CODEOWNERS
  • Support: SUPPORT.md

Awesome Lists containing this project

README

          



  





  jekyll-spoiler





  Jekyll support for spoilers



## Installation

Add one of these lines to your `Gemfile`:

```rb

# always use the latest version

gem 'jekyll-spoiler'

# use pessimistic lock

gem 'jekyll-spoiler', '~> 1.0'

# fetch gem from git

gem 'jekyll-spoiler', git: 'https://github.com/Strappazzon/jekyll-spoiler.git', tag: '1.0.0'

```

Then execute `bundle install` to install the Gem.

## Getting Started

1. Use the Liquid filter and/or tag in your website

    - Use this to add spoiler text:

      ```liquid

      {{ "Lorem ipsum dolor sit amet." | spoiler }}

      ```

    - Use this to add collapsible spoiler text:

      ```liquid

      {% spoiler %}

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Ut enim ad minim veniam, quis nostrud exercitation ullamco.

      {% endspoiler %}

      {% spoiler title="Spoilers Ahead!" %}

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        Ut enim ad minim veniam, quis nostrud exercitation ullamco.

      {% endspoiler %}

      ```

2. Style the spoiler using CSS.  

   An example can be found here: [`docs/_sass/_spoiler.scss`](../docs/_sass/_spoiler.scss).