Erkan Guzeler's Blog

Erkan Guzeler's Blog

Write Simple and Effective: Markdown Tips

Write Simple and Effective: Markdown Tips

Subscribe to my newsletter and never miss my upcoming articles

Write Simple and Effective: Markdown Tips

Hi everyone,

In this post I will show you why you should use Markdown. If you are working on coding, most of yours has already use or hear this text format. Markdown is using lots of platform like Github,Ghost,Jekyll etc.

In Github’s README.md file uses this format. Jekyll static blog template’s uses markdown format. Jekyll * Simple, blog-aware, static sites Transform your plain text into static websites and blogsjekyllrb.com

You can easily use markdown wherever you want. If you use github you have to learn how to write markdown. You can write enhanced detail README.md on your projects. It’s really powerful writing tool you can use.

I have meet with markdown in github and I always use this github projects, my blogs, and take a note.

You can also use write blog, write notes and what you want. It seems like detail, but it will give you a quick response. Once you start writing in Markdown, it’s really hard to back to the past.

What Markdown?

Markdown is a lightweight markup language with plain text formatting syntax. It is designed to convert to structured HTML. It is often used to format readme files.

In 2004, John Gruber created the Markdown languages with Aaron Swartz. The goal of creating Markdown is readability. So easily read and write a web based documents with Markdown language.

How to use Markdown?

We have talked too much about markdown, now you can see how it is used with examples.

I will use **VSCode to preview Markdown file. Firstly you need to create a file that include end of name .md. [Visual Studio Code - Code Editing. Redefined* Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…*code.visualstudio.com](https://code.visualstudio.com/)

To preview md files in vscode you need to open **Markdown Preview. If you does not install Markdown Preview. [Markdown editing with Visual Studio Code* Working with Markdown files in Visual Studio Code is simple, straightforward, and fun. Besides VS Code's basic editing…*code.visualstudio.com](https://code.visualstudio.com/docs/languages/markdown)

  • Open VSCode and press Ctrl + Shift + X

  • Enter Markdown Preview and will see and install it.

  • After installed Markdown Preview, press Ctrl + Shift + P and type Markdown Preview, will see and select.

Once we have made the necessary preparations, we can start.

Markdown Formatting

Heading

Markdown allows you to divide your text with headings. It has six headings. It’s so simple to write heading with hash characters(#).

# This is an H1 tag
## This is an H2 tag
### This is an H3 tag
#### This is an H4 tag
##### This is an H5 tag
###### This is an H6 tag

Headers looks like below.

# This is an H1 tag
## This is an H2 tag
### This is an H3 tag
#### This is an H4 tag
##### This is an H5 tag
###### This is an H6 tag

Emphasis

Emphasis can be added more than one way with asterisk(*) or underscore(_) characters.

*Italic text with asterisk*

_Italic text with underscore_

To do italic emphasis you can use asterisk \ or _. This text looks like below

*Italic text with asterisk*

_Italic text with underscore_
**Bold text with double asterisk**

__Italic text with double underscore__

To do Bold emphasis you can use asterisk \* or __. This text looks like below

To do *Bold Italic *you can also use asterisk like this.

***Bold Italic Text***
***Bold Italic Text***

Strike-throughs

~~deleted words~~
~~deleted words~~

Lists

Unordered

Unordered list you can also use asterisk() by starting each line. You don’t have to forget a space with after asterisk(). It’s so important.

* Item 1

* Item 2

* Item 3

* Item 4

  * Item 4a

  * Item 4b

Ordered

Ordered lists similiarly with Unordered list. This is starting with number and after number a (.)dot.

1. Item 1

1. Item 2

1. Item 3

    1. Item 3a

    1. Item 3b
1. Item 1
1. Item 2
1. Item 3
    1. Item 3a
    1. Item 3b

Images

Images load is so simply in markdown. You can simply add your image Alt Text to ![Alt Text] and add image url or path to ![Alt Text](URL or IMAGE PATH). You can also add Optional title to your images URL end with a space.

The Optional Title is displayed in a small pop up when user hovers over the image.

![GitHub Logo](/images/logo.png “Optional Title”)

Format: ![Superman Logo](url “Optional Title”)

There are two ways to create a link. First one is to include the link inline [WishText](URL) URL. So user click on WishText go to URL link.

The second one is so simply. Directly write your URL to markdown and it will immediately detect as web link.

[http://github.com](http://github.com) — automatic!

[GitHub](http://github.com)
http://github.com - automatic!

[GitHub](http://github.com)

Blockquotes

You can indicate a quoted section of text. So just add > by beginning each line.

As Mustafa Kemal Atatürk said:

>One day my mortal body will turn to dust, but the Turkish Republic will stand forever.
As Mustafa Kemal Atatürk said:
>One day my mortal body will turn to dust, but the Turkish Republic will stand forever.

Inline code

I think you should use an

`<addr>` element here instead.
I think you should use an

`<addr>` element here instead.

Code Syntax

Firstly you can also type your code with 4 space.

function alertMarkdown(){

alert(‘Hello Markdown’);

}

Otherwise, use your language name with ```.

```javascript

function alertMarkdown(){

alert(‘Hello Markdown’);

}


```markdown
```javascript
function alertMarkdown(){
alert('Hello Markdown');
}

### **Task Lists**

Task list has many usage on **github**. So users can also add to-do lists. Usage is simple. Just add **- []** not to-do or add **- [x]** done.
  • [x] update login UI

  • [ ] dashboard UI design. ```

Task lists appears like below.

Tables

First Header | Second Header

 — — — — — — | — — — — — — -

Content from cell 1 | Content from cell 2

Content in the first column | Content in the second column

Also create tables simply. Divide list of words with hyphens -, and separating each column with a pipe |.

Definition Lists

Jekyll

: is a blog-aware, static site generator in Ruby.

Jekyll

is a blog-aware, static site generator in Ruby.

Footnotes

This articles has many references.[^1]

[^1]: Linus Torvals.

This articles has many references.[¹]

[¹]: Linus Torvals.

Horizontal Rules

***

* * * * *

 — -

___

Horizontal Rules sipmly created by three or more (asterisk), hyphens(-) or underscore(_) on a line. You can also add spaces in characters like **\ * \ \ **.

Markdown with HTML&CSS

We can also use markdown with html tags and decorate with CSS.

Images

If you use markdown image load format ![Alt Text](imageURL or Path), this image will not center on the page. This will always show on the left side. You can use html change image align.

You can use <img> to load image from url or path. Also set width, height and align.

left alignment

<img align=”left” width=”100" height=”100" src=”http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">
<img align="left" width="100" height="100" src="http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">

right alignment

<img align=”right” width=”100" height=”100" src=”http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">
<img align="right" width="100" height="100" src="http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">

center alignment

<p align=”center”>

<img width=”200" height=”200" src=”http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">

</p>
<p align="center">
<img width="200" height="200" src="http://www.fetchlogos.com/wp-content/uploads/2015/12/Superman-Logo.jpg">
</p>

Collapse Sections

Collapsing large sections of text can make your plain text much easier to read.

<details>

<summary>”Click Here to expand”</summary>

this is hidden text block.

</details>

Using CSS

Also you can use CSS stylesheet in your markdown plain text. You can do that two way. One of these is a write &lt;style&gt; in your markdown file and then use them in html tags.

<style>

.pclass{

background-color: yellow;

color: blue;

}

</style>

<p class=”pclass”>

Hello Markdown….

</p>

<button >

Markdown Button

</button>

The last one way is adding with &lt;link&gt; css files. I will add latest **Bootstrap** css files from url like below.

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity=”sha384–9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin=”anonymous”>

Added Bootstrap buttons to show you how to use with css files.

<button type=”button” class=”btn btn-success”>Success</button>

<button type=”button” class=”btn btn-info”>Info</button>

<button type=”button” class=”btn btn-warning”>Warning</button>

ATTENTION

If you convert your markdown file to pdf, docx or etc with pandoc you don’t use html tags. So Pandoc does not support html tags in markdown file. You can use markdown style simply. If you use you can not see your images and styles.

I hope you enjoy reading.

Visit my blog for more → https://coderkan.github.io/

Have a nice coding…

 
Share this