Skip to content

Instantly share code, notes, and snippets.

@apaskulin
Created April 15, 2018 17:49
Show Gist options
  • Star 65 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save apaskulin/1ad686e42c7165cb9c22f9fe1e389558 to your computer and use it in GitHub Desktop.
Save apaskulin/1ad686e42c7165cb9c22f9fe1e389558 to your computer and use it in GitHub Desktop.
Tips and tricks for more formatting options in GitHub Markdown

Advanced Formatting in GitHub Markdown

GitHub Flavored Markdown lets you create useful documents in GitHub and GitHub Enterprise using .md files. Like other varieties of markdown, GitHub Markdown tries to be as readable as possible in its raw form, resulting in an intentionally limited set of formatting options. However, these options can feel restrictive when dealing with complex content.

Although GitHub Markdown strips out most HTML tags, here are a few tricks that can give you more flexibility when formatting your documents. These advanced formatting options can make your documents more useable, but they come at the expense of plain text readability, so use with caution.

Check out this excellent cheatsheet for an overview of standard formatting in GitHub Markdown.

Images


To left align and resize an image:



Use:

<img align="left" width="200" src="https://apaskulin.github.io/waxtechnical/images/pup.jpg">


To right align and resize an image:



Use:

<img align="right" width="200" src="https://apaskulin.github.io/waxtechnical/images/pup.jpg">


To center and resize an image:

Use:

<p align="center">
  <img width="300" src="https://apaskulin.github.io/waxtechnical/images/pup.jpg">
</p>


Dropdowns

To create a dropdown containing text:

Example This is a dropdown with text!

Use:

<details>
<summary>Example</summary>
This is a dropdown with text!
</details>


To create a dropdown containing a list:

Example
  • This dropdown contains
  • a list!

Use:

<details>
<summary>Example</summary>
<ul><li>This dropdown contains</li>
<li>a list!</li></ul>
</details>


To create a dropdown containing an image:

Example

Use:

<details>
<summary>Example</summary>
<img src="https://apaskulin.github.io/waxtechnical/images/pup.jpg" width="500">
</details>


To create a dropdown containing code:

Example
This dropdown contains
a code block!

Use:

<details>
<summary>Example</summary>
<pre>$ This dropdown contains<br>a code block!</pre>
</details>


Buttons

To create a single button:

Click here

Use:

|[Click here](https://github.com/)|
|---|


To create a row of buttons:

Click here Or here Or here

Use:

|[Click here](https://github.com/)|[Or here](https://github.com/)|[Or here](https://github.com/)|
|---|---|---|


Anchor links

To link to a heading:

This is an example of an anchor link to a heading.

Use:

This is an example of an [anchor link](#anchor-links) to a heading.


To create an anchor anywhere on the page, use:

<a name="your-anchor-name">

To reference it:

This is an example of an anchor link anywhere on the page.

Use:

See [creating an anchor link anywhere](#manual-anchor).


Horizontal line

To create a horizontal line:


Use:

---


Extra space

To add extra space, use one or more:

<br>


References

GitHub Flavored Markdown Spec - https://github.github.com/gfm/
Advanced Markdown with David Wells - https://github.com/DavidWells/advanced-markdown
Markdown Cheatsheet PDF - https://enterprise.github.com/downloads/en/markdown-cheatsheet.pdf

@ryan-k8
Copy link

ryan-k8 commented Aug 8, 2021

altho this is very old but helped me out 👍

@gucio321
Copy link

any ideas how to create list of dropdowns with images?
like:

- <details><summary>something</summary>
<img src=https://img.search.brave.com/PDAJxThFh6dnZO6hFzIdctocokFS0mFIqTEairG70ko/rs:fit:1200:1156:1/g:ce/aHR0cDovL3BuZ2lt/Zy5jb20vdXBsb2Fk/cy9naXRodWIvZ2l0/aHViX1BORzIwLnBu/Zw>
</details>
  • something

@Sasha-hk
Copy link

any ideas how to create list of dropdowns with images?
like:

- <details>
  <summary>something</summary>
  <img src=https://img.search.brave.com/PDAJxThFh6dnZO6hFzIdctocokFS0mFIqTEairG70ko/rs:fit:1200:1156:1/g:ce/aHR0cDovL3BuZ2lt/Zy5jb20vdXBsb2Fk/cy9naXRodWIvZ2l0/aHViX1BORzIwLnBu/Zw>
  </details>
  • something

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment