@islands/prism v0.8.0
An รฎles module that injects a remark plugin to provide syntax highlighting for MDX documents:
๐ uses PrismJS supporting a wide variety of programming languages
๐ฆ highlight specific lines (
{3}
,{7-13}
, or{16,23-27,40}
)๐ข display line numbers (
showLineNumbers
)๐ faster than
@mapbox/rehype-prism
,remark-prism
andrehype-prism-plus
Usage ๐
Add the module to iles.config.ts
:
// iles.config.ts
import { defineConfig } from 'iles'
export default defineConfig({
modules: [
'@islands/prism',
],
})
Then, you can highlight lines or display line numbers in code blocks:
```js {6} showLineNumbers
// iles.config.ts
import { defineConfig } from 'iles'
export default defineConfig({
modules: [
'@islands/prism',
],
})
```
Configuration โ๏ธ
You can also import the module directly to get autocompletion when providing options:
// iles.config.ts
import { defineConfig } from 'iles'
import prism from '@islands/prism'
export default defineConfig({
modules: [
prism({
aliases: { zsh: 'bash' },
showLineNumbers: true,
}),
],
})
When showLineNumbers
is enabled globally, you can use hideLineNumbers
to
opt-out in a specific code block.
Styling ๐จ
Each code block will be transformed to HTML with the following structure:
<div class="language-js" data-lang="js">
<pre class="line-highlight">...</pre>
<pre class="language-ts"><code>...</code></pre>
<pre class="line-numbers">...</pre>
</div>
You can use the following styles to ensure everything lines up as expected:
div[class*='language-'] {
position: relative;
/* background, font-size, line-height */
}
div[class*='language-'] pre {
/* padding */
}
pre[class*='language-'] {
position: relative; /* position it to allow text selection */
overflow: auto;
}
pre.line-highlight,
pre.line-numbers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
user-select: none;
overflow: hidden;
}
.line-highlight > .highlighted {
background: rgba(0,0,0,0.1);
}
div[class*='language-'].line-numbers-mode {
--gutter-width: 3.5rem;
padding-left: calc(var(--gutter-width) + 1rem);
}
pre.line-numbers {
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
width: var(--gutter-width);
}
If you wish to display the language, you can use the value of the data-lang
attribute by using the attr
CSS function:
div[class*='language-']:before {
content: attr(data-lang);
color: #888;
font-size: 0.8rem;
position: absolute;
right: 1em;
top: 0.6em;
}