Markdown Editor

What is a Markdown Editor?

A Markdown Editor, such as from Document360, is a lightweight text editor that allows users to write and format text using Markdown syntax. Markdown is a plain text formatting syntax that converts text into HTML, making it easier to write structured documents without needing to write complex HTML code. Markdown editors are especially useful for documentation, technical writing, and note-taking.

Key Features of Markdown Editors:

• Simple Syntax: Use easy-to-remember symbols for formatting (e.g., *bold** for bold text).

• Real-Time Preview: View the formatted text as you type.

• Cross-Platform Compatibility: Markdown files can be easily shared and viewed across different platforms and devices.

• Extensibility: Many editors support plugins and extensions for additional functionality.

• Export Options: Convert Markdown documents to various formats, including HTML, PDF, and Word.

Markdown editors are particularly beneficial for developers, writers, and anyone who needs to create well-structured, easily readable documents without the overhead of HTML coding.

Using the Markdown Editor in Document360

Document360 provides a robust Markdown editor as part of its documentation platform. It allows users to create and manage help articles with ease, using Markdown's simple syntax to format text. With features like real-time preview and support for advanced Markdown commands, Document360's Markdown editor is an excellent tool for creating detailed, well-formatted documentation.

Markdown Basics in Document 360

Here are a few basic formatting commands you will use most when working in Document360.

Headings (H2, H3, H4)

To create Headings (H2, H3, H4), precede text with a hash (#).

• H2: ## This is a Heading 2

• H3: ### This is a Heading 3

• H4: #### This is a Heading 4

Paragraph Styling (Bold, Italics, and Strikethrough)

• Bold: *This text is in bold formatting**

• Italics: This text is in italics*

• Strikethrough: ~~This text is in strikethrough~~

Bulleted and Numbered Lists

• Numbered Lists:

1. List item 1
2. List item 2
3. List item 3

• Bulleted Lists:

* An asterisk precedes this item
* This one too!

Blockquotes

• Include quotes or highlight important points by using > before the text.

> This will quote the entire line of text

Horizontal Lines

• Enter a horizontal line to divide two lines of text using three asterisks.

***

How to Center Align Text in Markdown in Document360

Achieving center alignment in your article is simple with the 'Align center' option in the toolbar of the WYSIWYG editor. However, in the Markdown editor, all text defaults to left alignment.

The Solution:

1. Go to the desired article in the Knowledge base portal.

2. Paste the below code in the desired location where you want the text to appear:

<p style="text-align: center;">Centered Text Content</p>

How to Change the Color of Text in Markdown in Document 360

To change the color of specific text in your articles using Markdown, follow these steps:

The Solution:

1. Go to the desired article in the Knowledge base portal (Markdown editor).

2. Paste the below code in the desired location where you want the text to appear in the article:

<span style="color:blue">Text content</span>

How to Add Extra Space in Markdown in Document360

In Markdown, adding space between two lines is achieved by pressing the Enter/Return key. However, this action would add only one empty line. For extra space, follow these steps:

The Solution:

1. Using HTML Tags
• Use the <br> tag to insert a line break and create space:

Line 1
<br>
<br>
Line 2

• For more space, add the same code multiple times as required.

2. Adding Non-Breaking Space
• Use the HTML non-breaking space character  :

This sentence has extra      spaces between some words.

 

How to Align Images in Markdown in Document360

By default, images are aligned to the left. To change the alignment of images, follow this workaround:

The Solution:

1. Go to the desired article in the Knowledge base portal.

2. Paste the below code in the desired location in the editor where you want the image to appear:

<p style="text-align: center"><img src="https://files.document360.io/filename/folder/subfolder/imagename.png"></p>

3. For left or right alignment, replace 'center' with 'left' or 'right' as needed.

4. Replace the image URL with your desired image URL.

If you use Document360...

You should try HelpKit, a powerful alternative that enhances your documentation process.

HelpKit isn't just a documentation tool. It transforms your Notion pages into a professional help center effortlessly. With HelpKit, you can write your help articles directly in Notion, benefiting from its world-class editor experience without needing Markdown or additional formatting codes.

HelpKit also provides full-text search support, analytics, and an embeddable widget for instant setup and integration. Experience a more intuitive and efficient documentation workflow with HelpKit.