Install

npm install hexo-spoiler --save

If hexo can't detect this plugin automatically, you need to modify the plugins section of [path_to_your_site]/_config.yml manually, like:

plugins:
 - hexo-spoiler

Syntax

{% spoiler option:value text... %}

All options must match the <option>:<value> format. Texts starting from the first invalid option will be considered normal text.

Available options:

|Option name|Type|Option value|Effect| |-|-|-|-| |style|string|blur or box|The spoiler text will be blurred or covered by a box. The default style is blur.| |color|string|All valid css colorsNO spaces allowed for inline option!|Only works in style:box, changes the color of the box. The default color is black| |p|boolean(in _config.yml or front-matter)string(in inline options)|empty or any string|The spoiler text will be wrapped by <p> rather than <span>. Add this if you want newline before & after spoiler text. For inline options, assign any value (except "false") or even omit it turns this on; "false" means off. The default state is off.|

Examples and preview

You can set these options globally or for a single post or for a single usage:

Global config (in blog's _config.yml):

# ... other configs
# be top-level
spoiler:
  style: blur
  p: true

Config for single post (in post's front-matter):

---
title: blah blah
spoiler:
  style: box
  color: yellow
  p: false
---

Config priority: inline option > front-matter > _config.yml > default

NOTE: Run hexo clean if you changed the global _config.yml.

Limitations

• Due to the limitations of hexo tags, context-related features like markdown footnote will not be rendered correctly. The renderer instance is different from what is used in post rendering, so it has no knowledge about context.
• Block elements like <blockquote>, <figure> is not supported.