How to use a subset of markdown in Sitecore text fields

This is my first blog post for some months now so I’ll start somewhat easy.

I attended a design presentation meeting this Friday where the customer presented a nice and simple design based on bootstrap for their new website.

All was great about the design but then I noticed something funny about the spot headlines used in the design. The headlines looked somewhat like this:

This is what
a headline could look like

Notice how the headline uses a slim text whilst some of the words are bold, also notice the irregular line-break.

A field for a headline is usually just a single-line text field and we do not want the editors to include “handwritten” markup in other than rich-text fields. A solution could be to make the headlines for the spots into rich-text field with a custom profile that only shows the bold button. Knowing how editors behave and how the rich-text editor would insert tons of garbage as default this solution would be a potential nightmare of customization.

What about Markdown?

I’ve become quite fond of the Markdown syntax lately, so much that I am even contemplating re-making my blog in Ghost (I also fell in love with node.js). So after dismissing the idea about using rich-text fields for headlines I thought about introducing a small subset of the Markdown syntax to be used in Sitecore single-line text fields.

Some quick googling lead me to Sitecore Markdown Field which is a nice project that introduce a whole new Markdown field type for Sitecore. This is really nice but also going a bit too far since we only need a small subset of the syntax to work on selected text fields and not the whole lot with a custom field.

The solution

The solution is actually extremely simple. We need to support the syntax for bold, italic and linebreaks only in specific text fields.

First we create a new processor for the renderField pipeline.

In this processor we first checks if the current field is a text field, if it is in the list of fields to markdownify and finally if the page is not in page edit mode. If everything is good the result of the renderfield pipeline should return the text markdownified.

Note that Sitecore started output escaping both multi and single line text fields back in v6.6, see this post for more grumbling.

Next we implement the Service class which performs the markdownification of the text.

I “borrowed” the regular expressions from MarkdownSharp.

Then we only need to configure which fields can contain markdown so we don’t run the processor for all fields.

In this example I made it extremely simple with a new configuration section which I read in code as follows. Ideally the fields should be configured in Sitecore but for now this will do.

The result

Beneath you can see how markdown syntax is used in a headline and an abstract text.

Markdown in page edit mode

 

Now when we switch to preview, voilá..

Markdown in preview mode

Note that the Markdown syntax for a line-break is ”  \n” whilst I changed it to being just ”  ” so it works in a single-line field.

The code here is made as a small PoC, it worked in the first try with no testing. So in short, it works as it is but could use a bit of refactoring.

Potentially the same concept can be used with MarkdownSharp to make specific multiline text fields into page-edit friendly Markdown fields. I might make a shared source module for this, let me know if anyone would be interested in this.

That was it. My primary concern about this solution is whether or not the editors will like the syntax. I am sure they will in the case of this specific customer but I am not sure that all editors at any customer will be equally satisfied with having to learn something new.

The code can be downloaded here.

Why my blog has been silent?

My loyal readers will have noticed that my blog has been almost completely silent since March this year except for one nice post written by my colleague Alin in June.

There are many reasons for this and it is always easy to blame the innocent. Below you see a picture of my 4 month old son together with a toy hedgehog named Razl (it is definitely not their fault though).jonas_with_razl_the_hedgehog_1

Thanks to @akamburov for the hedgehog. I owe you guys a review post on Razl, soon to come :)

Anders Laub

Anders Laub Christoffersen

Anders has been working with Sitecore for over a decade and has in this time been the lead developer and architect on several large scale enterprise solutions all around the world. Anders has been nominated a Sitecore Technical MVP three years in a row for 2014, 2015 and 2016. Anders is now working as a Sr. Solutions Architect at Sitecore in Copenhagen.

5 thoughts on “How to use a subset of markdown in Sitecore text fields

  1. Hey Anders, thanks for mentioning Markdown for Sitecore module!

    Just to comment on the complexity in Markdown for Sitecore, I know it’s not _exactly_ what you were after but it does have different authoring modes.

    There is a safe mode that allows you to restrict authors to only using the most basic markdown syntax. Good for keeping things simple.

    Neat what you’ve done here. I 100% support Markdown being used in Sitecore. :)

    • Hi Dan. Thanks for your comment. To be perfectly honest I first did the search for markdown and Sitecore after I wrote the code. I tend to code right away when I have an idea and then search last minute before finishing my blog post. Not the first time this has happened and probably not the last :) If I had found the markdown for Sitecore module first I might just have used that one. It looks neat.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website