Markdown Web Part in SharePoint Modern Experience

Khoa Quach
NIFTIT SharePoint Blog
3 min readJul 11, 2019

--

A Simple Addition for Authoring

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

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.

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

This is the rendered version once saved:

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:

Horizontal rules can be added to 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:

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

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

******

[Read more: Sharepoint modern experience page layout samples]

This article is just one of our solutions at NIFTIT. Feel free to reach us if you face any problem. Here at NIFTIT, we can handle any 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!

--

--

Khoa Quach
NIFTIT SharePoint Blog

CEO+Co-founder NIFTIT, Upteamist / MCP in SharePoint, Office 365/ Guest speaker/ top 5 Quora technical blogger. http://niftit.com/ and https://www.upteamist.com