SharePoint Markdown Web Part

In this SharePoint Online tutorial, we will discuss on SharePoint Markdown web part.

We will see, what exactly the SharePoint Markdown web part and why we use the Markdown web part in SharePoint online, and how to add the Markdown web part to our SharePoint modern site page and we will see a few examples based on the modern SharePoint online environment.

In SharePoint server 2019, the SharePoint Markdown web part is not available.

Table of Contents

SharePoint Modern page Markdown

Microsoft provides a lot of Out of box web parts, one of the web parts is the Markdown web part.
Markdown web part is a syntax or set of rules that allows us to add text for a web page.
Using Markdown language, we can format text for a web page.
By default, when we add the Markdown web part to our SharePoint page it will display a dark theme and show preview.
Markdown web part is available only in the Modern SharePoint online.

Read SharePoint Online sites web part

How to add Markdown web part in SharePoint online

Now, let us see how can we add and integrate the Markdown web part to the modern SharePoint.

Open the SharePoint site page where you want to add the Markdown web part to the SharePoint modern site page.
Select Edit Page at the top right of the SharePoint site page.
Click + circled icon then add a new Section layout.
In the search box, enter Markdown and select the Markdown web part.

add Markdown web part in SharePoint online

In the below screenshot, you can see the Markdown web part is added, and also it displays the dark theme and shows a preview by default.
If the preview is enabled, when we start typing our Markup in the left column the output will be displayed in the right column as shown below:

how to add Markdown web part in SharePoint online

We also have an option to change the dark theme to a light theme. When we choose a light theme, we can see the white background in the left column.

Markdown web part Change theme in SharePoint online

We can also have an option to hide the preview, Select the Hide preview option to hide the preview like below.

Markdown web part hide preview in SharePoint online

This is how we can add the Markdown web part in the modern SharePoint.

Read How to use SharePoint document library web part

Configure the Markdown web part in SharePoint online

Let us see how we can edit and configure the Markdown web part in modern SharePoint.

Click on the Edit web part properties icon in the Markdown web part, it will open the Markdown web part properties panel as shown below:

edit the Markdown web part in modern SharePoint

SharePoint Markdown examples

Let us see some examples in the Modern SharePoint Markdown web part.
In the Markdown web part, we can display the Header, add or Highlight the text in bold or Italic, Paragraphs, Links and Images, Lists, and Tables.
We will some examples that how can we display it in the Markdown web part as follows:

Read How to change the SharePoint site from private to public

Markdown Headers in SharePoint Online

We can add headings in the Markdown web part using the header element. Enter the header element Markcode in the left column of the mark-down web part. We can add one or more heading elements (h1 to h6). Select Republish to save your changes.

In the below screenshot, In the right column, previews the expected output. This is an example to add headers in the modern SharePoint Markdown web part.

Markdown Emphasis in Modern SharePoint

We can highlight the text as Bold, italic, and Strikethrough.
To make the text Bold we can use **Text** or we can select text and click Ctrl+B.
To make the text Italic we can use _ Text_ or we can select text and click Ctrl+I.
To make the text Strikethrough we can use ~~Text~~ or we can select text and click Ctrl-L.
Select Republish to commit your changes.

In the above screenshot, In the right column, previews the expected output. This is an example of the highlighted text in the modern SharePoint Markdown web part.

Read How to share a SharePoint site with external users

SharePoint Modern Markdown Paragraph Blockquote

We can also quote the text using the Blockquote under the paragraph option. Using the greater than symbol (>) we can display it as shown below:

SharePoint online Markdown Blockquote example

SharePoint online Markdown Code

In the Markdown web part, we can highlight the syntax code. To display the markdown web part code, we have to add four backticks ““ Code ““. In the below example, I have added how to display code using the Markdown web part. Select Republish to save your changes.

Read How to convert SharePoint site to Microsoft Teams

Markdown Links in Modern SharePoint

We can insert a link in the Markdown web part, when users select the link option it will redirect to the mentioned URL. We can also see the option in the toolbar to insert a link.
Within the square bracket, we can add the alt text to display [ ]. Within the parenthesis, we have mentioned the link to redirect ( ).
For example : [SPGuides](https://spguides.com/).
Select Republish to commit your changes.

SharePoint Modern Markdown image

We can also display images in the Markdown web part.
Within the square bracket, we can add the alt text to display [ ]. Within the parenthesis, we have mentioned the image URL with no spaces ( ).
Syntax begins with an exclamation point.
For example : ![Alt text](https://pnp.github.io/images/hero-parker-p-800.png).
Select Republish to commit your changes.

SharePoint online Markdown image example

Read SharePoint Online List Web Part

Markdown Lists in SharePoint Online

We can display Bulleted lists and numbered lists in the Markdown web part.In the below example, I have added how to display the Ordered list as well as Numbered list using the Markdown web part. Select Republish to save your changes.

SharePoint Modern Markdown Table

Tables are also supported in the Markdown web part, we can separate columns with the Pipe character.
To make it easy, select the example of the Table in the Markdown properties pane. Copy and Paste it into the Mark code.
Rename the Column Name and Values that you want to display in the Markdown web part, you can also add columns if you want.

In the below example, you can see that we can display a table with values in the modern SharePoint Markdown web part.

SharePoint online Markdown Table example

These are some examples in the modern SharePoint Markdown web part. And this is how we can edit and configure the SharePoint online Markdown web part.

Read SharePoint Text Web Part

Sharepoint Online Markdown Table of Contents

Let us see how to display the Table of contents in the modern SharePoint Markdown web part,

yes, it is possible to display the Markdown table of contents in SharePoint.

Follow the below steps to achieve this:

Initially add the Text web Part to the SharePoint page, Add Heading for the text web part as shown below. Enter the content that you want to display in the text web part.
Now Publish or Republish the SharePoint page to save your changes.

sharepoint markdown table of contents — SharePoint markdown table of contents

Once Published, Hover over the heading and we can see the link option, now copy the link of the text web part like below:

sharepoint online markdown table of contents — SharePoint online markdown table of contents

Now Open the Markdown web part, and Paste the Copied link. Once you Paste the header links, it will redirect to the Particular Heading in the Markdown web part.
In the same manner, we can add many Topics under the Table of contents in the SharePoint modern Markdown web part.

modern sharepoint markdown table of contents

In the below screenshot, if we select SPGuides it redirects to the SPGuides paragraph. In the same way, if we select EnjoySp it will redirect to the EnjoySP Paragraph.

modern sharepoint markdown table of contents example

This is how we can display the Table of contents in the modern SharePoint Markdown web part.

Read SharePoint Online Events Web Part

SharePoint Modern Markdown web part HTML

It is not possible to display HTML code in the SharePoint Online modern markdown web part. If you will add the HTML code, it will render as it is. You can see below:

Follow the below steps to check out this:

Open the Markdown web part and add the HTML code in the left Column of the Modern SharePoint Markdown.
Select Republish to commit your changes.

In the below screenshot, we can see the HTML code is displaying in the right side column as it is.