CODEWITHSUNDEEP
markdownsyntax-highlightinghighlight
Alekh Kumar
Alekh Kumar

Reputation: 121

How to highlight a part of code block in markdown

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/>
```

Upvotes: 12

Views: 15762

Answers (2)

George Smith
George Smith

Reputation: 584

Two options:

  • Currently word only highlights in yellow.
  • Use plain HTML around "word" with CSS to do the highlighting, colorization, etc.

For the people who are wondering what the suggested solutions in the answer above are all about, here it is.

  • They are Node.js plugins (packages). You can install them in your Node environment and run the corresponding HTML through them. I would call the result transpiled HTML, similar to transpiling Coffee Script in regular JavaScript because JavaScript does not have features available in Coffee Script.

  • Markdown does NOT have the ability to highlight single words, so the suggestion is to "pipe"/pass what you have to this Node package, and it will spit out the HTML needed to highlight the specific word.

  • The problem is that it does not scale. You have to transpile every time. The idea is to just put a tag around the word you want to highlight, similar to word, which only does it in yellow.

Upvotes: 0

iamCY
iamCY

Reputation: 31

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
    },
  });

Upvotes: 3

Related Questions