Dynamic Input Method with Markdown Support

August 11, 2023
by Pierre-Henri Lavigne
Wordpress Plugins

Intro

A beta user interface has been released with a customized version of the SummerNote editor. What I created is a live preview version. Your markdown content is converted on-the-fly to pure HTML markups, but the content is still saved as a pure markdown syntax into the database. Interesting, isn’t it ?

I faced a number of challenges, gave up multiple times, but have restarted working at the beginning of the year on my alpha version to get something usable. Yes and by usable I don’t mean something working with a few bugs making the whole stuff unusable, but managing to produce a real beta that could allow me and you writing a basic blog post with headlines, a few quotes and some pictures media without major glitches.

So here it is, the beta is ready! ! !

In Practice

New Interface

Here are the steps to activate the new beta interface :

  1. From the sidebar navigation inside the “Settings” group, please select “Markup Markdown” in the list.
  2. Then on the top right area click the “Screen Options” button.
  3. The list of add-ons will show up. Check the one called “Summernote WYSIWYG“
  4. Click the “Apply” button.

Done! Next time you edit a post or page where the Markup Markdown is enabled, the new user interface should be displayed.

Headlines

Following the Markdown best practice, typing successively sharp characters “#” will automatically convert the current block to a headline as soon as you as a space is added.

I also added the same feature at the end of line so if you forgot to setup your headline or just want to switch to another level, typing at the end the new sequence will convert straight away the block to the right level. One of the feature I really love.

List items

Bullet list items can be triggered with the “-” or the “+” character at the beginning of the string followed by a space.
Ordered list items can be initialized with the following key set : “1.” (Number 1 followed by a dot and then a space).

There is no way right now to add a list inside a list… On my TODO

Quotes

You can create a block dedicated to a quote by using the “>” character followed by a space.

I’m using the markup explained on the Mozilla Developer Network. There are 3 parts:

  1. The quote itself will be surrounded by double-quotes (Just for the display)
  2. Then the author of the quote
  3. And finally the reference as well should be written
You can directly switch a sentence to a blockquote by typing the “>” character followed by a space at the end instead of the beginning (quote — author, source > ) , using a double “-” character as a delimiter for the end of the quote.

Inline Content

Classic markdown syntax will trigger the related HTML tag on-the-fly.

Bold / Italic

Bold text are rendered as soon the word wrapped with two “*” (Stars) or two “_” (Underscores).
The same applies to italic style with one star or underscores.

It’s at an early stage right now so bold italic (triple stars key set for example) probably doesn’t work. And to avoid conflicts with list item, bold text at the beginning or end of your sentence might now be triggered if you don’t add a few extra spaces.

Hyperlinks

Writing or pasting url will convert them to hypertext links automatically. If you want to customize the text, you can still use the toolbar to modify the label.

Images

You can add media via the media uploader. To open the wizard just type “++” followed by a space on a new blank paragraph and the interface to insert a media should open.