https://github.com/tsutsu3/markdown-it-named-code-blocks
Named code block plugin for markdown-it.
https://github.com/tsutsu3/markdown-it-named-code-blocks
markdown markdown-it markdown-plugin
Last synced: about 2 months ago
JSON representation
Named code block plugin for markdown-it.
- Host: GitHub
- URL: https://github.com/tsutsu3/markdown-it-named-code-blocks
- Owner: tsutsu3
- License: mit
- Created: 2020-10-14T18:16:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-12-16T10:36:57.000Z (4 months ago)
- Last Synced: 2025-12-19T23:50:26.012Z (4 months ago)
- Topics: markdown, markdown-it, markdown-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/markdown-it-named-code-blocks
- Size: 688 KB
- Stars: 17
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-named-code-blocks
A [markdown-it](https://github.com/markdown-it/markdown-it#readme) plugin to create named code blocks.
[](https://github.com/tsutsu3/markdown-it-named-code-blocks/actions/workflows/ci.yml)
[](https://www.npmjs.org/package/markdown-it-named-code-blocks)
[](https://codeclimate.com/github/tsutsu3/markdown-it-named-code-blocks)
[](https://codecov.io/gh/tsutsu3/markdown-it-named-code-blocks)
[](https://github.com/tsutsu3/markdown-it-named-code-blocks/LICENSE)
## 🧐 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
```
After applying the css, it looks like this:
## 🏁 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
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 +
"
"
);
}
return (
'
' + md.utils.escapeHtml(str) + "
"
);
}
}).use(namedCodeBlocks);
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
```
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:
If you want to enable inline CSS:
```js
const parser = md().use(namedCodeBlocks, {isEnableInlineCss: true});
```
Output:
```html
console.log("Hello World!");
hello.js
```
## 🎉 License
Distributed under the `MIT` License. See [LICENSE](https://github.com/tsutsu3/markdown-it-named-code-blocks/blob/master/LICENSE) for more information.