Skip to content

GitHub collapse markdown

Rob Garrison edited this page Oct 3, 2016 · 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, you can install it as a browser addon. Check out Octopatcher!

Screenshot

github-collapse-markdown-settings

github-collapse-markdown

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.1.3 & 1.1.4 (10/3/2016)

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

Version 1.1.2 (10/2/2016)

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

Version 1.1.1 (9/12/2016)

  • Beautify.

Version 1.1.0 (7/30/2016)

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

Version 1.0.1 (7/5/2016)

  • Don't toggle on link & image clicks.

Version 1.0.0 (6/27/2016)

  • Initial commit.
Clone this wiki locally