This is a collections of notes on useful codes and tips that I will use to build my github, I will try to add to this everytime I learnt something new, it will start as a list and when I start to learn lots of things I will try to create a table of lists and add in codes to make this more presentable.
I am well aware that these codes are not the standardise way or the best way to write a markdown file, it is my personal preference and they will surely change over time, so if anyone found a better way you are surely wellcome to enlight me.
I am writing this file as a learning process, I tend to read about codes from various sources, and manually type a study note style file myself as I found this helps me remember things better, it is really time consuming though. I will try my best to source, sourcing is a way to show gratitude to authors and makes things easier when you need to revisit the source for whatever reason.
- Headings
- Paragraphs
- Text
- Code Blocks
- Links
- Quotes
- Lists
- Keyboard glyphs
- Horizontal Rule
- Tables
- Emoji
- Pictures and GIFS
- Backslash escapes
- Section link
- Relative Link
- References
I found #heading ##heading and ###heading most useful, I tried to add color and change font but I do not think I can, and later realised that I do not actually need to do too much fancy stuff, just keep things simple and concise and future me reading this will surely thank my decision.
You can also use === and --- but I don not recommend it because it makes codes messy, but I can see why some people prefer to use it, I often use these codes in Microsoft Word.
> # heading 1
> ## heading 2
> ### heading 3
> #### heading 4
> ##### heading 5
> ###### heading 6
> heading 1
> ===
> heading 2
> ---Paragraphs are separated by empty lines. To create a new paragraph, press Enter Enter.
> Paragraph 1
>
> Paragraph 2Paragraph 1
Paragraph 2
MD file will automatically attach your paragraphs if there is no empty line separating your paragraphs.
> Paragraph 1
> Paragraph 2Paragraph 1 Paragraph 2
Basic italic and bold text will be useful, however use of * and ** is ineffecient and limiting. You can use shortcuts ctrl + I and ctrl + B, however I noticed it works on Unversity PC but not on my Laptop.
| Style | Syntax | Keyboard shortcut | Code | Output |
|---|---|---|---|---|
| Italic | * * |
ctrl + I | *Italic* |
Italic |
| Bold | ** ** |
xtrl + B | **Bold** |
Bold |
| Strike through | ~~ ~~ |
Strike through |
Note: To write out astrisks * without activating it as syntax, use double grave accent `` or single grave accent ` to include inline code blocks. I personally prefer double as it is easier to see.
> This is an ``inline code block``
>
> This is an `inline code block`This is an inline code block
This is an inline code block
the general syntax for a block of code in markdown files is, you will find the grave accent ` (it is under the tilde ~ symbol) on the top left of your key board.
> ``` language
> Code block
> ```Code block
Here is a list of supported languages and lexers (by Jeanine Adkisson)
I personally have the needs for R, Markdown, HTML, unfortunately I dont think there are option for SAS nor LaTeX for github Markdown files. Rstudio allows Latex code within RMD files, and are able to convert whole file to Latex, which is very useful for study notes and thesis writing.
Note that i DO NOT add > in my markdown codes, I only add it in my example code chunks because I found that it aids visalisation.
Example 1: Markdown
> ```markdown
> > # heading
> ```> # headingExample 2: HTML
> ``` html
> <img src="gangster.jpg" width="104" height="142">
> ``` <img src="gangster.jpg" width="104" height="142">Example 3: R Note that in RMD files, we use {R} rather than R{}.
> ```r {}
> k = vector() # add notes here
> for (i in 1:n){
> k[i] = i^2+5*i
> k
> }
> ``` k = vector() # add notes here
for (i in 1:n){
k[i] = i^2+5*i
k
}Markdown files will automatically creates links when valid URLs are written. However it is often not presentable, so to reduce the length and use description text you can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ).
You can also use the keyboard shortcut ctrl + kto create a link.
> https://github.com/JungXue
>
> [Jung Xue](https://github.com/JungXue).I see alot of people used blocked quotes in their md files, so it is definitely very useful.
However for some reason Enter , Enter does not work here, so I have to use \ Enter here to create an empty line.
> > ### Blockquoted header
> > This is blockquoted text.
> > This is a second paragraph within the blockquoted text.This is the first paragraph. This is the second paragraph.
> > ### Blockquoted header
> >
> > This is the first paragraph.
> >
> > This is the second paragraph.
> >
> > hello\
> >
> > world
> >This is the first paragraph. This is the second paragraph. hello\
world
> 1. Potato
> 2. Tomato
> 3. Tato- Potato
- Tomato
- Tato
> - Regression
> - ANOVA
> - MANOVA- Regression
- ANOVA
- MANOVA
Note: * also forms a list but I avoid it because it may interrupt syntax for bold text *bold*.
Task lists can be useful as I do setup tasks for future me to complete. use - [ ] to create a tick box and - [x] to tick the tick box.
- [x] Finish my thesis
- [ ] Get a job
- [ ] become a Jedi- Finish my thesis
- Get a job
- become a Jedi
You can create keyboard glyphs by using <kbd> </kbd>, this is extremely useful for informing which key to press.
Some people even made a whole keyboard with kbd, people have eway too much time to spare. See This.
> <kbd> ctrl</kbd> + <kbd> B </kbd>ctrl + B
You have probabily already noticed that I use horizontal Rule to break each sections, I find this helpful and tells you approximately how long is each section before you even started reading it. Markdown requires only three repeating * , - or = symbols, but I personally use a very long ------------------------- to break my codes visually.
Remember to add line breaks or you will be creating a title.
---
***Example
First Section ......
----------------------------------------------------------------------------------------------------------
Second section ......Github help page have a good instruction on how you could create a simple table. Basically you can use --- and | to draw simple tables.
Example 1:
> First Header | Second Header
> --- | ---
> Carrots | Pumpkim
> Bean | Okra| Header 1 | Header 2 |
|---|---|
| Carrots | Pumpkim |
| Bean | Okra |
For aesthetic purposes, you can also add extra pipes on the ends and line up each cell.
Example 2:
> | Header 1 | Header 2 |
> | -------- | -------- |
> | Carrots | Pumpkim |
> | Bean | Okra || Header 1 | Header 2 |
|---|---|
| Carrots | Pumpkim |
| Bean | Okra |
You can also use : to align texts.
Example 3:
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -------------:|
| Waikato | Andrew | $1600 |
| Auckland | Alex | $1782 |
| Wellington | Kim | $1771 || Left-Aligned | Center Aligned | Right Aligned |
|---|---|---|
| Waikato | Andrew | $1600 |
| Auckland | Alex | $1782 |
| Wellington | Kim | $1771 |
You can add emojis using : :, emojis are useful in noting characteristics of file, express emotions and are jsut fun to use.
- Emoji by type
- Emoji by alphabet
- Japanese Emoticons ╮(╯∀╰)╭ (by Tsutomu Narushima)
- Japanese Emoticons （。ω。 三 ゜ω゜）としろうだよ (Name diagnosis)
> :smiley:
>
> ╮(╯∀╰)╭ 😃
╮(╯∀╰)╭
The simpliest way is to just use ![](), I personally prefer dropping the picture file in my repository and link it directly, so I can avoid losing of images when linking to websites.
You can also adjust the size of the picture using following markdown and html codes.
> {height="36px" width="36px"}. # doesn't really work, :(
> <img src="https://media.giphy.com/media/nNxT5qXR02FOM/giphy.gif" width="80" height="80" />
> <img src="https://media.giphy.com/media/nNxT5qXR02FOM/giphy.gif" width="40" height="40" />
You can also add an align argument in your code, align = "center" doesn't really work so you have to p it.
> <img src="https://media.giphy.com/media/nNxT5qXR02FOM/giphy.gif" align = "left" width="40" height="40" />
> <img src="https://media.giphy.com/media/nNxT5qXR02FOM/giphy.gif" align = "right" width="40" height="40" />
> <p align="center">
> <img width="460" height="300" src="http://www.fillmurray.com/460/300">
> </p>
Certain characters can be escaped with a preceding backslash to preserve the literal display of a character instead of its special Markdown syntax meaning. Do not confuse this with inline code. This applies to the following characters:
| Name | Code | Outout |
|---|---|---|
| Backslash | \\ |
\ |
| Bold | \` |
` |
| Strike through | \* |
* |
| Underscore | \_ |
_ |
| Curly braces | \{\} |
{} |
| Square braces | \[\] |
[] |
| Parentheses | \(\) |
() |
| Hash | \# |
# |
| Greater than | \> |
> |
| Plus sign | \+ |
+ |
| Hyphen (minus sign) | \- |
- |
| Dot | \. |
. |
| Exclamation mark | \! |
! |
When you hover the mouse over section headings a grey link symbol will appear.
Right click and select copy link to obtain address of the section, and then use this in your section link code
> [Headings](https://github.com/jungxue/learn_github/blob/master/README.md#11-headings)You can use relative links in your readme file to help readers navigate to other files in your repository
> [testing](docs/testing.txt)
Here are a few wiki and repository that I read to learn the basic laguage of markdown files
- help.github
- Bitbucket Markdown syntax guide
- Robert Lord: lord/slate
- Alexander Dupuy: dupuy/README.rst
- Posts on stackoverflow.com are also very helpful, I often find useful posts such as this when I do a google search keywords of my question such as "warning boxes md file".
- R-Studio cheat sheet
- David Wells: image alignment
- complete first draft
- grammar and spelling check
- addition of new tricks when you learn something new
- Edit 1
To save the trouble to make commmits, we could setup a daily scheduled task to make commits for us
[Website]