Online Markdown Editor and Preview

  • Lv1 Heading
  • Lv2 Heading
  • Lv3 Heading
  • Lv4 Heading
  • Lv5 Heading
  • Lv6 Heading
  • Add Img Link
  • Upload Img
  • Clip Upload
  • flow
  • sequence
  • gantt
  • class
  • state
  • pie
  • relationship
  • journey
  • inline
  • block
Add Link

Heading 1

Heading 2

Heading 3

This is bold text.

This is italic text.

This is a link.

Unordered list

  • Item 1
  • Item 2
  • Item 3

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3
def hello_world():
  print("Hello World!")
<h1 data-line="0" id="Heading 1">Heading 1</h1> <h2 data-line="1" id="Heading 2">Heading 2</h2> <h3 data-line="2" id="Heading 3">Heading 3</h3> <p data-line="4">This is <strong>bold</strong> text.</p> <p data-line="6">This is <em>italic</em> text.</p> <p data-line="8">This is a <a href="https://python-fiddle.com">link</a>.</p> <p data-line="10">Unordered list</p> <ul data-line="11"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <p data-line="15">Ordered list</p> <ol data-line="16"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <pre data-line="20"><code class="language-python" language=python><span class="code-block">def hello_world(): print(&quot;Hello World!&quot;)</span></code></pre>

Markdown Basics

Markdown is a lightweight markup language that allows you to format text in a simple and easy-to-read way. It is widely used for writing content on the web, including blog posts, documentation, and forum comments. Markdown uses plain text with a few simple symbols to indicate formatting.

Headings

Headings are used to structure your content and make it easier to read. You can create headings by using the hash symbol (#) followed by a space. The number of hash symbols determines the level of the heading, with one hash symbol (#) representing the highest level.

Example:

# Heading 1
## Heading 2
### Heading 3

Result:

Heading 1

Heading 2

Heading 3

Formatting Text

Markdown allows you to format text in various ways.

Bold

To make text bold, you can use double asterisks (**) or double underscores (__) around the text.

Example:

This is **bold** text.

Result:

This is bold text.

Italic

To make text italic, you can use single asterisks (*) or single underscores (_) around the text.

Example:

This is *italic* text.

Result:

This is italic text.

To create a link, you can use square brackets ([]) to enclose the link text, followed by parentheses (()) to enclose the URL.

Example:

This is a [link](https://www.example.com).

Result:

This is a link.

Lists

Markdown supports both ordered and unordered lists.

Unordered List

To create an unordered list, you can use a hyphen (-), plus sign (+), or asterisk (*) followed by a space.

Example:

- Item 1
- Item 2
- Item 3

Result:

  • Item 1
  • Item 2
  • Item 3

Ordered List

To create an ordered list, you can use numbers followed by a period (.) and a space.

Example:

1. Item 1
2. Item 2
3. Item 3

Result:

  1. Item 1
  2. Item 2
  3. Item 3

Code Blocks

To display code or programming-related content, you can use code blocks. Code blocks are created by indenting the text by four spaces or using triple backticks (```) before and after the code.

Example:

    ```python
    def hello_world():
        print("Hello, world!")
    ```

Result:

def hello_world():
    print("Hello, world!")

Images

To add an image in Markdown, you can use an exclamation mark (!), followed by square brackets ([]) to provide alternative text for the image, and then parentheses (()) to enclose the URL or file path of the image.

Example:

![Alt Text](https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D)

Result:

Alt Text

You can also specify the width and height of the image by adding attributes within the opening tag of the image. This can be useful to control the size of the image within your content.

Example:

![Alt Text](https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D){ width=300 height=200 }

Result:

Alt Text