Markdown-it-named-code-blocks NPM

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:

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

Rendered as:

<pre class="named-fence-block"><code class="language-js">console.log(&quot;Hello World!&quot;);
</code><div class="named-fence-filename">hello.js</div></pre>

After applying the css, it looks like this:

Rendered markdown

🏁 Getting Started

Prerequisites

Node.js

Installing

npm install markdown-it-named-code-blocks

🎈 Usage

Use this same as a normal markdown-it plugin:

const md = require('markdown-it');
const namedCodeBlocks = require('markdown-it-named-code-blocks');

const parser = md().use(namedCodeBlocks);

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

const result = parser.render(str);

Apply CSS like this:

.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:

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

<pre class="hljs named-fence-block" style="position: relative; padding-top: 2em"><code>console.log(&quot;Hello World!&quot;)
</code><div class="mincb-name" style="position: absolute; top: 0; left: 0; padding: 0 4px; font-weight: bold; color: #000000; background: #c0c0c0; opacity: .6;">hello.js</div></pre>