Rehype plugin that creates an element before the code section when parsing Markdown code blocks.
npm install rehype-code-language-labelsRehype plugin that creates an element before the code section when parsing Markdown code blocks.
``shell`
npm install rehype-code-language-labels
This package exports no identifiers. The default export is rehypeCodeLanguageLabels
---
#### 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
`css
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 with language
``mdCode Example
`bash`
// code here
> Output
`html`
bash
---
> Input without any language
``mdCode Example
`
// text here
> Output
`html`
Use this as a Rehype Plugin.
`typescript
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 /);
``