Markdown Web Part in SharePoint Modern Experience

Image Title

posted by Khoa Quach
on May 14, 2019

For those of you who’ve decided to invest time into developing with and adopting the new SharePoint Modern experience, I’m sure you’re excited to hear about the addition of the Markdown web part.

A Simple Addition for Authoring

A few months ago I did an introduction to the web parts and widgets available under the Modern experience. The Text web part was the default go-to when one decided to add content to a page; however, the text editor controls were quite limited. 

Markdown-Web-Part-in-SharePoint-Modern-Experience
The Text web part was one of the earlier ways to author and add text to a SharePoint Modern web page.

You had five predefined styles (Normal text, Heading 1, Heading 2, Heading 3, and Pull quote), the ability to bold, italicize, and underline text, the option to indent or align content (left, center, right)… The basics were there, but the real limiting factor was that you could not insert images into your content. 

Markdown-Web-Part-in-SharePoint-Modern-Experience
The advanced features of the Text web part are sufficient for simple content authoring, but users can run into limitations quickly.

Now, with the Markdown web part, users can leverage lightweight markup language in a plain text formatting syntax.

This is where things get interesting, because users are going to be able to extend the features that the Text web part currently lacks, most notably:

  • Accessing additional headers (H4 to H6)
  • Adding images to content
  • Line breaks
  • Code highlighting

Let’s add the Markdown web part to a SharePoint Modern page. Once done, simply try to add the following code and save:

#### H4##### H5###### H6
Markdown-Web-Part-in-SharePoint-Modern-Experience

This is the rendered version once saved:

Markdown-Web-Part-in-SharePoint-Modern-Experience

Pretty cool, huh? Alright, let’s add an image:

![alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/439px-Microsoft_logo.svg.png)

The syntax will result in the image displaying as shown below:

Markdown-Web-Part-in-SharePoint-Modern-Experience

Horizontal rules can be added with one of the following methods:

---Hyphens***Asterisks___Underscores

And for the developers out there who need to add code, just use the three back-ticks: 

```javascriptvar s = "JavaScript syntax highlighting";alert(s);```
Markdown-Web-Part-in-SharePoint-Modern-Experience

If you want to embed a video (coming from YouTube, for example), you have to use the Office 365 Video or YouTube web part. However, you can provide an image and link to the video by using the following syntax:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/HUBNt18RFbo/0.jpg)](http://www.youtube.com/watch?v=HUBNt18RFbo)

Final Thoughts

Although it might not provide the customization of a Script Editor web part or source code editor, we can see how Markdown meets the Microsoft SharePoint team’s desire to provide additional tools that benefit end users. I believe Markdown is pretty easy to get accustomed to and that it provides great results when applied to specific content.

Resources:

adam-p/markdown-here
Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. …github.com


******
[Read more: SharePoint Modern Experience Page Layout Samples]

This article is just one of our solutions at NIFTIT. Feel free to reach us anytime if you face any problems. Here at NIFTIT, we can handle all size of difficulties, from Office 365 to Sharepoint solution. We are happy to share our digital offering to you. Learn more about our support here!