Did Ghost Make a Smart Choice With Markdown?

Ghost Logo

One 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:

{codecitation}
Some random content with **bold text**.

##Heading 2

And now a list

* Lorem ipsum dolor sit amet
* Proin vehicula sapien
* Maecenas sed sem hendrerit{/codecitation}

And here is the HTML code that code will output:{codecitation}
<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>{/codecitation}

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

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Peter Poliwoda

So here’s a question: Can you create you own additional markdown rules and set styling to it?

tharok

I know it’s not as fast as markdown, but you can use plain HTML right in the editor and add classes defined in your theme. In example, I’m using a custom theme with Bootstrap so I can format my posts as I want just adding classes when I need something that the markdowns can’t do.

Joan Mira

IMHO the markdown editor is not a good option for non-technical people. There should be an option to use a WYSIWYG editor.

Michael Earls

Markdown is not extremely technical. There was a time long ago when all word processors used “codes” for composing documents. There was no WYSIWYG in early word processors. Ghost’s current markdown is super easy to learn. The code generated by the in-browser WYSIWYG editor is usually poorly formatted. Servers usually have to post-process it to clean it up. That takes a lot of effort. Also, saving markdown on the server takes up a lot less space as you do not have to worry about the , /, and other attributes and opening/closing tags.
In my opinion, learning markdown is superior to using those horrible WYSIWYG editors’ output.

Johnbo Hombo

Listen sunshine, what Joan Mira says is the truth, there’s no arguing with it. If you argue with it it marks you out as a geek who doesn’t understand the need and the opportunity. Do you seriously think when I put a website together for the plumber up the road that he’s going to learn ‘markdown’? I have enough trouble as it is getting him to even take an interest in the web, his mind is on plumbing, not ‘learning a new syntax that’s easy to use’. His eyes will glaze over.

Not including a wysiwyg editor as an option for this CMS is completely stupid and will hugely limit its utility for most.

Fost

No – I think it’s an awful idea. As a programmer myself I like markdown for some behind the scenes use, but Ghost eats a ton of screen estate needing a separate preview and these days it’s completely possible to do inline editing of text (see inline editors like redactor). Authors get this instantly – CTRL-B to bold something and seeing it there and then is intuitive; Typing **Bold** and seeing it in another window is not.
Seems to me this was a programmer’s choice not a designer’s and is just as mad a choice as bbcode used to be. Other projects like NodeBB also suffer from the same choice but at least ship with a (far better why isn’t it default enabled?!) WYSIWYG editor.

sravya

I used to spend an unbelievable amount of time converting my content for our site into markdown docs, happy I discovered the Ink for all text editor’s Hugo-compatible export capability. Was losing too much time converting blog articles into Markdown docs. 

sravya

I definitely am happy with the security I get with a static site but I just wish there were more tools made for static site generators. I’m relieved to discovered INK for All, it has a markdown export function. It also helps out with optimizing content for search

8
0
Would love your thoughts, please comment.x
()
x