Skip to content

details shortcode: add example of both alternatives #783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+14 −5
Open

details shortcode: add example of both alternatives #783

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ffdc925
details shortcode: add example of both alternatives
inphobia Oct 19, 2025
4f76a74
roll back steps.md
inphobia Oct 31, 2025
0385310
positional vs argument. bonus typo fix
inphobia Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,10 @@ In fact almost empty not quite empty because an empty file looks like absent for
- [Columns](https://hugo-book-demo.netlify.app/docs/shortcodes/columns/)
- [Details](https://hugo-book-demo.netlify.app/docs/shortcodes/details/)
- [Hints](https://hugo-book-demo.netlify.app/docs/shortcodes/hints/)
- [KaTeX](https://hugo-book-demo.netlify.app/docs/shortcodes/katex/)
- [Mermaid](https://hugo-book-demo.netlify.app/docs/shortcodes/mermaid/)
- [Steps](https://hugo-book-demo.netlify.app/docs/shortcodes/steps/)
- [Tabs](https://hugo-book-demo.netlify.app/docs/shortcodes/tabs/)
- [KaTeX](https://hugo-book-demo.netlify.app/docs/shortcodes/katex/)

By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering. It is recommended to set `markup.goldmark.renderer.unsafe=true` if you encounter problems.

Expand Down
14 changes: 11 additions & 3 deletions exampleSite/content.en/docs/shortcodes/details.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
# Details

Details shortcode is a helper for `details` html5 element. It is going to replace `expand` shortcode.
Details shortcode is a helper for `details` html5 element. To collapse the details either omit the `open`
keyword or set `open=false`.

## Example
## Example 1
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better as ## Example with positional arguments

```tpl
{{%/* details "Title" [open] */%}}
## Markdown content
Lorem markdownum insigne...
{{%/* /details */%}}
```

{{% details "Title" open %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}

## Example 2
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, I think it would be better as ## Example with parameters

```tpl
{{%/* details title="Title" open=true */%}}
## Markdown content
Lorem markdownum insigne...
{{%/* /details */%}}
```

{{% details "Title" open %}}
{{% details title="Title" open=true %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}
14 changes: 7 additions & 7 deletions exampleSite/content.en/docs/shortcodes/steps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ Steps shortcode styles numbered list as series of points for better content orga
1. ## Suspendisse sed congue orci.
...

2. ## Maecenas scelerisque sem.
1. ## Maecenas scelerisque sem.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert this file :)

...

3. ## Etiam risus purus.
1. ## Etiam risus purus.
...

4. ## Curabitur sed lacinia velit.
1. ## Curabitur sed lacinia velit.
...
{{%/* /steps */%}}
```
Expand All @@ -24,12 +24,12 @@ Steps shortcode styles numbered list as series of points for better content orga
1. ## Suspendisse sed congue orci.
Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. Curabitur pellentesque sodales ipsum, sed efficitur libero euismod ac. Donec sit amet erat nunc. Suspendisse porta nisl velit, quis auctor massa commodo nec. Donec sollicitudin tellus sit amet massa condimentum luctus. Etiam molestie at ante et convallis.

2. ## Maecenas scelerisque sem.
1. ## Maecenas scelerisque sem.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert this file :)

Maecenas scelerisque sem a tellus dignissim, in sodales neque varius. Integer quis ex quis sem posuere consequat. Morbi interdum ex et mollis maximus. Proin sed quam nisl. Donec tempus non risus vel auctor. Ut ultricies vitae urna in laoreet. Phasellus cursus nunc sit amet sodales euismod. Suspendisse potenti.

3. ## Etiam risus purus.
1. ## Etiam risus purus.
Etiam risus purus, suscipit a orci quis, mollis mollis ante. Vestibulum congue nisl malesuada tortor egestas, a lobortis tellus dictum. Nam nec ultrices justo. Donec malesuada dignissim posuere.

4. ## Curabitur sed lacinia velit.
1. ## Curabitur sed lacinia velit.
Curabitur sed lacinia velit. Nullam sed ante non quam lobortis hendrerit. Phasellus elementum, erat sit amet imperdiet pulvinar, odio massa lobortis ipsum, in tincidunt metus dolor vel ligula.
{{% /steps %}}
{{% /steps %}}