Package Exports
- rehype-code-language-labels
- rehype-code-language-labels/dist/index.js
- rehype-code-language-labels/dist/index.mjs
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rehype-code-language-labels) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 */);