2024 May Release

Collapsible ExtensionPermanent link for this heading

Fabasoft Flavored Markdown introduces the “Collapsible” extension, building upon the fenced code block already existing in CommonMark. This extension enables users to create collapsible sections of content with a displayed title. When rendered, for instance, as HTML, it comprises the HTML elements details and summary.

Collapsible SectionPermanent link for this heading

To create a collapsible section, the following syntax is used:

Example

```fenced-extension collapsible summary="Title" open
Content
```

In this syntax:

  • The backtick symbol ` is utilized as the delimiter for both the beginning and end of the collapsible section.
  • The use of fenced-extension is necessary to identify it as a specific type of fenced code block.
  • The inclusion of collapsible specifies the type of fenced extension to be employed.
  • Optional parameters can be added at the end, including:
    • summary, which dictates the content displayed as the title of the collapsible section     when it is collapsed. The summary element only accepts plain text. If not provided, the title will be empty.
    • open, which allows the collapsible section to remain expanded by default. If omitted, the section will start collapsed.
  • Content is the visible content when the section is expanded, possibly including various types of blocks and inline elements.

Nesting Multiple Collapsible SectionsPermanent link for this heading

Nesting multiple collapsible sections can be done by adding a backtick ` to the outer collapsible section:

Example

````fenced-extension collapsible summary="Outer collapsible"
Outer collapsible content
```fenced-extension collapsible summary="Inner collapsible"
Inner collapsible content
```
Outer collapsible content
````

It is possible to nest collapsible sections up to a depth of 19 levels:

Example

`````````````````````fenced-extension collapsible summary=19 open
````````````````````fenced-extension collapsible summary=18 open
```````````````````fenced-extension collapsible summary=17 open
``````````````````fenced-extension collapsible summary=16 open
`````````````````fenced-extension collapsible summary=15 open
````````````````fenced-extension collapsible summary=14 open
```````````````fenced-extension collapsible summary=13 open
``````````````fenced-extension collapsible summary=12 open
`````````````fenced-extension collapsible summary=11 open
````````````fenced-extension collapsible summary=10 open
```````````fenced-extension collapsible summary=9 open
``````````fenced-extension collapsible summary=8 open
`````````fenced-extension collapsible summary=7 open
````````fenced-extension collapsible summary=6 open
```````fenced-extension collapsible summary=5 open
``````fenced-extension collapsible summary=4 open
`````fenced-extension collapsible summary=3 open
````fenced-extension collapsible summary=2 open
```fenced-extension collapsible summary=1 open
content
```
````
`````
``````
```````
````````
`````````
``````````
```````````
````````````
`````````````
``````````````
```````````````
````````````````
`````````````````
``````````````````
```````````````````
````````````````````
`````````````````````

Using more than 19 nested collapsible sections is prohibited.

Using the Tilde SymbolPermanent link for this heading

It is also possible to use the tilde symbol ~ instead of the backtick symbol ` for delimiting collapsible sections, as demonstrated below:

Example

~~~fenced-extension collapsible summary="Title"
Content
~~~

When employing ~ instead of ` for delimiting collapsible sections, the same rules still apply. It is important to note that mixing these two delimiters within the same collapsible section is not permitted; if one is used, the other cannot be used for the same section. However, collapsible sections with different delimiters can still be nested inside each other.

Example

~~~~fenced-extension collapsible summary="Tilde"
Outer collapsible content
```fenced-extension collapsible summary="Backtick"
Inner collapsible content
```
Outer collapsible content
~~~~

````fenced-extension collapsible summary="Backtick"
Outer collapsible content
~~~fenced-extension collapsible summary="Tilde"
Inner collapsible content
~~~
Outer collapsible content
````

Summary and ContentPermanent link for this heading

Though the title (summary) is restricted to plain text, the content within the collapsible section can encompass any existing block or text with markup available in Fabasoft Flavored Markdown. Examples of this can be observed below.

Example

```fenced-extension collapsible summary="Heading"
# Heading inside the collapsible section
```

```fenced-extension collapsible summary="Emphases"
***This text is bold and italic***
```

```fenced-extension collapsible summary="List"
- Item one
- Item two
- Item three

* Item one
* Item two
* Item three
```

```fenced-extension collapsible summary="Link"
[Example](www.example.com)
```