A Marked extension for transforming code blocks into code previews
npm install marked-code-previewA marked extension to transform code blocks within Markdown documents into code previews. It allows you to generate visually appealing code previews for your code snippets within your Markdown content. You can customize the appearance and behavior of code previews using templates and options.
You can install marked-code-preview using npm or yarn:
``bash`
npm i marked-code-previewor
yarn add marked-code-preview
To use this extension in your Marked processing pipeline, you need to configure your marked processor with this extension. Here's an example of how to do it:
Say we have the following file example.html:
`html
`
Say we have the following file example.md:
``mdExample
`html preview title="Code title"`Hello, World!
🚨 Important: The preview attribute must be specified in code fence blocks.
And our module example.js looks as follows:
`js
import { readFileSync } from 'node:fs'
import { marked } from 'marked'
import markedCodePreview from 'marked-code-preview'
const html = marked
.use({ gfm: true })
.use(markedCodePreview)
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
`
Now, running node example.js yields:
`htmlExample
Hello, World!
<div class='foo'>Hello, World!</div>
`
This extension accepts the following options:
The code preview template to use. You can customize the preview layout using placeholders like {preview}, {code}, codefence meta data (e.g. {title}), and your custom data.
The default template looks like this:
`html`
{preview}
{code}
You can customize the template according to your needs. For example:
`js
import { readFileSync } from 'node:fs'
import { marked } from 'marked'
import markedCodePreview from 'marked-code-preview'
const customTemplate =
{preview}
const html = marked
.use({ gfm: true })
.use(markedCodePreview({ template: customTemplate }))
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
`
Yields:
`htmlExample
Hello, World!
`
The transformer function for modifying preview code before replacing the {preview} placeholder.
Default transformer:
`js`
;(code, attrs, data) => code
- marked-code-format
- marked-code-jsx-renderer
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.