{"id":13357275,"url":"https://github.com/notiz-dev/ngx-markdoc","last_synced_at":"2026-03-05T22:08:19.159Z","repository":{"id":85470287,"uuid":"514296237","full_name":"notiz-dev/ngx-markdoc","owner":"notiz-dev","description":"Markdoc for Angular","archived":false,"fork":false,"pushed_at":"2023-11-20T14:47:38.000Z","size":1187,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-22T21:04:12.730Z","etag":null,"topics":["angular","markdoc","markdown"],"latest_commit_sha":null,"homepage":"https://ngx-markdoc.web.app","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/notiz-dev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"notiz-dev","patreon":"notiz_dev"}},"created_at":"2022-07-15T14:19:57.000Z","updated_at":"2025-07-24T14:36:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"dfa677aa-0a1f-41e6-a374-e181cfec20bb","html_url":"https://github.com/notiz-dev/ngx-markdoc","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/notiz-dev/ngx-markdoc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-markdoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-markdoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-markdoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-markdoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notiz-dev","download_url":"https://codeload.github.com/notiz-dev/ngx-markdoc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-markdoc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30152080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T21:15:50.531Z","status":"ssl_error","status_checked_at":"2026-03-05T21:15:11.173Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","markdoc","markdown"],"created_at":"2024-07-29T21:03:01.477Z","updated_at":"2026-03-05T22:08:19.141Z","avatar_url":"https://github.com/notiz-dev.png","language":"TypeScript","readme":"# @notiz/ngx-markdoc\n\n```bash\nnpm i @notiz/ngx-markdoc @markdoc/markdoc js-yaml\n\nnpm i -D @types/js-yaml\n```\n\nSet `esModuleInterop` to `true` in your `tsconfig.json`.\n\n## Usage\n\nProvide `HttpClient` in your `app.config.ts`\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\nimport { provideHttpClient } from '@angular/common/http';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideRouter(routes), provideHttpClient()],\n};\n```\n\nImport `Markdoc` into your component and use `\u003cmarkdoc\u003e\u003c/markdoc\u003e` in your template.\n\n```ts\nimport { Component } from '@angular/core';\nimport { Markdoc } from '@notiz/ngx-markdoc';\n\n@Component({\n  selector: 'app-docs',\n  standalone: true,\n  imports: [Markdoc],\n  template: ` \u003cmarkdoc src=\"assets/md/docs/getting-started.md\"\u003e\u003c/markdoc\u003e `,\n})\nexport class DocsComponent {}\n```\n\n### 1. Content\n\n```html\n\u003cmarkdoc\u003e # Markdoc for Angular \u003c/markdoc\u003e\n```\n\n### 2. Content input\n\n```html\n\u003cmarkdoc content=\"# Markdoc for Angular\"\u003e \u003c/markdoc\u003e\n```\n\n### 3. Markdown file\n\n```html\n\u003cmarkdoc src=\"assets/md/example.md\"\u003e\u003c/markdoc\u003e\n```\n\n## Options\n\nUse `provideMarkdocOptions` to optionally pass a Markdoc configuration options.\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\nimport { provideHttpClient } from '@angular/common/http';\n\nimport { provideMarkdocOptions } from '@notiz/ngx-markdoc';\nimport { Config, Node, Tag } from '@markdoc/markdoc';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideHttpClient(),\n    provideMarkdocOptions({\n      config: {\n        tags: {\n          figure: {\n            selfClosing: true,\n            attributes: {\n              src: { type: String, required: true },\n              alt: { type: String, required: true },\n              caption: { type: String, required: true },\n            },\n            transform: (node: Node, config: Config) =\u003e {\n              const { src, alt, caption } = node.transformAttributes(config);\n              const imageTag = new Tag('img', { src, alt });\n              const captionTag = new Tag('figcaption', {}, [caption]);\n              return new Tag('figure', {}, [imageTag, captionTag]);\n            },\n          },\n        },\n      },\n    }),\n  ],\n};\n```\n\nNow you can use `{% figure %}` tag in your Markdown file\n\n```md\n{% figure src=\"https://images.unsplash.com/photo-1610296669228-602fa827fc1f?ixlib=rb-1.2.1\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=1675\u0026q=80\" alt=\"Pelican nebulae mosaic\" caption=\"Pelican nebulae mosaic\" /%}\n```\n","funding_links":["https://github.com/sponsors/notiz-dev","https://patreon.com/notiz_dev"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-markdoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotiz-dev%2Fngx-markdoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-markdoc/lists"}