https://github.com/privatenumber/comment-mark
Interpolate strings with HTML comment markers!
https://github.com/privatenumber/comment-mark
comment html inject interpolation markdown string
Last synced: 8 months ago
JSON representation
Interpolate strings with HTML comment markers!
- Host: GitHub
- URL: https://github.com/privatenumber/comment-mark
- Owner: privatenumber
- License: mit
- Created: 2020-10-22T06:34:59.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2025-05-20T17:49:26.000Z (11 months ago)
- Last Synced: 2025-08-09T03:31:00.730Z (9 months ago)
- Topics: comment, html, inject, interpolation, markdown, string
- Language: TypeScript
- Homepage:
- Size: 404 KB
- Stars: 25
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# comment-mark [](https://npm.im/comment-mark) [](https://npm.im/comment-mark) [](https://bundlephobia.com/result?p=comment-mark)
**comment-mark** lets you seamlessly embed dynamic content into your Markdown using persistent HTML comment placeholders—no separate template files required!
## Install
```sh
npm install comment-mark
```
## Quick start
### 1. Add placeholders to your Markdown
```md
## Last updated
```
### 2. Insert dynamic content
```js
import fs from 'fs'
import { commentMark } from 'comment-mark'
let markdown = fs.readFileSync('README.md', 'utf8')
markdown = commentMark(markdown, {
lastUpdated: new Date().toISOString()
})
fs.writeFileSync('README.md', markdown)
```
### Result
```md
## Last updated
2024-05-20T13:45:00.000Z
```
## Why use comment-mark?
Most Markdown templating requires separate template files and a build step. **comment-mark** eliminates this complexity by allowing a single Markdown file to act as both the template and the output.
### Real-world examples
- [Project index](https://github.com/privatenumber/privatenumber): Automatically updates `README.md` from `projects.json` on each Git commit.
- [Minification Benchmarks](https://github.com/privatenumber/minification-benchmarks): Inserts benchmarking results directly into `README.md`.
## Demo: Embed Git contributors
Here's a practical example showing how to auto-update a list of Git contributors in your README:
### Markdown Setup
```md
## Contributors
```
### Script
```js
import fs from 'fs'
import { execSync } from 'child_process'
import { commentMark } from 'comment-mark'
let markdown = fs.readFileSync('README.md')
markdown = commentMark(markdown, {
contributors: execSync('git shortlog -se HEAD -- .').toString().trim()
})
fs.writeFileSync('README.md', markdown)
```
### Output
```md
## Contributors
17 John Doe
5 Jane Smith
```
## API
### `commentMark(contentStr, data)`
* `contentStr` ``: The Markdown or HTML content.
* `data` `>`: Key-value pairs representing placeholders and their replacements.
**Returns:** ``: The original string with placeholders replaced by provided values.
## FAQ
### Why HTML comments?
Markdown generally supports basic HTML, and HTML comment pairs are a safe, unobtrusive way to mark placeholders.
### Why pairs of HTML comments instead of single placeholders?
Pairs ensure the placeholders remain intact after multiple updates, avoiding the need for separate source and distribution files.