# Plugin: Spoiler cards

**URL:** <https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660>\
**Category:** Plugins\
**Created:** [12 April 2021 13:12 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660 "2021-04-12T13:12:06Z")\
**Posts on this page:** 17\
**Page:** 2

<div class="post-metadata">

**Author:** ![eddym](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/eddym/32/6307_2.png) [@eddym](https://discourse.joplinapp.org/u/eddym)\
**Post date:** [12 May 2021 11:14 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/23 "2021-05-12T11:14:14Z")

</div>

Looks fine but still a question: How deep should nesting be possible and is it possible to give an example with 3 levels?

---

<div class="post-metadata">

**Author:** ![martinkorelic](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/martinkorelic/32/8329_2.png) [@martinkorelic](https://discourse.joplinapp.org/u/martinkorelic)\
**Post date:** [13 May 2021 09:44 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/24 "2021-05-13T09:44:36Z")

</div>

Hello @eddym, I have not intended to make nesting a thing originally, but now that I look at it could be a nice addition. Never tested if it could nest, so it could be buggy.

However you could do something like this for now:

```auto
:[
Level 1

Text
:[
Level 2

Text

:[
Level 3

Text

]:

```

Empty lines in between are needed.

 ![slika](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/339c7850fd6daf7147c775fe55997a2dfebf3657.png)

Looks like it can only directly nest on level 2 and deeper, so you won't be able to write anything after the nested spoiler block or add another spoiler block after.

---

<div class="post-metadata">

**Author:** ![eddym](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/eddym/32/6307_2.png) [@eddym](https://discourse.joplinapp.org/u/eddym)\
**Post date:** [13 May 2021 14:34 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/25 "2021-05-13T14:34:22Z")

</div>

Thanks! I tried even 4 levels and also that worked fabulous.  
The empty lines just after the title line and the one just before the final ]: are crucial.  
Just one other question but may be beyond your scope:  
If I use the MD editor in WYSIWYG mode ALL your beautiful marks disappear 😪  
and one has to edit it all back in the regular editor mode.

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [9 June 2021 13:50 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/26 "2021-06-09T13:50:30Z")

</div>

It is a bit confusing how to change the css of the spoiler cards in the viewer. I tried updating the `userstyle.css` it did not work. Then I edited the `spoiler-style.css` in `cache/joplin.plugin.spoiler.cards` but that had no effect. Turns out I had to edit the `spoiler.js` file. I managed to make the spoiler cards prettier.

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/4/4bae9c9608daca084a89c663b1efa8831219cb5b.png)

This the file in case anyone is interested to achieve similar results

[spoilers.js](https://discourse.joplinapp.org/uploads/short-url/9iV1Vqmp8YEp3KRats6DMH7VisV.js) (14.8 KB)

---

<div class="post-metadata">

**Author:** ![skim1124](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/skim1124/32/7296_2.png) [@skim1124](https://discourse.joplinapp.org/u/skim1124)\
**Post date:** [10 June 2021 02:12 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/27 "2021-06-10T02:12:47Z")

</div>

I can't get it to work. Am I supposed to rename your spoilers.js file as plugin\_joplin.plugin.spoiler.cards.js and then replace previous plugin\_joplin.plugin.spoiler.cards.js in the tmp folder? That's what I did, but I see no changes.

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [10 June 2021 04:07 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/28 "2021-06-10T04:07:24Z")

</div>

Did you restart Joplin?

---

<div class="post-metadata">

**Author:** ![skim1124](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/skim1124/32/7296_2.png) [@skim1124](https://discourse.joplinapp.org/u/skim1124)\
**Post date:** [10 June 2021 05:03 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/29 "2021-06-10T05:03:50Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [10 June 2021 05:41 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/30 "2021-06-10T05:41:48Z")

</div>

Not sure why you are mentioning the tmp folder. Are you sure you replaces the `spoiler.js` in the cahce folder `cache/joplin.plugin.spoiler.cards`. I have a portable installation of Joplin so I replace spoiler.js found in this folder: `D:\JoplinProfile\cache\joplin.plugin.spoiler.cards`

---

<div class="post-metadata">

**Author:** ![skim1124](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/skim1124/32/7296_2.png) [@skim1124](https://discourse.joplinapp.org/u/skim1124)\
**Post date:** [10 June 2021 06:07 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/31 "2021-06-10T06:07:58Z")

</div>

Ah, that was the problem. I had put it in the wrong folder. Now it's working. Thanks. I prefer your style to the default.

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [10 June 2021 06:30 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/32 "2021-06-10T06:30:40Z")

</div>

Glad I was able to help. Just FYI, I think in the same file there are options that control the way that spoiler card are exported to pdf as well but I did not change those.

---

<div class="post-metadata">

**Author:** ![martinkorelic](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/martinkorelic/32/8329_2.png) [@martinkorelic](https://discourse.joplinapp.org/u/martinkorelic)\
**Post date:** [12 June 2021 21:21 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/33 "2021-06-12T21:21:11Z")

</div>

hmm quite weird that you were not able to update the style with the `userstyle.css` as it works for me and it overwrites the base style from the plugin.

I did note in the file that `spoiler-style.css` is not being loaded when exporting pdf that is why I had to update css within the js file (that's where the css comes from).

If you need to update the way that the cards are being rendered into pdf you can do that with `@media print` and then use the classes inside.

Changing the style inside the plugin file just seems like such an inconvenient way of editing style 😕 , which is the opposite of what I'm trying to achieve.

---

<div class="post-metadata">

**Author:** ![meldarionqeusse](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/meldarionqeusse/32/5989_2.png) [@meldarionqeusse](https://discourse.joplinapp.org/u/meldarionqeusse)\
**Post date:** [13 June 2021 07:07 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/34 "2021-06-13T07:07:06Z")

</div>

Yes it would be ideal to just edit the .css file but that did not work for me whatever i put in the css it gets overriden by whatever is in the .js

---

<div class="post-metadata">

**Author:** ![kimcosmos](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kimcosmos/32/9730_2.png) [@kimcosmos](https://discourse.joplinapp.org/u/kimcosmos)\
**Post date:** [24 August 2021 09:47 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/35 "2021-08-24T09:47:39Z")

</div>

Inline spoilers seem to have have no userstyle.css option. I want to hide the body not by a black block. I want to use fancy math fonts with transparent tiny plain text. Am I missing something? Is there a way to set the inline spoiler style? Ideally hiding the inline spoiler just in an icon. Or can I hide selected text another way?

---

<div class="post-metadata">

**Author:** ![Mick2nd](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/mick2nd/32/10793_2.png) [@Mick2nd](https://discourse.joplinapp.org/u/Mick2nd)\
**Post date:** [14 September 2022 16:22 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/36 "2022-09-14T16:22:51Z")

</div>

Hi Everyone,

I'm a user of the Spoiler Cards plugin. Thank You for sharing it. I felt the strong need to make a little improvement on it. The obvious disadvantage of this plugin is, one cannot nest one spoiler block into another else at the end with one ending close token. My question was, if it would be possible to implement a computer language like behavior, where each opening token must be equipped with a closing token somewhere behind it.

Thanks to a little improvement, this is easily possible. All what you must do is to count and balance opening and closing tokens. Perhaps you can make the little change, which I send you with this message. Unfortunately I had no luck in creating a patch .. so the changed source should suffice.

Here is a test example of the improved plugin:

 ![Spoiler Cards Sample](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/6/63552cd4fc52d35fff7ac02cee41d836fea877f8.png)

And here the improved source with only a few lines changed:  
[spoilers.js](https://discourse.joplinapp.org/uploads/short-url/wVfl7kkTXtaFn19I7qk7zjqs74j.js) (15.5 KB)  
[Spoilers.unified.diff](https://discourse.joplinapp.org/uploads/short-url/cAkJWAl1LiztcXYGwCm6zYeGAns.diff) (2.9 KB)

Thanks  
Mick2nd

---

<div class="post-metadata">

**Author:** ![paco\_panda](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/paco_panda/32/20783_2.png) [@paco\_panda](https://discourse.joplinapp.org/u/paco_panda)\
**Post date:** [21 October 2022 05:47 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/37 "2022-10-21T05:47:36Z")

</div>

Works great, thanks a lot!

---

<div class="post-metadata">

**Author:** ![PackElend](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/packelend/32/488_2.png) [@PackElend](https://discourse.joplinapp.org/u/PackElend)\
**Post date:** [14 November 2022 07:54 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/38 "2022-11-14T07:54:02Z")

</div>

> [@Mick2nd](#):
>
> And here the improved source with only a few lines changed:  
> [spoilers.js](https://discourse.joplinapp.org/uploads/short-url/wVfl7kkTXtaFn19I7qk7zjqs74j.js) (15.5 KB)  
> [Spoilers.unified.diff](https://discourse.joplinapp.org/uploads/short-url/cAkJWAl1LiztcXYGwCm6zYeGAns.diff) (2.9 KB)

would that fix [line indent breaks Spoiler Blocks · Issue #11 · martinkorelic/joplin-plugin-spoilers · GitHub](https://github.com/martinkorelic/joplin-plugin-spoilers/issues/11) as well?

The second bullet point is not part of the block although ]: is after it:

 ![201604494-4025c796-44a8-434e-a788-2c64bca044071](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/d/ddf995e2eb9593bb0ad1e7d23cc16d2421b7a7fe.png)

---

<div class="post-metadata">

**Author:** ![Mick2nd](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/mick2nd/32/10793_2.png) [@Mick2nd](https://discourse.joplinapp.org/u/Mick2nd)\
**Post date:** [14 November 2022 15:10 UTC](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660/39 "2022-11-14T15:10:59Z")

</div>

Yes, it would!  
See the following screen shot:

 ![Spoiler with Bullet](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3e92767c8b99d73a52aebf3e02b5db8687fecbc4.png)

[Previous page](https://discourse.joplinapp.org/t/plugin-spoiler-cards/16660.md?page=1)