Advanced Formatting in GitHub Markdown

Table of Contents

Advanced Formatting in GitHub Markdown

Sưu tập từ:

https://gist.github.com/apaskulin/1ad686e42c7165cb9c22f9fe1e389558#your-anchor-name


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>


Make button

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Ctrl + C

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

To make George eat an apple, press Shift+F3

View > Syntax > OpenGL Shading Language > GLSL

File | New

https://meta.stackexchange.com/questions/193531/what-is-the-markdown-for-menu-options

Chữ gạch ngang

~~this~~ this

Youtube

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

Everything Is AWESOME

https://stackoverflow.com/questions/11804820/how-can-i-embed-a-youtube-video-on-github-wiki-pages

SVG Embed (Nhúng SVG)

![soiqualang](http://dev.dothanhlong.org/tmp/t1.svg)

soiqualang

https://stackoverflow.com/questions/14951321/how-to-display-html-content-in-github-readme-md

svg html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">
        <ul>
            <li>text</li>
        </ul>
        <!-- Other embed HTML element/text into SVG -->
    </div>
</foreignObject>
</svg>
  • text

Random hình ảnh

![Soi's test](https://demo.vinagit.com/AgriVinaGIT/api/randimg/B%C3%B4ng%20v%E1%BA%A3i.jpg)

Soi's test

Shields

![Soi's test](https://img.shields.io/badge/soiqualang-website-red)

Soi's test

GitHub Badge

Twitter Badge

Google Scholar Badge

YouTube Badge

LinkedIn Badge

CV Badge

Donate Badge


Custom shield

https://shields.io/

https://img.shields.io/badge/soiqualang-website-red

Donate Badge

Top Languages Card

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=soiqualang&langs_count=8)](https://github.com/soiqualang/Py4Sqlite3)

Top Langs

Compact Language Card Layout

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=soiqualang&langs_count=8&layout=compact)](https://github.com/soiqualang/Py4Sqlite3)

Top Langs

GitHub Extra Pins

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=soiqualang&repo=Vietnam_map_history)](https://github.com/soiqualang/Vietnam_map_history)

ReadMe Card

Showing icons

![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=soiqualang&show_icons=true)

Anurag's github stats

Adding private contributions count to total commits count

![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=soiqualang&count_private=true)

Anurag's github stats

Footnotes

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

Here's a simple footnote,1 and here's a longer one.2

Tables

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |
Syntax Description
Header Title
Paragraph Text

Alignment

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |
Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

Strikethrough

~~The world is flat.~~ We now know that the world is round.

The world is flat. We now know that the world is round.

Task Lists

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

Color

https://via.placeholder.com/50/f03c15/000000?text=+

+ C +
- O -
! L !
@@ O @@
# R #
S
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@

#f03c15

🔴🟡🟢🔵

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0

https://github.com/github/markup/issues/1440 https://stackoverflow.com/questions/11509830/how-to-add-color-to-githubs-readme-md-file


References

https://gist.github.com/soiqualang/61bad7aa665290ef1bd034f240ee1b0d 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 https://www.markdownguide.org/extended-syntax/#fn:1

  1. This is the first footnote.

  2. Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like.

Leave a Reply

Your email address will not be published. Required fields are marked *