CODEWITHSUNDEEP
markdown
Mazin Ismail
Mazin Ismail

Reputation: 103

How to make heading collapsible in Readme markdown file for GitHub?

How to make heading collapsible in Readme markdown file for GitHub. I want it for heading not for any specific text but header.

Upvotes: 6

Views: 3697

Answers (3)

Ved Prakash
Ved Prakash

Reputation: 121

If you are using jekyll along with markdown: kramdown, you want want to add below config

#using kramdown html processor
markdown: kramdown
kramdown:
  **parse_block_html: true**

You may want to write summary as below

<summary markdown='span'>What is CSF</summary>

Upvotes: 1

s6mike
s6mike

Reputation: 576

You can use this feature with headings: Organizing information with collapsed sections - GitHub Docs

e.g.

<details>
<summary>
Installation
</summary>

## Installation
</details>

Becomes:

collapsed

which opens to:

open

Upvotes: 4

Waylan
Waylan

Reputation: 42467

You can't. For security reasons, GitHub will strip out any code which would accomplish what you want.

As a reminder, Markdown simply renders to HTML. So the answer to your question would be the same as it would for HTML. You would need some CSS and/or JavaScript to control the accordion-like behavior (see multiple examples here). However, for security reasons, GitHub does not allow CSS or JavaScript from users on its site and therefore they strip all CSS and JavaScript out after rendering the Markdown to HTML.

GitHub documents how they process user supplied markup in github/markup. As described in step 1 there, your Markdown is converted to HTML. However, in step 2:

  1. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

That being the case, there is no way to provide the necessary JavaScript and/or CSS needed to accomplish what you want.

As an alternative, you may want to consider hosting your documents on a site which does not provide such restrictions.

Upvotes: 3

Related Questions