A 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:
npm i marked-code-preview
# or
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
:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Marked code preview extension</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moo/moo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/json-loose/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/attributes-parser/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-code-preview/dist/index.umd.min.js"></script>
<script>
// 🚨 Important: The `preview` attribute must be specified in code fence blocks.
const md = `# Example
\`\`\`html preview title="Code title"
<div class='foo'>Hello, World!</div>
\`\`\`
`
document.getElementById('content').innerHTML = new marked.Marked()
.use(markedCodePreview())
.parse(md)
</script>
</body>
</html>
Say we have the following file example.md
:
# Example
```html preview title="Code title"
<div class="foo">Hello, World!</div>
```
🚨 Important: The preview
attribute must be specified in code fence blocks.
And our module example.js
looks as follows:
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:
<h1>Example</h1>
<figure class="preview">
<figcaption>Code title</figcaption>
<div class="preview-showcase">
<div class="foo">Hello, World!</div>
</div>
<div class="preview-code">
<pre><code class="language-html"><div class='foo'>Hello, World!</div>
</code></pre>
</div>
</figure>
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:
<figure class="preview">
<figcaption>{title}</figcaption>
<div class="preview-showcase">{preview}</div>
<div class="preview-code">{code}</div>
</figure>
You can customize the template according to your needs. For example:
import { readFileSync } from 'node:fs'
import { marked } from 'marked'
import markedCodePreview from 'marked-code-preview'
const customTemplate = `
<figure>
<div class='preview-container'>
{preview}
</div>
<figcaption>{title}</figcaption>
</figure>
`
const html = marked
.use({ gfm: true })
.use(markedCodePreview({ template: customTemplate }))
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
Yields:
<h1>Example</h1>
<figure>
<div class="preview-container">
<div class="foo">Hello, World!</div>
</div>
<figcaption>Code title</figcaption>
</figure>
The transformer function for modifying preview code before replacing the {preview}
placeholder.
Default transformer:
;(code, attrs, data) => code
We 💛 issues.
When committing, please conform to the semantic-release commit standards. Please install commitizen
and the adapter globally, if you have not already.
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
.
git add . && git cz
A project by Stilearning © 2023-2024.