06.10 basic markdown and text formatting - practicalseries/GitHub-Wiki-Design-and-Implementation GitHub Wiki

PAL Logo showing Wiki Documentation heading

6.10SpacerHeadings

Headings are created by adding hash signs # in front of a word or sentence. The number of hashes indicates the level of the heading: a single # indicates a level 1 heading, ## a level 2 all the way down to ###### (six hashes) which is a level 6 heading.

The headings can also be constructed using the HTML tags <h1></h1> … <h6></h6>.

Headings are also covered in section 16.5.2; this shows how headings are structured for the PracticalSeries Wikis and includes a lot of information about spacing and numbering and generally making the headings look better.

Headings level 1 and 2 are underlined. Headings get progressively smaller:

Clone a Wiki
Figure 6.3 β€” Markdown headings on GitHub

The above headings are produced with the following Markdown:

Markdown, HTML equivalence and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ πŸ”½ ${\large \color{#00C050}\text{H\ T\ M\ L}}$ πŸ”½ ${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ πŸ”½

# Heading level 1
## Heading level 2
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6


<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
Table 6.36 β€” Heading Markdown



Alternatives for heading 1 and 2     

Headings 1 and 2 can be recreated by adding equal signs = for heading level 1 or minus signs - for heading level 2.

The equals or minus signs must be added to the line immediately below the heading text. It doesn’t matter how many equals or minus signs, one will do, but often the signs are extended for the length of the heading text:

Markdown, HTML equivalence and GitHub output
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ πŸ”½ ${\large \color{#00C050}\text{H\ T\ M\ L}}$ πŸ”½ ${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ πŸ”½

Heading level 1
=====
Heading level 2
-----


<h1>Heading level 1</h1>
<h2>Heading level 2</h2>

Heading level 1

Heading level 2

Table 6.37 β€” Heading 1and 2 Markdown alternatives

Spacer${\LARGE \color{#C00000}\text{DO\ NOT\ USE\ EQUALS\ AND\ MINUS\ SIGNS\ FOR\ HEADINGS}}$

It is generally best not to use these alternatives; they only cover the first two heading levels β€” stick with the hashes.

⬆️ Top



6.10.1SpacerHeadings Markdown rules

❢ The first # must be at the start of a line
❷ The last # in the group must be followed by a space (before the heading text)
❸ All the text on the same line as the first # will form part of the heading
❹ Best practice dictates that each heading should be preceded by a blank line (it makes the text easier to read)
❺ Character for emphasis (bold, italic and underline) all work within headings
❻ Don’t use equal signs = or minus signs - to construct headings
List 6.10 β€” Headings Markdown rules

Note

Multiple consecutive spaces (from the space bar) are ignored in headings, other forms of space (e.g. the non-breaking space: &nbsp; see section 7.2) are not and these can be used to correctly space numbers and text within a header.

⬆️ Top



6.10.2SpacerHeading properties

The following are the GitHub properties applied to each heading:

HEADING MAIN WINDOW PROPERTIES SIDEBAR AND FOOTER VARIATIONS
# Heading 1 Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 32.0px
Line spacing: 40.0px (125%)
Underlined: Yes rgb(223, 228, 233) #DFE4E9
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 19.2px
Line spacing: 24.0px (125%)
Underlined: Yes rgb(223, 228, 233) #DFE4E9
## Heading 2 Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 24.0px
Line spacing: 30.0px (125%)
Underlined: Yes rgb(223, 228, 233) #DFE4E9
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 16.8px
Line spacing: 21.0px (125%)
Underlined: Yes rgb(223, 228, 233) #DFE4E9
### Heading 3 Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 20.0px
Line spacing: 25.0px (125%)
Underlined: No
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 15.0px
Line spacing: 18.75px (125%)
Underlined: No
#### Heading 4 Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 16.0px
Line spacing: 20.0px (125%)
Underlined: No
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 12.0px
Line spacing: 15.0px (125%)
Underlined: No
##### Heading 5 Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 14.0px
Line spacing: 17.5px (125%)
Underlined: No
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 10.5px
Line spacing: 13.13px (125%)
Underlined: No
###### Heading 6 Font: Segoe UI
Colour: rgb(89, 99, 110) #59636E
Font size: 13.6px
Line spacing: 17.0px (125%)
Underlined: No
Font: Segoe UI
Colour: rgb(89, 99, 110) #59636E
Font size: 10.2px
Line spacing: 12.75px (125%)
Underlined: No
Body text
(for comparison)
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 16.0px
Line spacing: 24.0px (150%)
Underlined: No
Font: Segoe UI
Colour: rgb(31, 35, 40) #1F2328
Font size: 12.0px
Line spacing: 18.0px (150%)
Underlined: No
Table 6.38 β€” Headings properties Differences are in bold

Note

These figures are for a Windows PC using a 2560 Γ— 1560 monitor at native resolution, the browser is Edge set to a zoom of 100%. Where there are differences between the columns, these are highlighted in bold.


⚠️ **GitHub.com Fallback** ⚠️