{"id":19112917,"url":"https://github.com/bradlc/mdx-annotations","last_synced_at":"2025-04-30T22:14:52.258Z","repository":{"id":65373280,"uuid":"572462673","full_name":"bradlc/mdx-annotations","owner":"bradlc","description":"Markdoc-style annotations for MDX","archived":false,"fork":false,"pushed_at":"2023-11-12T23:01:34.000Z","size":183,"stargazers_count":24,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T22:14:47.060Z","etag":null,"topics":["markdoc","markdown","mdx","recma","rehype","remark"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/bradlc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-30T10:28:08.000Z","updated_at":"2025-02-24T13:02:41.000Z","dependencies_parsed_at":"2024-06-19T00:05:52.829Z","dependency_job_id":"d7222433-f1ac-426c-ab3f-bda2cb16d826","html_url":"https://github.com/bradlc/mdx-annotations","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"ff58510260d586fd417e5491da1cb6857597238f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradlc%2Fmdx-annotations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradlc%2Fmdx-annotations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradlc%2Fmdx-annotations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradlc%2Fmdx-annotations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradlc","download_url":"https://codeload.github.com/bradlc/mdx-annotations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251789618,"owners_count":21644086,"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":["markdoc","markdown","mdx","recma","rehype","remark"],"created_at":"2024-11-09T04:34:31.819Z","updated_at":"2025-04-30T22:14:52.240Z","avatar_url":"https://github.com/bradlc.png","language":"JavaScript","readme":"# mdx-annotations\n\n\u003e [Markdoc](https://markdoc.dev/)-style annotations for [MDX](https://mdxjs.com/)\n\n## Installation\n\n```\nnpm install mdx-annotations\n```\n\nTo maximise compatibility `mdx-annotations` is provided as **three separate plugins that must be used together**:\n\n```js\nimport { compile } from '@mdx-js/mdx'\nimport { mdxAnnotations } from 'mdx-annotations'\n\nlet mdx = `# Hello, world! {{ id: 'intro' }}`\n\nawait compile(mdx, {\n  remarkPlugins: [mdxAnnotations.remark],\n  rehypePlugins: [mdxAnnotations.rehype],\n  recmaPlugins: [mdxAnnotations.recma],\n})\n```\n\n\u003e **Note**\\\n\u003e It is recommended to include each plugin _first_ in their respective plugin arrays.\n\n## Usage\n\nAn annotation is a JavaScript object associated with an MDX node. The object properties are passed to the resulting JSX element as props.\n\n**Input:**\n\n```markdown\n# Hello, world! {{ id: 'intro' }}\n```\n\n**Output:**\n\n```html\n\u003ch1 id=\"intro\"\u003eHello, world!\u003c/h1\u003e\n```\n\n## Examples\n\n\u003cdetails\u003e\n  \u003csummary\u003eHeadings\u003c/summary\u003e\n\n```markdown\n# Hello, world! {{ id: 'intro' }}\n\n## Hello, world! {{ id: 'intro' }}\n\n### Hello, world! {{ id: 'intro' }}\n\n#### Hello, world! {{ id: 'intro' }}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eList items\u003c/summary\u003e\n\n```markdown\n- Hello, world! {{ id: 'intro' }}\n```\n\nWhen a list item contains multiple children the annotation is attached to the child:\n\n**Input:**\n\n```markdown\n- Hello, world! {{ className: 'text-lg' }}\n\n  Lorem ipsum {{ className: 'text-sm' }}\n```\n\n**Output:**\n\n```html\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cp className=\"text-lg\"\u003eHello, world!\u003c/p\u003e\n    \u003cp className=\"text-sm\"\u003eLorem ipsum\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCode\u003c/summary\u003e\n\n````markdown\n```{{ title: 'Example' }}\nHello, world!\n```\n\n```php {{ title: 'Example' }}\necho 'Hello, world!';\n```\n````\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eThematic breaks\u003c/summary\u003e\n\n```markdown\n--- {{ className: 'my-10' }}\n\n*** {{ className: 'my-10' }}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eInline elements\u003c/summary\u003e\n\nTo annotate an inline element ensure that there is no whitespace between the element and the annotation:\n\n```markdown\n**Hello world**{{ className: 'text-red-500' }}\n_Hello world_{{ className: 'text-red-500' }}\n`Hello world`{{ className: 'text-red-500' }}\n[Hello world](#){{ className: 'text-red-500' }}\n![](/img.png){{ className: 'object-cover' }}\n```\n\n\u003c/details\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradlc%2Fmdx-annotations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradlc%2Fmdx-annotations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradlc%2Fmdx-annotations/lists"}