Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Contact
  • Books and ink
A cup of dev

Quick tip: How to get syntax highlighting in markdown code blocks

By Eli H. Schei on Thursday, 13 May 2021, 18:00Wednesday, 13 November 2024, 10:42

Maybe I’m just late to the party, but the other day I learned how to add syntax highlighting in markdown code blocks – and it was almost life changing! Ok, I might be exaggerating a little bit – but it do make your code snippets more readable. And a lot of developer communities accept markdown in comments (and in posts) like dev.to, github etc.

Since I’m so excited about this I thought I should share it! And hopefully some of you will learn something new today šŸ˜€

Adding syntax highlighting is really easy, the only thing you have to do is add the programming-language after the first three back-ticks.

Here are some examples in markdown:

# Code blocks

## Below is an empty codeblock
```
```

## Below is a codeblock with javascript - without syntax highlighting
```
const myFunction = () => {
    console.log("This is my function");
}
```

## Below is a codeblock with javascript - with syntax highlighting
```javascript
const myFunction = () => {
    console.log("This is my function");
}
```

## Below is a codeblock with powershell syntax highlighting
```powershell
Connect-PnPOnline "yourtenantURL" -Interactive

Get-PnPTenantAppCatalogUrl
```

And this is how the blocks will be displayed

The image shows text with different formatting as an example of how it will look when you add syntax highlighting in markdown code blocks

Also, if you have any feedback or questions, please let me know in the comments below, or contact me via email.

Thank you for reading, and happy coding! šŸ™‚

/Eli

If you want to support my content you can

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Post navigation

A beginners guide to PowerApps Component Framework (PCF) – part 2: Common problems/errors
My top 9 favorite podcasts for front-end developers

1 thought on “Quick tip: How to get syntax highlighting in markdown code blocks”

  1. Anders says:
    Friday, 11 November 2022, 18:29 at 6:29 pm

    Hello Eli,

    This is the second article from you that I have stumbled on in my studies. Decided to finally learn some markdown and I agree that highlighting with language defined is amazing!

    I really appreciate your site design and clear and concise instructions and examples.

    Keep up the good work!

    Anders

    Loading...
    Reply

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • How to Get Site-ID with Graph Explorer (and other SharePoint info)
  • How to use Azure CLI to deploy Azure Functions: Step-by-Step Guide
  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context

Categories

  • Azure
    • Azure CLI
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com
%d