Joplin plugin for creating inline spoilers and spoiler blocks.
npm install joplin-plugin-spoiler-cardsPreferences > Plugins
Spoilers and click install
Tools > Options > Plugins
Spoilers plugin
Delete to remove the plugin or Disable to disable it
Spoiler button or
Ctrl + Alt + O
%%spoiler%%
`
$3
In order to create a spoiler block, you can:
- press on the Spoiler block button or
- use the shortcut Ctrl + Alt + P
- select text and use any of the previous options
- or manually write in the following format:
`
:[
Spoiler title here...
Spoiler body text here...
]:
`
Please note, that the empty line above and below spoiler body text is needed.
Spoiler title and body supports markdown formatting as well.
Example:
`
:[
3 ways to check if an Object has a property in JS
Using:
1. hasOwnProperty() method
2. in operator
3. Comparing with undefined
*
1) hasOwnProperty()
~~~js
const hero = {
name: 'Batman'
};
hero.toString; // => function() {...}
hero.hasOwnProperty('toString'); // => false
~~~
*
]:
`
Custom styles
If you would like to style the spoiler blocks to your preference, use the following in your userstyle.css file:
`css
/ Styling of the spoiler block title /
.summary-title {
}
/ Styling of the spoiler block body /
.summary-content {
}
`
$3
By default when exporting with spoiler blocks, the blocks get extended, show the body and hides the arrows. Inline spoilers stay hidden.
Alternately, if you would like to style the spoiler blocks to your liking when exporting, use the following in you userstyle.css file:
`css
@media print {
/ Hides the side arrow /
.summary-title:before {
content: "";
}
/ Container for spoiler blocks /
.spoiler-block {}
/ Container for spoiler title /
#spoiler-block-title {}
/ Container for spoiler body /
#spoiler-block-body {
/ Shows the body contents /
display: block;
animation: none;
}
}
``