{"id":29275859,"url":"https://github.com/peterroe/markdown-it-comment","last_synced_at":"2025-07-05T07:11:22.856Z","repository":{"id":60730557,"uuid":"541243861","full_name":"peterroe/markdown-it-comment","owner":"peterroe","description":"Plugin for creating custom comment for markdown-it markdown parser.","archived":false,"fork":false,"pushed_at":"2023-12-15T20:17:42.000Z","size":1018,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-15T22:14:16.971Z","etag":null,"topics":["markdown-it","markdown-it-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterroe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-25T16:55:48.000Z","updated_at":"2023-08-19T05:19:36.000Z","dependencies_parsed_at":"2023-01-20T03:18:24.422Z","dependency_job_id":null,"html_url":"https://github.com/peterroe/markdown-it-comment","commit_stats":null,"previous_names":[],"tags_count":8,"template":null,"template_full_name":null,"purl":"pkg:github/peterroe/markdown-it-comment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterroe%2Fmarkdown-it-comment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterroe%2Fmarkdown-it-comment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterroe%2Fmarkdown-it-comment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterroe%2Fmarkdown-it-comment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterroe","download_url":"https://codeload.github.com/peterroe/markdown-it-comment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterroe%2Fmarkdown-it-comment/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263699785,"owners_count":23497963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown-it","markdown-it-plugin"],"created_at":"2025-07-05T07:11:21.631Z","updated_at":"2025-07-05T07:11:22.851Z","avatar_url":"https://github.com/peterroe.png","language":"TypeScript","readme":"# markdown-it-comment\n\n[![NPM version](https://img.shields.io/npm/v/markdown-it-comment.svg?style=flat)](https://www.npmjs.org/package/markdown-it-comment)\n\n\n\u003e Plugin for creating custom comment for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.\n\n__v2.+ requires `markdown-it` v5.+, see changelog.__\n\nWith this plugin you can create comments like:\n\n```\n[here be content]{here be comment}\n```\n\n.... and specify how they should be rendered. If no renderer defined, `\u003cspan\u003e` with name class will be created:\n\n```html\n\u003cspan class=\"md-content\"\u003ehere be content\u003c/span\u003e\n\u003cspan class=\"md-comment\"\u003ehere be comment\u003c/span\u003e\n```\n\n## Installation\n\nnode.js, browser:\n\n```bash\n$ npm install markdown-it-comment --save\n$ bower install markdown-it-comment --save\n```\n\n\n## API\n\n```js\nconst md = require('markdown-it')()\n  .use(require('markdown-it-comment')[,options])\n```\n\nParams:\n\n* options:\n  * renderContent - optional, renderer function for opening/closing content tokens.\n  * renderComment - optional, renderer function for opening/closing comment tokens.\n\n## Example\n\n```js\nconst md = require('markdown-it')()\n\nmd.use(require('markdown-it-comment'), {\n\n  renderContentDefault(tokens, idx, _options, env, slf) {\n    if (tokens[idx].nesting === 1)\n      tokens[idx].attrJoin('class', 'md-content')\n\n    return slf.renderToken(tokens, idx, _options, env, slf)\n  },\n\n  renderCommentDefault(tokens, idx, _options, env, slf) {\n    if (tokens[idx].nesting === 1)\n      tokens[idx].attrJoin('class', 'md-comment')\n\n    return slf.renderToken(tokens, idx, _options, env, slf)\n  }\n})\n\nconsole.log(md.render('hello [world]{this is a comment}'))\n\n// Output:\n// \u003cp\u003ehello \u003cspan class=\"md-content\"\u003eworld\u003c/span\u003e\n// \u003cspan class=\"md-comment\"\u003ethis is a comment\u003c/span\u003e\u003c/p\u003e\n\n```\n\n## Style\n\nRecommended style for comments:\n\n```css\n.md-content {\n  display: inline-block;\n  border-bottom: 2px solid #ffc60a;\n}\n.md-content:hover {\n  background-color: #faf1d1;\n}\n.md-content:hover + .md-comment {\n  opacity: 1;\n  animation: appear 0.5s;\n}\n@keyframes appear {\n  from {\n    right: -100px;\n  }\n  to {\n    right: 30px;\n  }\n}\n.md-comment {\n  display: inline-block;\n  opacity: 0;\n  text-align: left;\n  position: fixed;\n  transform: translateY(-50%);\n  top: 50%;\n  right: 30px;\n  border: 1px solid #ddd;\n  border-top: 6px solid #ffc60a;\n  border-radius: 8px;\n  padding: 10px 16px;\n  box-shadow: 0px 0px 16px #ddd;\n  transition: all .4s ease-out;\n  width: 250px;\n}\n\n@media (max-width: 1200px) {\n  .md-comment {\n    display: none;\n  }\n}\n```\n\n\n## Demo\n\nhttps://peterroe.github.io/markdown-it-comment/\n\n## License\n\n[MIT](https://github.com/markdown-it/markdown-it-comment/blob/master/LICENSE)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterroe%2Fmarkdown-it-comment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterroe%2Fmarkdown-it-comment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterroe%2Fmarkdown-it-comment/lists"}