Markdown is an easy-to-read, easy-to-write language for formatting plain text. You can use Markdown syntax, along with some additional HTML tags, to format your writing on GitHub, in places like repository READMEs and comments on pull requests and issues.
A Markup language is a way of formatting and presenting text data in a different format.
A common use-case for markup language is to present data in HTML.
Markdown is a markup language that provides a shorthand syntax to format information into HTML. Markdown is popular due to easy syntax, and being readable in its raw format.
Caution
Do not confuse markup language with markdown:
- Markup is a general term referring to the process of adding tags to format a document
- Markdown is a specific lightweight markup language that simplifies this process and is used for creating content on various platforms in a straightforward manner.
Markdown extensions are .md
and .markdown
.
The general concept is:
We write in Markdown -> Its transform into HMTL -> An HTML preview is generated
All markdown parsers support the following markdown syntax:
To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.
# A first-level heading
## A second-level heading
### A third-level heading
Tip
With headings GitHub automatically generates a table of contents that you can access. Each heading title is listed in the table of contents and you can click a title to navigate to the selected section.
You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md
files.
Style | Syntax | Example | Output |
---|---|---|---|
Bold | ** ** or __ __ | **This is bold text** |
This is bold text |
Italic | * * or _ _ | *This text is italicized* |
This is bold text |
Strikethrough | ~~ ~~ | ~~This was mistaken text~~ |
|
Bold and nested italic | ** ** and _ _ | **This text is _extremely_ important** |
This text is extremely important |
All bold and italic | *** *** | ***All this text is important*** |
All this text is important |
Underline | <ins> </ins> |
This is a <ins>underline</ins> text |
This is a underline text |
Subscript | <sub> </sub> |
This is a <sub>subscript</sub> text |
This is a subscript text |
Superscript | <sup> </sup> |
This is a <sup>superscript</sup> text |
This is a superscript text |
You can quote text with a > for example > Text that is a quote
Text that is a quote
You can call out code or a command within a sentence with single backticks ` at the start and the end.
For example this is inline-code
To start and the block put 3 ` together ```.
This is a block code
Important
By writting the extension file behind the first 3 ``` the block its colored if code mach the extension file.
print("This it python code" )
You can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ), it will look like this GitHub Docs
This repo was built using [GitHub Docs](https://docs.github.com/).
You can define relative links and image paths in your rendered files to help readers navigate to other files in your repository.
The path of the link will be relative to the current file. Links starting with / will be relative to the repository root. You can use all relative link operands, such as ./ and ../.
For example Readme of this repo, the syntax is [Readme of this repo](README.md)
To use a image its very similar to a link, just add ! at the start
The syntax is ![Github foundation logo](https://github.com/Andresmup/github-foundations/blob/dev/images/GithubFundationBadget.png?raw=true)
A quick and easy way organize and separe sections of is using ---
, this generate a line in the file.
You can make an unordered list by preceding one or more lines of text with -, *, or +.
- Item
* Item
+ Item
Will look like this:
- Item
- Item
- Item
To order your list, precede each line with a number (if number are repeate it will autocorrect).
1. First item
2. Second item
2. Third item
Will look like this:
- First item
- Second item
- Third item
You can create a nested list by indenting one or more list items below another item.
1. First list item
- First nested list item
- Second nested list item
Will look like this:
- First list item
- First nested list item
- Second nested list item
- First nested list item
You can create tables with pipes | and hyphens ---. Hyphens are used to create each column's header, while pipes separate each column. You must include a blank line before your table in order for it to correctly render.
| Header | Header |
| --- | --- |
| Cell | Cell |
Will look like this:
Header | Header |
---|---|
Cell | Cell |
You can use formatting such as links, inline code blocks, and text styling within your table.
You can align text to the left, right, or center of a column by including colons : to the left, right, or on both sides of the hyphens within the header row.
| Left-aligned | Center-aligned | Right-aligned |
| :--- | :---: | ---: |
| Cell | Cell | Cell |
Will look like this:
Left-aligned | Center-aligned | Right-aligned |
---|---|---|
Cell | Cell | Cell |
You can create a new paragraph by leaving a blank line between lines of text.
You can add footnotes to your content by using this bracket syntax.
Here is a simple footnote[^1].
A footnote can also have multiple lines[^2].
[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
This is a second line.
Note
The position of a footnote in your Markdown does not influence where the footnote will be rendered. You can write a footnote right after your reference to the footnote, and the footnote will still render at the bottom of the Markdown.
You can add emoji to your writing by typing :EMOJICODE:, a colon followed by the name of the emoji.
:mate:
look like this 🧉
The Definition Lists extension adds the ability to create definition lists in Markdown documents.
Apple
: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange
: The fruit of an evergreen tree of the genus Citrus.
Will look like this:
- Apple
- Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
- Orange
- The fruit of an evergreen tree of the genus Citrus.
To create a task list, preface list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].
- [x] https://github.com/Andresmup/recursos-analisis-datos/pull/1
- [ ] https://github.com/Andresmup/recursos-analisis-datos/pull/2
- [ ] Complete markdown readme
Will look like this:
- Andresmup/recursos-analisis-datos#1
- Andresmup/recursos-analisis-datos#2
- Complete markdown readme
Important
If you want to refer to a issue or pull request in the same repo just use # follow by the number. If the issue or pull request is in other repo put the full link.
You can mention a person or team on GitHub by typing @ plus their username or team name. This will trigger a notification and bring their attention to the conversation. People will also receive a notification if you edit a comment to mention their username or team name.
@Andresmup make this repo.
Note
A person will only be notified about a mention if the person has read access to the repository and, if the repository is owned by an organization, the person is a member of the organization.
You can use HTML comment syntax to add a comment that will be hidden in the output.
<!-- This is a comment -->
Will look like this (nothing):
Every comment field on Github contains a text formatting toolbar, which allows you to format your text without learning Github-flavored Markdown syntax.
In addition to Markdown formatting like bold and italic styles and creating headers, links, and lists, the toolbar includes GitHub-specific features such as @-mentions, task lists, and links to issues and pull requests.
Note
Most of the times with the text formatting toolbar a preview option will appear to turn the raw markdown format into the final HTML render view.
You can enable a fixed-width font in every comment field on GitHub. Each character in a fixed-width, or monospace, font occupies the same horizontal space.
This can make it easier to edit advanced Markdown structures such as tables and code snippets.
Tip
Go to Settings -> Appearance -> Under "Markdown editor font preference" -> Select Use a fixed-width (monospace) font when editing Markdown.
Slash commands can save you time by reducing the typing required to create complex Markdown.
Slash commands (within comment boxes) on Github.com provides convenience features such as formatting markdown. You can use slash commands in any description or comment field in issues, pull requests, or discussions where that slash command is supported
You can use slash commands by typing the command in a comment field, then following the prompts. To insert complex Markdown into your comment, type one of the following commands.
Command | Description |
---|---|
/code | Inserts a Markdown code block. You choose the language. |
/details | Inserts a collapsible detail area. You choose the title and content. |
/saved-replies | Inserts a saved reply. You choose from the saved replies for your user account. If you add %cursor% to your saved reply, the slash command will place the cursor in that location. |
/table | Inserts a Markdown table. You choose the number of columns and rows. |
/tasklist | Inserts a tasklist. This slash command only works in an issue description. |
/template | Shows all of the templates in the repository. You choose the template to insert. This slash command will work for issue templates and a pull request template. |
GitHub Flavored Markdown (GFM), is the dialect of Markdown that is currently supported for user content on GitHub.com and GitHub Enterprise.
GMF provides powerfull functionality:
- Collapsable sections
- Embed mathematical expresions
- Embed diagrams
- Relatived paths or linking to files in the same repo
- Task lists can be converted into issues
- Extended formatting for tables
- Shorthands to autolink to issues, pull request and repos
- Render code snippets from other codebases via linking
Some GFM features that are updrages from markdown are:
- Support embedded syntax within tables
- Support advance cell alignment
- The
<details>
tag can be used to create collapsable sections
Mermaid is a Mardown-inspired tool that renders text into diagrams, which is really useful to render flow charts, sequence diagrams, pie charts and more.
To create a Mermaid diagram, add Mermaid syntax inside a fenced code block with the mermaid
language identifier.
graph TD
A[main] -->|start project| B[main]
B[main] --> C[main]
B[main] -->|new branch| D[dev]
D[dev] -->|commit| E[dev]
E[dev] -->|merge| C[main]
graph TD
A[main] -->|start project| B[main]
B[main] --> C[main]
B[main] -->|new branch| D[dev]
D[dev] -->|commit| E[dev]
E[dev] -->|merge| C[main]
You can use GeoJSON or TopoJSON syntax to create interactive maps. To create a map, add GeoJSON
or TopoJSON
inside a fenced code block with the geojson or topojson syntax identifier.
You can use ASCII STL syntax directly in markdown to create interactive 3D models. To display a model, add ASCII STL syntax inside a fenced code block with the stl
syntax identifier.
To enable clear communication of mathematical expressions, GitHub supports LaTeX formatted math within Markdown.
GitHub's math rendering capability uses MathJax; an open source, JavaScript-based display engine. MathJax supports a wide range of LaTeX macros, and several useful accessibility extensions.
Mathematical expressions rendering is available in GitHub Issues, GitHub Discussions, pull requests, wikis, and Markdown files.
There are two options for delimiting a math expression inline with your text. You can either surround the expression with dollar symbols $, or start the expression with $` and end with `$.
To add a math expression as a block, start a new line and delimit the expression with two dollar symbols $$.
Alternatively, you can use the ```math code block syntax to display a math expression as a block. With this syntax, you don't need to use $$ delimiters.
Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. On GitHub, they are displayed with distinctive colors and icons to indicate the significance of the content.
To add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. Five types of alerts are available:
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
Will look like this:
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Important
Key information users need to know to achieve their goal.
Warning
Urgent info that needs immediate user attention to avoid problems.
Caution
Advises about risks or negative outcomes of certain actions.
When viewing a Markdown file, you can click Code at the top of the file to disable Markdown rendering and view the file's source instead.
Disabling Markdown rendering enables you to use source view features, such as line linking, which is not possible when viewing rendered Markdown files.