markdown-it-named-code-blocks

A markdown-it plugin to create named code blocks.


🧐 About

With this plugin you can create named code blocks like:

```txt
`js:hello.js
console.log("Hello World!")
`
``

Rendered as:

`html


console.log("Hello World!");
hello.js

`bash
npm install markdown-it-named-code-blocks
`

🎈 Usage

Use this same as a normal markdown-it plugin:

`js
const md = require("markdown-it");
const hljs = require("highlight.js");
const namedCodeBlocks = require(".");

const parser = md({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
return (
'

' +
        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
        "

' + md.utils.escapeHtml(str) + "

const str = '`js:hello.js\nconsole.log("Hello World!");\n`';

const result = parser.render(str);

console.log(result);
`

Output:

`html


console.log("Hello World!");
hello.js

`css
.named-fence-block {
position: relative;
padding-top: 2em;
}

.named-fence-filename {
position: absolute;
top: 0;
left: 0;
padding: 0 4px;
font-weight: bold;
color: #000000;
background: #c0c0c0;
opacity: 0.6;
}
`

Rendered:

!Rendered markdown

If you want to enable inline CSS:

`js
const parser = md().use(namedCodeBlocks, {isEnableInlineCss: true});
`

Output:

`html


console.log("Hello World!");
hello.js

Distributed under the MIT` License. See LICENSE for more information.