How to highlight a part of code block in markdown

Question

I want to highlight a part of a code block that is written in markdown using triple backticks (```). Here is an image of what I want. code block with highlighting-imgur

I want to replicate how we highlight a sentence in a book with a highlighter/marker . I have used the <pre></pre> and <mark></mark> but these tags dont work inside code block as seen below;

```
<pre>
<b>some bold text</b>
<pre/>
```

Which Markdown tool are you using? Plain Markdown doesn't do anything like that (or provide syntax highlighting in code blocks, for that matter). — ChrisGPT was on strike, Nov 30 '21 at 22:22
I am using plain markdown and thanks for the info. I was searching for a way but it doesn't exist. — Alekh Kumar, Dec 02 '21 at 11:38
In that case you'll have to rely entirely on HTML for that section. Remove the `\`\`\`` fences and just use `
...
`. — ChrisGPT was on strike, Dec 02 '21 at 11:39
That could be done, but I would have to compromise on syntax highlighting for different languages. But I see no other way of doing it, this is the closest possible solution. Thanks for the suggestion. — Alekh Kumar, Dec 02 '21 at 18:13
Well again, Markdown itself _doesn't do_ syntax highlighting for source code. You must be using a particular tool that adds that. — ChrisGPT was on strike, Dec 02 '21 at 18:17

score 3 · Answer 1 · answered Jun 25 '22 at 12:52

I use rehype-prism-plus and a mdx library next-mdx-remote together.

rehype-prism-plus is a rehype plugin to highlight code blocks in HTML with Prism (via refractor) with additional line highlighting and line numbers functionalities.

With next-mdx-remote the setting is very simple:

import { serialize } from "next-mdx-remote/serialize";
import rehypePrism from "rehype-prism-plus"

const mdxSource = await serialize(markdownContent, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [rehypePrism], //  here it is
    },
  });

How to highlight a part of code block in markdown

1 Answers1