Did Ghost Make a Smart Choice With Markdown?

Ghost LogoOne of the features that has bloggers excited about Ghost is the super-clean interface for bloggers.

Ghost’s creators want to create an editor that is distraction free and prevents any interruptions to the flow of writing.

To help make that a reality, they also made the divisive choice to use markdown text format as the default writing option.

Let's take a look at the Ghost editing experience, at markdown and let's see if Ghost really is a step forward for bloggers.

Feature #1. Uncluttered experience

Every single screen right from the time you enter your login details has a minimalistic UI. The same design style is again reflected in the editor. Everything is self-explanatory. The editor is the field labelled “markdown”; a large white block on the left. Unlike many other platforms, there is no separate distraction free mode: Ghost provides us with one by default.

(For a breakdown of the editor screen refer to our previous article)

Feature #2. Completely Responsive

Unlike some software, Ghost does not drop features for the mobile version. Irrespective of device or screen size you are working on from, all of the features of Ghost are available.

The only difference users with smaller screen will find is that the layout switches to single column requiring additional click to preview the post.

ghost-editor-responsive.png

Feature #3. Intuitive Image Uploading

Throughout Ghost’s backend, image uploading functionality has a consistent UI.

When writing a blog post, we usually upload images at the end. Using keyboard shortcuts such as Ctrl + Shift+ I on Windows and ⌘ + Shift + 1 on Mac, users can easily create temporary image placeholders within their post and later upload images by dragging and dropping them on these placeholders.

ghost-editor-image-upload.png

Feature #4. Live Preview

Live preview one of the things that Ghost executes almost perfect. Whether you use HTML or Markdown syntax, the live preview is fast and accurate:

ghost-editor-markdown.png

Feature #5. Markdown Support

Default support for markdown is one of the most divisive features of Ghost. Some people love markdown and some people hate it.

What is Markdown? Simply put, it is a plain text formatting syntax which can be converted to HTML. Most commonly you'll see Markdown used to format readme files, or to write messages in some discussion forums and text editors.

People like it because you can apply formatting without leaving your keyboard to use the WYSIWYG editor or switching to code.

People dislike it because it does require that you learn a new syntax and can feel uncomfortable for users accustomed to their WYSIWYG editor.

Below is a basic example of Markdown syntax:


 Some random content with **bold text**.

##Heading 2

And now a list

* Lorem ipsum dolor sit amet * Proin vehicula sapien * Maecenas sed sem hendrerit

And here is the HTML code that code will output:


 <p>Some random content with <strong>bold text</strong>.</p>
 <h2 id="heading2">Heading 2</h2>
 <p>And now a list</p>
 <ul>
 <li>Lorem ipsum dolor sit amet</li>
 <li>Proin vehicula sapien</li>
 <li>Maecenas sed sem hendrerit</li>
 </ul>

Below we have a list of basic formatting styles and their markdown syntax. You can also access this list of shortcuts by clicking the question mark icon within the editor.

  • Bold: **text**
  • Emphasize: *text*
  • Strike-through: ~~text~~
  • Link: [title](http://)
  • Image: ![alt](http://)
  • List: * item
  • Blockquote: > quote
  • H1: # Heading
  • H2: ## Heading
  • H3: ### Heading
  • Inline Code: `code`

Feature #6. Keyboard Shortcuts in Ghost

Here are some editor shortcuts available in Ghost:

  • Save / Update Post: Ctrl/⌘ + S
  • Publish Post: Ctrl + Alt + P
  • Close Notification / Modal: ESC

Here are some markdown shortcuts available in Ghost:

  • Bold: Ctrl / ⌘ + B
  • Emphasize: Ctrl / ⌘ + I
  • Strike-through: Ctrl + Alt + U
  • Link: Ctrl + Shift + L
  • Image: Ctrl + Shift + I
  • List: Ctrl + L
  • Blockquote: Ctrl + Q
  • H1: Ctrl + Alt + 1
  • H2: Ctrl + Alt + 2
  • H3: Ctrl + Alt + 3
  • H4: Ctrl + Alt + 4
  • H5: Ctrl + Alt + 5
  • H6: Ctrl + Alt + 6
  • Inline Code: ⌘ + K / Ctrl + Shift + K

Some Issues with the Ghost Editor

Before discussing issues, let me remind you again, that Ghost is still in development and it will be months before we see version 1.0 being released.

Issue #1: Learning curve for non-technical users

Everyone who uses Internet or a computer has experience of using a Rich Text editor. Whether someone is formatting a document in Microsoft Word or composing an email in Gmail, they are provided with tools to format their content using simple select and click actions. Ghost does provide similar features but there is no rich text editor. Users can learn keyboard shortcuts which are very similar to other editing programs or use Markdown syntax. Technical users would find markdown handy, however general users may find learning one more thing simply to format content a drawback.

Even if a user does learn these shortcuts, there are some things for which currently Markdown has no support resulting in the need to use HTML.

Issue #2: Need HTML for certain formatting and features

For certain things users would have to rely on HTML as there is no visual tools nor any shortcuts in Markdown. 2 such common examples are:

  • Opening links in new tab: Using keyboard shortcuts you could easily create links. However if you want to add “target” value to the link in situations where you wish to open links in new tab, then you would have to remove the markdown code for link and instead use HTML.
  • Image alignment: Rich text editors such as WordPress offer users ability to select an image and then choose its alignment. Ghost by default has no such option. Adding images is very intuitive, but if you want to align your image differently then you first have to use Ghost’s image upload tool and then replace everything except the image path with the required HTML for the desired formatting.

Issue #3: Live preview uses default styling

Currently live preview does not reflect styling based on the active theme. We can expect this feature to be released in future release, however at the moment, live preview window only shows the content based on default Ghost styling. This is not a major issue, but considering the extensive use of web fonts, being able to see the preview based on the styling set in active theme would be a welcome feature.

Previous Posts in this Series


About the author

Harish is a designer & WordPress developer from Mumbai. He runs a web design agency "Dreams Media" and writes about random stuff on his personal website HarishChouhan.com.