Skip to content

GitHub collapse markdown

Rob Garrison edited this page Oct 24, 2022 · 25 revisions

A userscript that collapses markdown headers

  • This script makes all markdown headers clickable and toggles the view of all content between same level headers (e.g. between H2 headers).
  • It works on readme, issues, markdown preview, wiki & gist pages. Pretty much everywhere on GitHub.
  • Click on any header to toggle the view of the content below it.
  • Use Shift + Click to toggle the view of all same level header content.
  • When the content of a header is expanded, all sub-headers are also expanded.
  • Links within the header are still clickable.
  • Can be used along with the GitHub-table-of-contents & the GitHub-collapse-in-comment userscripts.
  • Use the userscript addon to change these settings (see screenshot below):
    • "Set collapse markdown state" to collapsed (expanded by default) which collapses all header content initially.

    • "Set collapse markdown colors" to an JSON array with six color values (accepts named, hex, rgb, hsl, etc). For example:

      // palette generated by http://tools.medialab.sciences-po.fr/iwanthue/
      // (colorblind friendly; soft)
      ["#6778d0", "#ac9c3d", "#b94a73", "#56ae6c", "#9750a1", "#ba543d"]
    These six colors apply to the H1 through H6 header arrows respectively.
    • After changing either option, make sure to reload the page (Shift + F5) to have the updated setting take effect.
  • Click this link to install from GitHub; or, install from GreasyFork or OpenUserJS.
  • Or, you can install it as a browser addon. Check out Octopatcher!

Screenshot

Example

  • Use with userscript installed
  • Note: Shift + clicking on an H2 header below will also collapse this example block.

Header 1

  • Inside header 1

Header 2

  • Inside header 2
  • Inside header 2

Header 3

  • Inside header 3

Header 3

  • Inside header 3

Header 4

  • Inside header 4
Header 5
  • Inside header 5
  • Inside header 5
Header 5
  • Inside header 5
Header 6
  • Inside header 6

Header 4

  • Inside header 4
  • Inside header 4

Header 3

  • Inside header 3

Header 3

  • Inside header 3

Header 2

  • Inside header 2

Header 3

Header 4

  • Inside header 4
  • Inside header 4

Change Log

Version 1.2.3 (2022-10-24)

  • Update dependencies

Version 1.2.2 (2021-07-21)

  • Update mutation script.

Version 1.2.1 (2021-01-31)

  • Update mutation script.

Version 1.2.0 (2019-03-29)

Version 1.1.13 (2019-02-16)

  • Update GitHub icon.

Version 1.1.12 (2018-01-18)

  • Update assets.

Version 1.1.11 (2017-10-03)

  • Fix undefined variable.

Version 1.1.10 (2017-10-01)

  • Code cleanup. Update to match Octopatcher code.

Version 1.1.9 (2017-05-24)

  • Fix javascript error.

Version 1.1.8 (2017-05-16)

  • Change license to MIT.

Version 1.1.7 (2017-03-25)

  • Fix linting.

Version 1.1.6 (2017-01-11)

  • Clean up "closest" function.
  • Use classList toggle.

Version 1.1.5 (2016-12-18)

  • Make user set options case-insensitive

Version 1.1.3 & 1.1.4 (2016-10-03)

  • Show current state when changing option.
  • Make code work on Firefox. Fixes issue #13.

Version 1.1.2 (2016-10-02)

  • Change collapse markdown state choices to "collapsed" or "expanded".

Version 1.1.1 (2016-09-12)

  • Beautify.

Version 1.1.0 (2016-07-30)

  • Add support for GitHub-FixedHeader style.
  • Include GitHub help pages.
  • Fix lint & a code tweak.

Version 1.0.1 (2016-07-05)

  • Don't toggle on link & image clicks.

Version 1.0.0 (2016-06-27)

  • Initial commit.
Clone this wiki locally