# @speedy-js/code-title

> A markdown-it plugin to create named code blocks.

Latest version **0.1.3** (published 2022-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @speedy-js/code-title
pnpm add @speedy-js/code-title
yarn add @speedy-js/code-title
bun add @speedy-js/code-title
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-01-19 |
| First published | 2022-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 48.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | tsutsu3 |
| Maintainers | null~, thisispluto, zoolsher, ulivz, hardfist |
| Keywords | markdown, markdown-it, markdown-it-plugin, code-blocks, fence |

## Links

- npm: https://www.npmjs.com/package/@speedy-js/code-title
- Repository: https://github.com/tsutsu3/markdown-it-named-code-blocks
- Homepage: https://github.com/tsutsu3/markdown-it-named-code-blocks#readme
- Issues: https://github.com/tsutsu3/markdown-it-named-code-blocks/issues
- npm.io page: https://npm.io/package/@speedy-js/code-title

## Dependencies (1)

- [node-html-parser](https://npm.io/package/node-html-parser.md) ^1.3.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2022-01-19
- 0.1.2 — 2022-01-19
- 0.1.1 — 2022-01-19
- 0.1.0 — 2022-01-19

## README

# markdown-it-named-code-blocks

A [markdown-it](https://github.com/markdown-it/markdown-it#readme) plugin to create named code blocks.

[![Build Status](https://travis-ci.org/tsutsu3/markdown-it-named-code-blocks.svg?branch=master)](https://travis-ci.org/tsutsu3/markdown-it-named-code-blocks)
[![NPM version](https://img.shields.io/npm/v/markdown-it-named-code-blocks.svg?style=flat)](https://www.npmjs.org/package/markdown-it-named-code-blocks)
[![Code Climate](https://codeclimate.com/github/tsutsu3/markdown-it-named-code-blocks/badges/gpa.svg)](https://codeclimate.com/github/tsutsu3/markdown-it-named-code-blocks)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/tsutsu3/markdown-it-named-code-blocks/LICENSE)

## 🧐 About

With this pllugin you can create named code blocks like:

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

Rendered as:

```html
<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:

![Renderd markdown](image/named_code_blocks.png)

## 🏁 Getting Started

### Prerequisites

- [Node.js](https://nodejs.org/)

### Installing

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

## 🎈 Usage

Use this same as a normal markdown-it plugin:

```js
var md = require('markdown-it');
var namedCodeBlocks = require('markdown-it-named-code-blocks');

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

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

var result = parser.render(str);
```

Apply CSS like this:

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

![Renderd markdown](image/named_code_blocks.png)

If you want to enable inline CSS:

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

```html
<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>
```



## 🎉 License

Distributed under the `MIT` License. See [LICENSE]() for more information.

---
_Source: https://npm.io/package/@speedy-js/code-title · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._