Hugo (inline) Spoiler shortcode

December 2020 431 3 mins Hugo

Shortcode to include inline spoilers in markdown which are hidden by default and revealed on hover. The spoiler will be automatically hidden again when no longer hovered.

This article was written for Hugo 0.79.

This is a very simple, pure CSS, shortcode. If more features (permanent reveal, copy protection, …) are required one has to use Javascript. This shortcode will only work for inline text which does not contain elements other than text or other inline elements. Hence pictures, or multiple paragraphs cannot be hidden with this implementation. When selecting the text the content will not be revealed, however it can be copied without revealing.

Usage

There are no options, add the content inside the spoiler tag and your are done.

Example

Cras in facilisis neque, {{/*< inlinespoiler >*/}}vitae semper enim{{/*< /inlinespoiler >*/}}.

Cras in facilisis neque, vitae semper enim. Quisque vulputate magna sit amet diam malesuada porta. Vivamus fermentum nisl eget porta blandit. Sed ultricies sodales mauris, vel tincidunt ligula efficitur ut. Nunc dignissim porttitor erat, sed interdum risus maximus condimentum. Vivamus dictum odio et lacus eleifend commodo. Morbi malesuada odio at nisi lobortis ultricies.Suspendisse tempus laoreet sapien, ac pretium felis molestie at. Etiam ante felis, aliquet vel efficitur a, egestas id tellus. Nullam fringilla velit quis ligula sollicitudin congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Nam finibus molestie velit non aliquam. Praesent rhoncus feugiat rhoncus. Nam sed vulputate sem. Curabitur sapien dui, iaculis ut dui vitae, mollis pharetra neque. Nunc auctor nisl eget metus mollis, a consequat ante elementum. Integer vestibulum interdum tellus, nec tempor metus. Nam in est sed massa suscipit commodo. Nam eu suscipit velit. Fusce vel varius nisi. Sed quis eros ultrices, pharetra orci at, fermentum lectus. Duis aliquet iaculis mi, in condimentum nisl porttitor ac. Vivamus iaculis tempus placerat. Cras efficitur nibh a finibus luctus.

Code

The shortcode is trivial and consists of just a span element with hover effect.

1
<span class="inline-spoiler">{{- .Inner | safeHTML -}}</span>

The accompanying SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.inline-spoiler {
  position: relative;
  display: inline-block;
  cursor: help;
}

.inline-spoiler::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  color: white;
  background: black;
  opacity: 1;
  transition: opacity 0.7s ease, transform 0.3s ease;
}

.inline-spoiler:hover::before {
  opacity: 0;
  transform: translateY(-50%)rotateX(80deg);
  transition: opacity 1.0s ease, transform 0.5s ease;
  transition-delay: 0.3s; // To not accidentally reveal the spoiler when hovering over the page
}

Attachments

inlinespoiler.html.txt
(61b)
inlinespoiler.scss
(571b)

Permalink: //oostens.me/posts/hugo-inline-spoiler-shortcode/
License: The text and content is licensed under CC BY-NC-SA 4.0. All source code I wrote on this page is licensed under The Unlicense; do as you please, I'm not liable nor provide warranty.

Noticed an error in this post? Corrections are appreciated.