rehype-code-language-labels

Rehype plugin that creates an element before the code section when parsing Markdown code blocks.

Installation

npm install rehype-code-language-labels

API

This package exports no identifiers. The default export is rehypeCodeLanguageLabels

rehype().use(rehypeCodeLanguageLabels[, options])

options

options.customClassName

Specify your own custom css class name to apply. Defaults to rehype-code-language-label. Note: you will have to write the CSS implementation yourself.

For example

section {
  position: relative;
}

.rehype-code-language-label {
  font-weight: 600;
  font-size: 0.65rem;
  position: absolute;
  text-transform: uppercase;
  right: 0px;
  user-select: none;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

options.fallbackLanguage

Fallback language.

// default behavior will be

```bash
// language will be 'bash'
```

```
// Nothing will generate
```

Input & Output

Input with language

## Code Example

```bash
// code here
```

Output

<pre>
  <small class="rehype-code-language-label">bash</small>
  <code class="language-bash">
    <!-- HTML parse code here -->
  </code>
</pre>

Input without any language

## Code Example

```
// text here
```

Output

<pre>
  <code class="">
    <!-- HTML parse text here -->
  </code>
</pre>

Usage

Use this as a Rehype Plugin.

import rehype from "rehype";
import rehypeHighlight from "rehype-highlight";
import rehypeCodeLanguageLabels from "rehype-code-language-labels";

rehype()
  .use(rehypeHighlight)
  // should always be after rehypeHighlight.
  .use(rehypeCodeLanguageLabels)
  // In case you still want to display 'something' as default value
  // .use(rehypeCodeLanguageLabels, {fallbackLanguage: "UNKNOWN"})
  .use(rehypeStringify)
  .process(/* markdown */);

License

MIT

Ref

• How to make your own NPM package (Step-by-Step) 📦