Editor Basics and Commands

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 click on 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.

Markdown Guidelines

Aside from using the slash commands on the editor, Hashnode's Editor supports most markdown syntax.

Headers

Hashnode editor supports ATX-style headers. You create these by placing hash signs followed by a space before the heading text. For example:

# This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5
###### This is Heading 6

The correct heading styles will be applied once hash signs are typed:

Text Formatting

Bold: Wrap the text with double asterisks ** to make it a bold text. We will wrap the text with the <strong> tag while parsing.

Italics: Wrap the text with single asterisk characters * to make the text italics. We will wrap the text with the <em> tag while parsing.

The bold and italics markdown syntax works inside almost any block-level element, like Quotes, Lists, Inline code, etc.

Quotes

Use the greater than sign to format a text as a quote. For example:

> Create, collaborate, and scale your blogs and docs.

The above will look like this:

Embedding markdown

Hashnode uses Embed.ly to support all kinds of embeds on the platform. By following the following syntax you’ll been able to embed

%[Paste link to embed] 

//Embed Tweets 
%[https://x.com/hashnode/status/1836662090905309623] 

//Embed YouTube Videos 
%[https://www.youtube.com/watch?v=vAKtNV8KcWg] 

//Embed Github Repo 
%[https://github.com/Hashnode/starter-kit] 

//Embed any article on the web or website
%[https://hashnode.com]

Preview of GitHub Repo preview:

Links

For hyperlinks, make use of the following syntax:

[Click here to signup](put-link-here).

Code

To wrap a word as code, enclose it in backticks (`).

This is a standard sentence with `console.log("yeah!")` in it.

The above will output the following:

This is a standard sentence with console.log("yeah!") in it.

Code Block

Wrap the code blocks with triple backticks (```) to show blocks of code in your content. For example:

This is an example of code block:

``` 
if (isCodeBlock) { 
   return true
} 
```

Hashnode supports generic code highlighting. This will be applied to the code blocks once you select which code language you’re making use of from the code block dropdown.

We offer support for syntax highlighting in more than 50 programming languages. Below, you'll find an extensive list of these supported languages.

ABAP
Apache config
Bash
BASIC
C
Clojure
CoffeeScript
C++
C#
CSS
Dart
Diff
Dockerfile
Elixir
Elm
ERB
Erlang
Excel formulae
F#
Go
GraphQL
HAML
Haskell
HTTP
TOML, also INI
Java
JavaScript
JSON
Julia
Kotlin
Less
Lisp
Makefile
Markdown
Nginx config
Nix
Objective-C
OCaml
Perl
PostgreSQL
php
PHP template
Plain Text
PowerShell
PureBASIC
Python
python-repl
R
rego
Ruby
Rust
Scala
SCSS
solidity
SQL
svelte
Swift
TypeScript
HTML, XML
YAML

Can't find the programming language you're looking for? Feel free to make a feature request for it on our Discord Server support forum.