Hashnode Editor Basics and Commands

Hashnode World Class Editor for Developers

Updated over a week ago

Hashnode editor is a markdown-based WYSIWYG editor that offers several commands for text formatting, embedding (widget, third-party code service, and social media), and AI writing assistance to improve your writing experience.

Hashnode Editor Slash Commands

The slash (/) command on the editor shows the various content blocks the editor can utilise.

The Hashnode editor slash command is not available for mobile devices.

1. Type / to trigger the editor command panel, as shown below:

2. Type / followed by the command or action you want, i.e /text or /code, as follows:

The Hahsnode editor command is grouped into five categories, and you can make use of the panel buttons to jump to the respective categories:

The following are the complete category lists of the Hashnode editor commands:

Basic

The basic category contains text formatting, heading-level formatting, bullet lists, numbered lists, and a link insert option.

  • Text: The default text formatting is also referred to as paragraph.

  • Heading 1: The largest heading level with /h1 command.

  • Heading 2: The second-largest heading level with /h2 command.

  • Heading 3: The third-largest heading level with /h3 command.

  • Bullet List: To create a list with bullet points, use - followed by the keyboard space.

  • Numbered List: To create an ordered list. Type a numeric followed by the keyboard space

  • Link: To create an anchor link that redirects to another page or section. Use Ctrl + v on Windows or Cmd + v on mac as a shortcut to hyperlink a selected text from a clipboard link.

  • Divider: Allows you to add a horizontal rule to your article

Watch the demo below to see the Hashnode editor basic command category in action.

The Hashnode editor also converts your raw markdown shortcuts, as shown below:

Copied and pasted raw markdown content into the editor, works flawlessly and is automatically converted to the preview mode, as demonstrated below:

Advanced

The advanced category contains options for inserting contents such as code blocks, quote blocks, Hashnode widgets, table, HTML, and LaTex for inserting math equations.

Watch the demo on how to add a code block on the editor:

Media

The media category contains options to insert images and the Hashnode user mention option.

Watch the demo on how to add media to the editor:

You can also drag and drop or copy and paste images from your clipboard into the editor.

Embeds

The embed section contains options to embed multimedia content and social media content such as Youtube, Twitter, or code embeds from GitHub Gist, Codepen, CodeSandbox, Replit, and RunKit.

You can use the "Embed a link" option to embed any content or select the specific platform you want to embed, such as YouTube.

See a demonstration of how to embed on the editor:

Hashnode editor officially supports embeds from the platforms listed below:

'codepen.io', 
'twitter.com',
'youtube.com',
'youtu.be',
'glitch.com',
'github.com',
'soundcloud.com',
'anchor.fm',
'spotify.com',
'giphy.com',
'gph.is',
'codesandbox.io',
'canva.com',
'twitch.tv',
'expo.io',
'repl.it',
'runkit.com',
'vimeo.com',
'loom.com',
'hashnode.com',
'facebook.com',
'fb.watch',
'instagram.com',
'instagr.am',

AI

Hashnode AI's capabilities on the editor include generating article outlines, summarizing the article, and generating code snippets for your blog content.


Watch this quick video to see Hashnode Editor in action.


Click the button below to launch the Hashnode editor.


Next Articles?


๐Ÿ’ก Tip

Need more help? Get support from the Hashnode Community on Discord.
Find answers and get help from our Intercom Support and Hashnode Experts


Did this answer your question?