How to
<details>
<summary>Click me</summary>
### Heading
1. Foo
2. Bar
* Baz
* Qux
### Some Code
```js
function logSomething(something) {
console.log('Something', something);
}
```
</details>Example
Click me
Heading
- Foo
- Bar
- Baz
- Qux
Some Code
function logSomething(something) {
console.log('Something', something);
}Rules
- Have an empty line after the
</summary>tag or markdown/code blocks will not render. - Have an empty line after each
</details>tag if you have multiple collapsible sections.
Great Gist! Thanks so much! I made an even shorter summary from this Gist that integrates the rules as HTML comments (and another minor rule I found). You can delete the HTML comments if you trust yourself to remember the 2 empty lines.
@vjpr You can do this with a bookmarklet.
javascript: (() => { const ele = document.activeElement; ele.setRangeText('<details>\n <summary> Always visible. Can **ONLY** be plaintext </summary>\n<!-- empty line -->\n Collapsible content (Markdown-stylable)\n</details>\n<!-- empty line -->', ele.selectionStart, ele.selectionEnd, 'select'); })();@stephnelsonCO thanks for sharing Text Blaze! Looks like a cool tool! More efficient than the bookmarklet but maybe not as satisfying as the DIY approach🤓
And a more minimalist version: