Giter Club home page Giter Club logo

readme-markdown-syntax's Introduction

The Complete Guide of
Readme Markdown Syntax

Markdown is a syntax for styling all forms of writing on the GitHub platform. Mostly, it is just regular text with a few non-alphabetic characters thrown in, like git # or *

You can use Markdown most places around GitHub:

  1. Gists
  2. Comments in Issues and Pull Requests
  3. Files with the .md or .markdown extension

Headers

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Font

*Italics*
_This will also be italic_
**Bold text**
__This will also be bold__
***Bold and Italics***
_You **can** combine them_
~~Striked Text~~
***~~Italic, bold, and strikethrough1~~***	

Italics
This will also be italic
Bold Text
This will also be bold
You can combine them
Bold and Italics
Striked Text Italic, bold, and strikethrough1


Lists

Unordered

* Item 1
* Item 2
  * Item 1a
  * Item 2a
     * Item 1b
     * Item 2b
  • Item 1
  • Item 2
    • Item 1a
    • Item 2a
      • Item 1b
      • Item 2b

OR - Item 1

  • Item 1

Ordered

1. First
2. jhg
   1. Second
   2. jhg
      1. Third
      2. jhg
  1. First
  2. jhg
    1. Second
    2. jhg
      1. Third
      2. jhg

Links

* [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github "more info")
* https://www.google.com/
* <https://www.google.com/>

Link Label

[My GitHub][GitHubLink]

My GitHub

You may define your link label anywhere in the document.

e.g. put on bottom: 

--------------------------------
[GitHubLink]:https://github.com/darsaveli

Links to the URLs in a repository

[Example document](/example/example.md)

Example document

[example](./example)

example


Inserting Images or Gifs using links

![alt](URL "title")
  • alt in square bracket indicates the replacement text when the image fails to display (can be omitted)
  • parenthesis contains image source
  • title in quotes indicates the text to display when the mouse hovers over the image (can be omitted)

Nite: Dropping the image to the readme file will upload it automatically with this syntax; It's the same as links, but add an exlamation mark (!) before opening square bracket; Image source can be either a location from the local machine or any valid image URL;

Example

![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "Github logo") 

Octocat

Resize images/Gifs

<img src="https://github.com/darsaveli/Mariam/blob/main/1479814528_webarebears.gif" width="385px" align="center">

You can use HTML tags like width="385px", hight="876px", align="center", etc depending what you need. In this case this gif was once uploaded to the repository and the link was taken from there.

Other options to resize:

  • ![](https:// link | width=100)

Linking Image/Gif

To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![Octocat](https://user-images.githubusercontent.com/81953271/124010886-b571ca80-d9df-11eb-86ac-b358c48ac6aa.png "GitHub Logo")](https://github.com/)

Octocat


Tables

|Header1|Header2|Header3|
| --- | --- | --- |
| This | is a | table |
| This | is 2nd | row |
| This | is 3rd | row |
Header1 Header2 Header3
This is a table
This is 2nd row
This is 3rd row

Align

You may specify alignment like this:

| Align left | Centered  | Align right |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
Align left Centered Align right
aaa bbb ccc

p.s. You can use alignment with <h1 (or 2 etc.) align="center"> your text </h1> tags or with <p align="center"> your text</p> tag to align plain text.


CheckBox

* [ ] Checkbox1

* [ ] Checkbox2

* [x] Checkbox selected
  • Checkbox1

  • Checkbox2

  • Checkbox selected

You may use this syntax in GitHub's issue to check or uncheck the checkbox in real time without having to modify the original version of the issue.


Quoting Text

> This is a block quoted text

This is a block quoted text

Multi-level blockquotes

> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua

Look like

Asia

China

Beijing

Haidian

Tsinghua

  • These are fenced code blocks

Text highlighting

`linux` `ubuntu`

Using a pair of backquotes is suitable for making tags for articles linux ubuntu


Horizontal Line

***
___
--- 

All three will be rendered as:


p.s.

<hr> works too

Break between lines

<br>

Visible markdown characters

```git
 * __ <br> etc ```

Multi-line text

aaa,
sss,
ddd!

Add 1 tab or 4 spaces at the beginning of several lines of text.

OR

Use three backticks:

asd,
sfd,
wer!

This syntax can also be used for code highlighting


Comments in Markdown

<!-- comment written in markdown -->

They will be invisible on readme


Emoji

:grinning:	or just place the emoji ๐Ÿ˜€

๐Ÿ˜€ or just place the emoji ๐Ÿ˜€

To see a list of every image Github supports, check out the Emoji Cheat Sheet


Code Block

There are three ways to add code in markdown

  1. Inline Code (single backtick)
  2. Whitespace
    `this` is an example of inline code.
four spaces work too!
  1. Fenced code blocks With GFM you can wrap your code with three back quotes to create a code block without the leading spaces. Add annoptional language identifier and your code will get syntax highlighting.
public static void main(String[]args){} //Java
document.getElementById("myH1").innerHTML="Welcome to my Homepage"; //javascipt

Syntax Highlighting

If language name is mentioned after the end of first set of backticks, the code snippet will be highlighted according to the language.

```js
console.log('javascript')
```

```python
print('python')
```

```java
System.out.println('java')
```
   
```json
{
  "firstName": "A",
  "lastName": "B
  "age": 18
}
```
console.log('javascript')
print('python')
System.out.println('java')
{
  "firstName": "A",
  "lastName": "B",
  "age": 18
}

diff syntax

In the version control system, the function of diff is indispensable, i.e., the addition and deletion of a file content is displayed. The diff effect that can be displayed in GFM. Green is for new, while red is for deleted.

Syntax

The syntax is similar to code fenced code blocks, except that the diff is written after the three backticks. And in the content, the beginning of + indicates the addition, and the beginning of - indicates the deletion.

+ Hello world!
- This is useless.

Use YAML: human friendly data serialization language for all programming languages

name: Mariam
located_in: ***
from: ***
education: ***
job: ***
company: ***

Anchor

In fact, each title is an anchor, similar to the HTML anchor (#), e.g.

Syntax Look like
[Back to top](#readme) Back to top

Note that all the letters in the title are converted to lowercase letters.

readme-markdown-syntax's People

Contributors

darsaveli avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.