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! ! !
Here are the steps to activate the new beta interface :
- From the sidebar navigation inside the “Settings” group, please select “Markup Markdown” in the list.
- Then on the top right area click the “Screen Options” button.
- The list of add-ons will show up. Check the one called “Summernote WYSIWYG“
- 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.
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.
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).
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:
- The quote itself will be surrounded by double-quotes (Just for the display)
- Then the author of the quote
- And finally the reference as well should be written
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.
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.
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.