sergioramos/remark-prism

Using plugins

object505 opened this issue · 3 comments

object505 commented

Hello,
I am trying to use the line-numbers plugin, but I can't manage to show the numbers.

This is my setup:

import remark from 'remark'
import html from 'remark-html'
import prism from 'remark-prism'

export default async function markdownToHtml(markdown) {
  const result = await remark()
    .use(prism, {
      transformInlineCode: true,
      plugins: [
        'line-numbers'
      ]
    })
    .use(html)
    .process(markdown)

  return result.toString()
}

I have imported the css needed for the line-numbers.

The only difference from the prism line-number example is the missing spans at the bottom of the code block, for example:

<span aria-hidden="true" class="line-numbers-rows">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</span>

What am I missing?

Thanks :)

epleaner commented

This is super old but did you figure this out? The docs are confusing and I don't understand how to add line numbers. Thanks!

  • 👀2
Noorts commented

For those still running into this problem, I got it working with the set up discussed below.

Context

I was using the blog-starter template.

Steps to enable plugin

  1. Install remark-prism (because of the TypeScript template I used I also installed @types/remark-prism).
  2. Import the theme and plugin(s) inside of your app. Note: unpkg.com is just one of the available CDNs.
// File: _document.tsx (wherever you perform your meta imports)
...
<Head>
      <link
        rel="stylesheet"
        href="https://unpkg.com/prismjs@1.28.0/themes/prism-okaidia.min.css"
      />
      <link
        rel="stylesheet"
        href="https://unpkg.com/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.css"
      />
     ...
</Head>
  1. Enable the plugin in the remark-prism config. Note: only a select few plugins are supported through remark-prism.
// File: markdownToHtml.ts

import { remark } from "remark";
import html from "remark-html";
import prism from "remark-prism";

export default async function markdownToHtml(markdown: string) {
  const result = await remark()
    .use(html, { sanitize: false })
    .use(prism, {
      plugins: ["line-numbers"],
    })
    .process(markdown);
  return result.toString();
}
  1. Add the class annotation to your code snippet.
// File: hello-world.md

# A code block is included below in this MarkDown file.

```css[class="line-numbers"]
@font-face {
	src: url(https://lea.verou.me/logo.otf);
	font-family: 'LeaVerou';
}
```
  • 👍1
object505 commented

Yes, this is my final version with line numbers:

import remark from 'remark'
import html from 'remark-html'
import prism from 'remark-prism'
import slug from 'remark-slug'
import headings from 'remark-autolink-headings'
import externalLinks from 'remark-external-links'

export default async function markdownToHtml(markdown) {
  const result = await remark()
    .use(externalLinks, {target: '_blank', rel: ['nofollow noopener']})
    .use(slug)
    .use(headings, {
      // linkProperties: {
      //   className: ['group-hover:opacity-100']
      // },
    })
    .use(html)
    .use(prism, {
      transformInlineCode: true,
      plugins: [
        'line-numbers'
      ]
    })
    .process(markdown)

  return result.toString()
}

I hope it will help someone :)

  • 👍1