SharePoint Markdown: Syntax Highlighting for Authors & Devs
In a world where AI prompts and automation snippets are becoming part of everyday work, dumping them as plain text on a SharePoint page just doesn’t cut it. You end up with messy, hard to read, and to scan. The changes that your well-crafted’recipes’ get lost on the pages are great.
Syntax highlighting nowadays is not only something for developers. It can help everyone to highlight an AI prompt without any effort and apply extensive formatting in the rich text editor.
The good news. SharePoint syntax highlighting is an out-of-the-box feature. Ready to use. The SharePoint Markdown web part lets you write Markdown on modern pages and display code blocks with syntax highlighting (ideal for Copilot prompts, runbooks, and dev snippets). Let me explain how.
The better option than using a text web part
You can achieve the same goal with the rich text editor, but you’ll have to reformat the content again. Yes, there are options such as copying a web part instance multiple times on the page and just changing the content for each instance.
The overall process would be time-consuming because modern SharePoint has many authoring gaps. In the old days, I wrote a blog post on how to extend the functionality of the rich text editor, with features such as syntax highlighting.
As mentioned, there is one web part that provides syntax highlighting out of the box: the Markdown web part.
Once added to the page, you see a split view. The left side is your editor, the right side is the preview.
If you are not familiar with Markdown, it is a lightweight markup language for writing formatted documents, such as HTML pages. The example above shows some of the syntax Markdown provides.
To name a few syntax features:
#,##,##followed by text is for Heading 1 to Heading 3[content](https://n8d.at)– For links
You will find the complete syntax in the web part properties, too.
So it is basically a quick-to-type content editor of SharePoint.
How to Highlight Copilot and AI Prompts on SharePoint Pages
This web part also supports syntax highlighting for any code. To document a copilot prompt, for example, I can use this feature.
A code block is always encapsulated between ``` your text ```. These triple backticks mark the beginning of a code block.
When you use only those, you will end up with code highlighting, as in the text above. The colored text is there because the markdown editor tried to identify a programming language in the content I added.
To turn this off, I added a simple programming language. I like this code block rendered as HTML. Every content inside the code block will be rendered as text this way.
Now we have an easy-to-read prompt, and the dark background makes your AI prompt stand out. The final result will be a clean SharePoint page.
The content I pasted inside the code block was simply the following:
Create a high-quality image of [subject] in [environment], [action/pose].
Style: [photorealistic / illustration / anime / 3D / watercolor].
Lighting: [soft daylight / cinematic / neon].
Camera: [close-up / wide shot / 35mm]. Mood: [calm / dramatic / joyful].
Colors: [warm / cool / pastel]. Highly detailed, sharp focus.
The overall result looks like the example I highlighted in the beginning of this blog post.
Real code highlighting for developers
I know this scenario focuses more on the site authors and the owner, but rest assured. It can also highlight your regular code.
As in the example above, you can highlight the SharePoint Framework web part code.
Verdict
To overcome many of the limitations in SharePoint, sometimes you have to use the right tool for the job. Instead of spending hours creating a reusable, standout content block, sometimes the Markdown web part does a better job.
Sometimes I miss the days when organisations could extend SharePoint’s capabilities with simple tricks. Now we have to find new tricks to get the job done.