A marked extension for Shiki
npm install marked-shiki- Install
- Usage
- Browser
- Node.js
- API
- markedShiki(options: Options): MarkedExtension
- Related
- Contributing
- License
You can install marked-shiki using npm or yarn:
``bash`
npm i marked-shiki shikior
yarn add marked-shiki shiki
Once you've installed this extension, you can use it in your marked configuration. Here's an example of how to configure it:
Please take a moment to review the index.html file.
Say we have the following file example.md:
example.md
```mdExample
A marked A marked extension for Shiki.
Use [!code ++] and [!code --] to mark added and removed lines.
For example, the following code
``md`js`
export function foo() {
console.log('hewwo') // [\!code --]
console.log('hello') // [\!code ++]
}
will be transformed to
`js`
export function foo() {
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
}
Use [!code highlight] to highlight a line (adding highlighted class).
``md`js`
export function foo() {
console.log('Highlighted') // [\!code highlight]
}
Results in
`js`
export function foo() {
console.log('Highlighted') // [!code highlight]
}
Alternatively, you can use the transformerMetaHighlight to highlight lines based on the meta string.
Use [!code word:xxx] to highlight a word (adding highlighted-word class).
``md`js`
export function foo() {
// [\!code word:Hello]
const msg = 'Hello World'
console.log(msg) // prints Hello World
}
Results in
`js`
export function foo() {
// [!code word:Hello]
const msg = 'Hello World'
console.log(msg) // prints Hello World
}
You can also specify the number of occurrences to highlight, e.g. [!code word:options:2] will highlight the next 2 occurrences of options.
``md`js`
// [\!code word:options:2]
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // this one will not be highlighted
`js`
// [!code word:options:2]
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // this one will not be highlighted
Use [!code focus] to focus a line (adding focused class).
``md`js`
export function foo() {
console.log('Focused') // [\!code focus]
}
Results in
`js`
export function foo() {
console.log('Focused') // [!code focus]
}
Use [!code error], [!code warning], to mark a line with an error level (adding highlighted error, highlighted warning class).
``md`js`
export function foo() {
console.error('Error') // [\!code error]
console.warn('Warning') // [\!code warning]
}
Results in
`js`
export function foo() {
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
}
Highlight lines based on the meta string provided on the code snippet. Requires integrations supports.
``md`js {1,3-4}`
console.log('1')
console.log('2')
console.log('3')
console.log('4')
Results in
`js {1,3-4}`
console.log('1')
console.log('2')
console.log('3')
console.log('4')
Highlight words based on the meta string provided on the code snippet. Requires integrations supports.
``md`js /Hello/`
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
Results in
`js /Hello/`
const msg = 'Hello World'
console.log(msg) // prints Hello World
And our module example.js looks as follows:
`js
import { readFileSync } from 'node:fs'
import { Marked } from 'marked'
import markedShiki from 'marked-shiki'
import { createHighlighter } from 'shiki'
// npm i @shikijs/transformers
import {
transformerNotationDiff,
transformerNotationHighlight,
transformerNotationWordHighlight,
transformerNotationFocus,
transformerNotationErrorLevel,
transformerMetaHighlight,
transformerMetaWordHighlight
} from '@shikijs/transformers'
const highlighter = await createHighlighter({
// In this case, we include the "js" language specifier to ensure that
// Shiki applies the appropriate syntax highlighting for Markdown code
// blocks.
langs: ['md', 'js'],
themes: ['github-dark-dimmed']
})
const html = await new Marked()
.use(
markedShiki({
highlight(code, lang, props) {
return highlighter.codeToHtml(code, {
lang,
theme: 'github-dark-dimmed',
meta: { __raw: props.join(' ') }, // required by transformerMeta*
transformers: [
transformerNotationDiff({
matchAlgorithm: 'v3'
}),
transformerNotationHighlight({
matchAlgorithm: 'v3'
}),
transformerNotationWordHighlight({
matchAlgorithm: 'v3'
}),
transformerNotationFocus({
matchAlgorithm: 'v3'
}),
transformerNotationErrorLevel({
matchAlgorithm: 'v3'
}),
transformerMetaHighlight(),
transformerMetaWordHighlight()
]
})
}
})
)
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
`
Now, running node example.js yields:
See result:
`` For example, the following code will be transformed to Results in Results in Results in Results in Results in Results inhtml``Example
A marked A marked extension for
Shiki.Transformers
transformerNotationDiff
Use [!code ++] and [!code --] to mark added and
removed lines.
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
export function foo() {
console.log('hewwo') // [\!code --]
console.log('hello') // [\!code ++]
}
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>export function foo() {
console.log('hewwo')
console.log('hello')
}transformerNotationHighlight
Use [!code highlight] to highlight a line (adding
highlighted class).
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
export function foo() {
console.log('Highlighted') // [\!code highlight]
}
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>export function foo() {
console.log('Highlighted')
}
Alternatively, you can use the
transformerMetaHighlight
to highlight lines based on the meta string.transformerNotationWordHighlight
Use [!code word:xxx] to highlight a word (adding
highlighted-word class).
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
export function foo() {
// [\!code word:Hello]
const msg = 'Hello World'
console.log(msg) // prints Hello World
}
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>export function foo() {
const msg = 'Hello World'
console.log(msg) // prints Hello World
}
You can also specify the number of occurrences to highlight, e.g.
[!code word:options:2] will highlight the next 2 occurrences of
options.
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
// [\!code word:options:2]
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // this one will not be highlighted
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // this one will not be highlightedtransformerNotationFocus
Use [!code focus] to focus a line (adding
focused class).
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
export function foo() {
console.log('Focused') // [\!code focus]
}
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>export function foo() {
console.log('Focused')
}transformerNotationErrorLevel
Use [!code error], [!code warning], to mark a line
with an error level (adding highlighted error,
highlighted warning class).
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js`
export function foo() {
console.error('Error') // [\!code error]
console.warn('Warning') // [\!code warning]
}
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>export function foo() {
console.error('Error')
console.warn('Warning')
}transformerMetaHighlight
Highlight lines based on the meta string provided on the code snippet.
Requires integrations supports.
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js {1,3-4}`
console.log('1')
console.log('2')
console.log('3')
console.log('4')
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>console.log('1')
console.log('2')
console.log('3')
console.log('4')transformerMetaWordHighlight
Highlight words based on the meta string provided on the code snippet.
Requires integrations supports.
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>`js /Hello/`
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
style="background-color:#22272e;color:#adbac7"
tabindex="0"
>const msg = 'Hello World'
console.log(msg) // prints Hello World
See related styles:
This is just a simple example of CSS that you can apply. Feel free to customize it according to your needs.
`css
pre.shiki {
position: relative;
z-index: 1;
padding: 1.5rem 0;
background: transparent;
border-radius: 0.5rem;
}
pre.shiki code {
display: block;
padding: 0 1.5rem;
transition: color 0.5s;
}
.shiki.has-focused .line:not(.focused) {
opacity: 0.7;
transition:
filter 0.35s,
opacity 0.35s;
filter: blur(1.25px);
}
.shiki.has-focused:focus .line:not(.focused),
.shiki.has-focused:hover .line:not(.focused) {
opacity: 1;
filter: blur(0);
}
.shiki code .diff,
.shiki code .highlighted {
transition: background-color 0.5s;
margin: 0 -1.5rem;
padding: 0 1.5rem;
width: 100%;
display: inline-block;
}
.shiki code .diff::before {
position: absolute;
left: 10px;
}
.shiki code .diff.add {
background-color: rgba(70, 149, 74, 0.15);
}
.shiki code .diff.add::before {
content: '+';
color: #57ab5a;
}
.shiki code .diff.remove {
background-color: rgba(229, 83, 75, 0.1);
opacity: 0.7;
}
.shiki code .diff.remove::before {
content: '-';
color: #f47067;
}
.shiki code .highlighted {
background-color: rgba(99, 110, 123, 0.1);
}
.shiki code .highlighted.error {
background-color: rgba(229, 83, 75, 0.15);
}
.shiki code .highlighted.warning {
background-color: rgba(174, 124, 20, 0.15);
}
.shiki .highlighted-word {
background-color: rgba(65, 132, 228, 0.4);
border: 1px solid rgba(65, 132, 228, 0.6);
padding: 1px 3px;
margin: -1px -3px;
border-radius: 4px;
}
`
This function creates a Marked extension that integrates Shiki for syntax highlighting.
`js
import { marked } from 'marked'
import markedShiki from 'marked-shiki'
import { codeToHtml } from 'shiki'
const html = await marked.use(
markedShiki({
async highlight(code, lang) {
return await codeToHtml(code, { lang, theme: 'min-light' })
},
container:
%s
}).parse(md)
)
options: An object containing the following properties:
- highlight: A function that formats and highlights the code according to a specific coding style or convention.container
- (optional): A string representing the HTML container for the highlighted code. Default is '%s'.
Below are the available template placeholders:
- %s: Represents the highlighted code.%t
- : Represents the original code.%l
- : Represents the language.
See extensions list.
We 💛 issues.
When committing, please conform to the semantic-release commit standards. Please install commitizen and the adapter globally, if you have not already.
`bash`
npm i -g commitizen cz-conventional-changelog
Now you can use git cz or just cz instead of git commit when committing. You can also use git-cz, which is an alias for cz.
`bash``
git add . && git cz
A project by Stilearning © 2023-2024.