{"id":13480951,"url":"https://github.com/jfcere/ngx-markdown","last_synced_at":"2026-10-19T15:12:53.497Z","repository":{"id":37622729,"uuid":"81023009","full_name":"jfcere/ngx-markdown","owner":"jfcere","description":"Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to HTML with syntax highlight and more...","archived":false,"fork":false,"pushed_at":"2026-10-16T00:45:40.000Z","size":34352,"stargazers_count":1197,"open_issues_count":32,"forks_count":184,"subscribers_count":12,"default_branch":"master","last_synced_at":"2026-10-19T11:14:05.349Z","etag":null,"topics":["angular","clipboard","clipboardjs","emoji","katex","markdown","marked","markedjs","md","mermaid","mermaidjs","ngx","parser","prism","prismjs","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://jfcere.github.io/ngx-markdown","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/jfcere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/jfcere","https://www.paypal.me/jfcere"]}},"created_at":"2017-02-05T21:20:51.000Z","updated_at":"2026-10-19T08:23:03.000Z","dependencies_parsed_at":"2026-10-05T09:49:13.223Z","dependency_job_id":null,"html_url":"https://github.com/jfcere/ngx-markdown","commit_stats":{"total_commits":317,"total_committers":16,"mean_commits":19.8125,"dds":0.38801261829653,"last_synced_commit":"72851b0b1c6fbf52a3feb4f9d72a256fc8978297"},"previous_names":["jfcere/ng2-markdown-to-html"],"tags_count":93,"template":false,"template_full_name":null,"purl":"pkg:github/jfcere/ngx-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfcere","download_url":"https://codeload.github.com/jfcere/ngx-markdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfcere%2Fngx-markdown/sbom","scorecard":{"id":517329,"data":{"date":"2025-08-11","repo":{"name":"github.com/jfcere/ngx-markdown","commit":"5e0d5456e5b31c64b926887ac590a42395254923"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.3,"checks":[{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/21 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":9,"reason":"5 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 9","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'","Warn: branch protection not enabled for branch 'version-12.1.0'","Warn: branch protection not enabled for branch 'version-11.2.0'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T02:10:28.356Z","repository_id":37622729,"created_at":"2025-08-20T02:10:28.356Z","updated_at":"2025-08-20T02:10:28.356Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38358692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","clipboard","clipboardjs","emoji","katex","markdown","marked","markedjs","md","mermaid","mermaidjs","ngx","parser","prism","prismjs","syntax-highlighting"],"created_at":"2024-07-31T17:00:46.901Z","updated_at":"2026-10-19T15:12:53.489Z","avatar_url":"https://github.com/jfcere.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/jfcere","https://www.paypal.me/jfcere"],"categories":["Uncategorized","TypeScript","UI Components","Third Party Components"],"sub_categories":["Uncategorized","Markdown"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Ngx-Markdown Logo\" src=\"https://github.com/jfcere/ngx-markdown/raw/master/demo/public/ngx-markdown.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/jfcere/ngx-markdown\"\u003e\n    \u003cimg alt=\"CircleCI Status\" src=\"https://circleci.com/gh/jfcere/ngx-markdown/tree/master.svg?style=shield\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/jfcere/ngx-markdown?branch=master\"\u003e\n    \u003cimg alt=\"Coverage Status\" src=\"https://coveralls.io/repos/github/jfcere/ngx-markdown/badge.svg?branch=master\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-markdown\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/ngx-markdown.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/ngx-markdown.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cimg alt=\"Dependency Status\" src=\"https://img.shields.io/librariesio/release/npm/ngx-markdown/22.1.1\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-markdown\"\u003e\n    \u003cimg alt=\"Monthly Downloads\" src=\"https://img.shields.io/npm/dm/ngx-markdown.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# ngx-markdown\n\nngx-markdown is an [Angular](https://angular.io/) library that combines...\n- [Marked](http://marked.js.org/) to parse markdown to HTML\n- [Prism.js](http://prismjs.com/) for language syntax highlight\n- [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) for emoji support\n- [KaTeX](https://katex.org/) for math expression rendering\n- [Mermaid](https://mermaid-js.github.io/) for diagrams and charts visualization\n- [Clipboard.js](https://clipboardjs.com/) to copy code blocks to clipboard\n\nDemo available @ [https://jfcere.github.io/ngx-markdown](https://jfcere.github.io/ngx-markdown)  \nStackBlitz available @ [https://stackblitz.com/edit/ngx-markdown](https://stackblitz.com/edit/ngx-markdown)\n\n### Table of contents\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [Renderer](#renderer)\n- [Syntax highlight](#syntax-highlight)\n- [Demo application](#demo-application)\n- [AoT compilation](#aot-compilation)\n- [Road map](#road-map)\n- [Contribution](#contribution)\n- [Support Development](#support-development)\n\n## Installation\n\n### ngx-markdown\n\nTo add ngx-markdown along with the required marked library to your `package.json` use the following commands.\n\n```bash\nnpm install ngx-markdown marked@^18.0.0 --save\n```\n\n### Syntax highlight\n\n\u003e :bell: Syntax highlight is **optional**, skip this step if you are not planning to use it\n\nTo add [Prism.js](http://prismjs.com/) library to your `package.json` use the following command.\n\n```bash\nnpm install prismjs@^1.30.0 --save\n```\n\nTo activate [Prism.js](http://prismjs.com/) syntax highlight you will need to include...\n- prism.js core library - `node_modules/prismjs/prism.js` file\n- a highlight css theme - from `node_modules/prismjs/themes` directory\n- desired code language syntax files - from `node_modules/prismjs/components` directory\n\n_Additional themes can be found by browsing the web such as [Prism-Themes](https://github.com/PrismJS/prism-themes) or [Mokokai](https://github.com/Ahrengot/Monokai-theme-for-Prism.js) for example._\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"styles\": [\n  \"styles.css\",\n+ \"node_modules/prismjs/themes/prism-okaidia.css\"\n],\n\"scripts\": [\n+ \"node_modules/prismjs/prism.js\",\n+ \"node_modules/prismjs/components/prism-csharp.min.js\", # c-sharp language syntax\n+ \"node_modules/prismjs/components/prism-css.min.js\" # css language syntax\n]\n```\n\n#### Line Numbers plugin\n\nTo use the [line numbers plugin](http://prismjs.com/plugins/line-numbers/) that shows line numbers in code blocks, in addition to Prism.js configuration files, you will need to include the following files from `prismjs/plugins/line-numbers` directory to your application:\n\n- CSS styling for line numbers - `prism-line-numbers.css`\n- line numbers plugin script - `prism-line-numbers.js`\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"styles\": [\n  \"src/styles.css\",\n  \"node_modules/prismjs/themes/prism-okaidia.css\",\n+ \"node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css\"\n],\n\"scripts\": [\n  \"node_modules/prismjs/prism.js\",\n  \"node_modules/prismjs/components/prism-csharp.min.js\",\n  \"node_modules/prismjs/components/prism-css.min.js\",\n+ \"node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js\"\n]\n```\n\nUsing `markdown` component and/or directive, you will be able to use the `lineNumbers` property to activate the plugin. The property can be used in combination with either `data` for variable binding, `src` for remote content or using transclusion for static markdown.\n\nAdditionally, you can use `start` input property to specify the offset number for the first display line.\n\n```html\n\u003cmarkdown\n  lineNumbers\n  [start]=\"5\"\n  [src]=\"path/to/file.js\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Line Highlight plugin\n\nTo use the [line highlight plugin](http://prismjs.com/plugins/line-highlight/) that highlights specific lines and/or line ranges in code blocks, in addition to Prism.js configuration files, you will need to include the following files from `prismjs/plugins/line-highlight` directory to your application:\n\n- CSS styling for line highlight - `prism-line-highlight.css`\n- line highlight plugin script - `prism-line-highlight.js`\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"styles\": [\n  \"src/styles.css\",\n  \"node_modules/prismjs/themes/prism-okaidia.css\",\n+ \"node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css\"\n],\n\"scripts\": [\n  \"node_modules/prismjs/prism.js\",\n  \"node_modules/prismjs/components/prism-csharp.min.js\",\n  \"node_modules/prismjs/components/prism-css.min.js\",\n+ \"node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js\"\n]\n```\n\nUsing `markdown` component and/or directive, you will be able to use the `lineHighlight` property to activate the plugin. The property can be used in combination with either `data` for variable binding, `src` for remote content or using transclusion for static markdown.\n\nUse `line` input property to specify the line(s) to highlight and optionally there is a `lineOffset` property to specify the starting line of code your snippet represents.\n\n```html\n\u003cmarkdown\n  lineHighlight\n  [line]=\"'6, 10-16'\"\n  [lineOffset]=\"5\"\n  [src]=\"path/to/file.js\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Command Line Plugin\n\nTo use the [command line plugin](https://prismjs.com/plugins/command-line/) that displays a command line with a prompt and, optionally, the output/response from the commands, you will need to include the following files from `prismjs/plugins/command-line` directory to your application:\n\n- CSS styling for command line - `prism-command-line.css`\n- command line plugin script - `prism-command-line.js`\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"styles\": [\n  \"src/styles.css\",\n  \"node_modules/prismjs/themes/prism-okaidia.css\",\n+ \"node_modules/prismjs/plugins/command-line/prism-command-line.css\"\n],\n\"scripts\": [\n  \"node_modules/prismjs/prism.js\",\n  \"node_modules/prismjs/components/prism-csharp.min.js\",\n  \"node_modules/prismjs/components/prism-css.min.js\",\n+ \"node_modules/prismjs/plugins/command-line/prism-command-line.js\"\n]\n```\n\nUsing `markdown` component and/or directive, you will be able to use the `commandLine` property to activate the plugin. The property can be used in combination with either `data` for variable binding, `src` for remote content or using transclusion for static markdown.\n\nFor a server command line, specify the user and host names using the `user` and `host` input properties. The resulting prompt displays a `#` for the root user and `$` for all other users. For any other command line, such as a Windows prompt, you may specify the entire prompt using the `prompt` input property.\n\nYou may also specify the lines to be presented as output (no prompt and no highlighting) through the `output` property in the following simple format:\n\n- A single number refers to the line with that number\n- Ranges are denoted by two numbers, separated with a hyphen (-)\n- Multiple line numbers or ranges are separated by commas\n- Whitespace is allowed anywhere and will be stripped off\n\n```html\n\u003cmarkdown\n  commandLine\n  [user]=\"'chris'\"\n  [host]=\"'remotehost'\"\n  [output]=\"'2, 4-8'\"\n  [src]=\"'path/to/file.bash'\"\u003e\n\u003c/markdown\u003e\n```\n\nOptionally, to automatically present some lines as output without providing the line numbers, you can prefix those lines with any string and specify the prefix using the `filterOutput` input property. For example, `[filterOutput]=\"'(out)'\"` will treat lines beginning with `(out)` as output and remove the prefix.\n\n```html\n\u003cmarkdown\n  commandLine\n  [prompt]=\"'PS C:\\Users\\Chris\u003e'\"\n  [filterOutput]=\"'(out)'\"\u003e\n  ```powershell\n  Get-Date\n  (out)\n  (out)Sunday, November 7, 2021 8:19:21 PM\n  (out)\n  `​``\n\u003c/markdown\u003e\n```\n\n### Emoji support\n\n\u003e :bell: Emoji support is **optional**, skip this step if you are not planning to use it\n\nTo add [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) library to your `package.json` use the following command.\n\n```bash\nnpm install emoji-toolkit@^11.0.0 --save\n```\n\nTo activate [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) for emoji suppport you will need to include...\n- Emoji-Toolkit library - `node_modules/emoji-toolkit/lib/js/joypixels.min.js`\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"scripts\": [\n+ \"node_modules/emoji-toolkit/lib/js/joypixels.min.js\",\n]\n```\n\n#### Emoji plugin\n\nUsing `markdown` component and/or directive, you will be able to use the `emoji` property to activate [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) plugin that converts emoji shortnames such as `:heart:` to native unicode emojis.\n\n```html\n\u003cmarkdown emoji\u003e\n  I :heart: ngx-markdown\n\u003c/markdown\u003e\n```\n\n\u003e :blue_book: You can refer to this [Emoji Cheat Sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) for a complete list of _shortnames_.\n\n### Math rendering\n\n\u003e :warning: Math rendering is **optional**, and no KaTeX packages are required if you are not planning to use it. However, Angular applications using the Vite-based application builder may need to add `marked-katex-extension` to `externalDependencies` in the `build.options` section of `angular.json`:\n\u003e\n\u003e ```json\n\u003e {\n\u003e   \"externalDependencies\": [\"marked-katex-extension\"]\n\u003e }\n\u003e ```\n\nTo add [KaTeX](https://katex.org/) math rendering support to your application install the KaTeX runtime and the parser extension:\n\n```bash\nnpm install katex@^0.16.0 marked-katex-extension@^5.0.0 --save\n```\n\nApplications using the `katex` property must install both `katex` and `marked-katex-extension`.\n\nTo activate [KaTeX](https://katex.org/) math rendering you need to include the KaTeX stylesheet:\n\n```diff\n\"styles\": [\n  \"styles.css\",\n+ \"node_modules/katex/dist/katex.min.css\"\n],\n```\n\n#### KaTeX plugin\n\nUsing the `markdown` component and/or directive, you can enable KaTeX rendering with the `katex` property:\n\n```html\n\u003cmarkdown\n  katex\n  [src]=\"path/to/file.md\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Global configuration\n\nGlobal [KaTeX](https://katex.org/) options can be provided with the `KATEX_OPTIONS` injection token when configuring `provideMarkdown()`.\n\n```typescript\nprovideMarkdown({\n  katexOptions: {\n    provide: KATEX_OPTIONS,\n    useValue: {\n      displayMode: false,\n      throwOnError: false,\n    },\n  },\n}),\n```\n\n#### Component configuration\n\nOptionally, you can specify the [KaTeX options](https://katex.org/docs/options.html) at the component-level through `katexOptions` property:\n\n```typescript\nimport { KatexOptions } from 'ngx-markdown';\n\npublic options: KatexOptions = {\n  displayMode: true,\n  throwOnError: false,\n  errorColor: '#cc0000',\n  delimiters: [...],\n};\n```\n\n```html\n\u003cmarkdown\n  katex\n  [katexOptions]=\"options\"\n  [src]=\"path/to/file.md\"\u003e\n\u003c/markdown\u003e\n```\n\n\u003e :blue_book: Follow official [KaTeX options](https://katex.org/docs/options.html) documentation for more details on available options.\n\n### Diagrams tool\n\n\u003e :bell: Diagram support is **optional**, skip this step if you are not planning to use it\n\nTo add [Mermaid](https://mermaid-js.github.io/) library to your `package.json` use the following command.\n\n```bash\nnpm install mermaid@^11.0.0 --save\n```\n\nTo activate [Mermaid](https://mermaid-js.github.io/) diagramming and charting tool you will need to include...\n- Mermaid JavaScript library - `node_modules/mermaid/dist/mermaid.min.js` file\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"scripts\": [\n+ \"node_modules/mermaid/dist/mermaid.min.js\",\n]\n```\n\n#### Mermaid plugin\n\nUsing `markdown` component and/or directive, you will be able to use the `mermaid` property to activate [Mermaid](https://mermaid-js.github.io/) plugin that renders Markdown-inspired text definitions to create and modify diagrams dynamically.\n\n```html\n\u003cmarkdown\n  mermaid\n  [src]=\"path/to/file.md\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Global configuration\n\nYou can provide a global configuration for mermaid [configuration options](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-properties) to use across your application with the `mermaidOptions` when configuring `provideMarkdown`.\n\n```typescript\nprovideMarkdown({\n  mermaidOptions: {\n    provide: MERMAID_OPTIONS,\n    useValue: {\n      darkMode: true,\n      look: 'handDrawn',\n      ...\n    },\n  },\n}),\n```\n\n#### Component configuration\n\nAdditionally, you can specify mermaid [configuration options](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-properties) on component directly using `mermaidOptions` property.\n\n```typescript\nimport { MermaidAPI } from 'ngx-markdown';\n\npublic options: MermaidAPI.MermaidConfig = {\n  darkMode: true,\n  look: 'handDrawn',\n  ...\n};\n```\n\n```html\n\u003cmarkdown\n  mermaid\n  [mermaidOptions]=\"options\"\n  [src]=\"'path/to/file.md'\"\u003e\n\u003c/markdown\u003e\n```\n\n\u003e :blue_book: Follow official [Mermaid](https://mermaid-js.github.io/) documentation for more details on diagrams and charts syntax.\n\n### Copy-to-clipboard\n\n\u003e :bell: Copy-to-clipboard support is **optional**, skip this step if you are not planning to use it\n\nTo add [Clipboard](https://clipboardjs.com/) library to your `package.json` use the following command.\n\n```bash\nnpm install clipboard@^2.0.11 --save\n```\n\nTo activate [Clipboard](https://clipboardjs.com/) allowing copy-to-clipboard you will need to include...\n- Clipboard JavaScript library - `node_modules/clipboard/dist/clipboard.min.js` file\n\nIf you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...\n\n```diff\n\"scripts\": [\n+ \"node_modules/clipboard/dist/clipboard.min.js\",\n]\n```\n\n#### Clipboard plugin\n\nUsing `markdown` component and/or directive, you will be able to use the `clipboard` property to activate [Clipboard](https://clipboardjs.com/) plugin that enable copy-to-clipboard for code block from a single click.\n\n```html\n\u003cmarkdown\n  clipboard\n  [src]=\"path/to/file.md\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Default button\n\nThe `clipboard` plugin provide an unstyled default button with a default behavior out of the box if no alternative is used.\n\n#### Customize button toolbar\n\nThe clipboard button is placed inside a wrapper element that can be customize using the `.markdown-clipboard-toolbar` CSS selector in your global `styles.css/scss` file.\n\nThis allows to override the default positionning of the clipboard button and play with the visibility of the button using the `.hover` CSS selector that is applied on the toolbar when the mouse cursor enters and leaves the code block element.\n\n#### Customize default button\n\nTo customize the default button styling, use the `.markdown-clipboard-button` CSS selector in your global `styles.css/scss` file. You can also customized the \"copied\" state happening after the button is clicked using the `.copied` CSS selector.\n\n#### Using global configuration\n\nYou can provide a custom component to use globaly across your application with the `clipboardOptions` when configuring `provideMarkdown`.\n\n```typescript\nprovideMarkdown({\n  clipboardOptions: {\n    provide: CLIPBOARD_OPTIONS,\n    useValue: {\n      buttonComponent: ClipboardButtonComponent,\n    },\n  },\n})\n```\n\n#### Using a component\n\nYou can also provide your custom component using the `clipboardButtonComponent` input property when using the `clipboard` directive.\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-clipboard-button',\n  template: `\u003cbutton (click)=\"onClick()\"\u003eCopy\u003c/button\u003e`,\n})\nexport class ClipboardButtonComponent {\n  onClick() {\n    alert('Copied to clipboard!');\n  }\n}\n```\n\n```typescript\nimport { ClipboardButtonComponent } from './clipboard-button-component';\n\n@Component({ ... })\nexport class ExampleComponent {\n  readonly clipboardButton = ClipboardButtonComponent;\n}\n```\n\n```html\n\u003cmarkdown \n  clipboard \n  [clipboardButtonComponent]=\"clipboardButton\"\u003e\n\u003c/markdown\u003e\n```\n\n#### Using ng-template\n\nAlternatively, the `clipboard` directive can be used in conjonction with `ng-template` to provide a custom button implementation via the `clipboardButtonTemplate` input property on the `markdown` component.\n\n```html\n\u003cng-template #buttonTemplate\u003e\n  \u003cbutton (click)=\"onCopyToClipboard()\"\u003e...\u003c/button\u003e\n\u003c/ng-template\u003e\n\n\u003cmarkdown \n  clipboard \n  [clipboardButtonTemplate]=\"buttonTemplate\"\u003e\n\u003c/markdown\u003e\n```\n\n\u003e :blue_book: Refer to the ngx-markdown [clipboard plugin demo](https://jfcere.github.io/ngx-markdown/plugins#clipboard) for live examples.\n\n## Configuration\n\nThe ngx-markdown library can be used with standalone components. Use the `provideMarkdown` provide-function in your application configuration `ApplicationConfig` to be able to provide the `MarkdownComponent` and `MarkdownPipe` to your standalone components and/or inject the `MarkdownService`.\n\n```diff\nimport { NgModule } from '@angular/core';\n+ import { provideMarkdown } from 'ngx-markdown';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n+   provideMarkdown(),\n  ],\n};\n```\n\n### Remote file configuration\n\nIf you want to use the `[src]` attribute to directly load a remote file, in order to keep only one instance of `HttpClient` and avoid issues with interceptors, you also have to provide `HttpClient`:\n\n```diff\nproviders: [\n+  provideHttpClient(),\n+  provideMarkdown({ loader: HttpClient }),\n],\n```\n\n#### Sanitization\n\n**Sanitization is enabled by default** and uses Angular’s `DomSanitizer` with `SecurityContext.HTML` to prevent XSS vulnerabilities. It can be disabled by changing the `SecurityContext` level using the `sanitize` property when configuring `provideMarkdown`.\n\n```typescript\nimport { SecurityContext } from '@angular/core';\nimport { SANITIZE } from 'ngx-markdown';\n\n// enable default sanitization\nprovideMarkdown()\n\n// disable sanitization\nprovideMarkdown({\n  sanitize: {\n    provide: SANITIZE,\n    useValue: SecurityContext.NONE\n  },\n})\n```\n\nBecause Angular's sanitizer offers limited flexibility, you can use any external library for sanitization such as [DOMPurify](https://github.com/cure53/DOMPurify) by providing a custom sanitizer function using the `SANITIZE` provider token.\n\n```typescript\nimport DOMPurify from 'dompurify';\nimport { SANITIZE } from 'ngx-markdown';\n\n// sanitize function using an external library\nfunction sanitizeHtml(html: string): string {\n  DOMPurify.setConfig({ ... });\n  return DOMPurify.sanitize(html);\n}\n\n// provide a sanitize function\nprovideMarkdown({\n  sanitize: {\n    provide: SANITIZE,\n    useValue: sanitizeHtml,\n  },\n})\n```\n\n\u003e :blue_book: Follow [Angular DomSanitizer](https://angular.io/api/platform-browser/DomSanitizer#sanitize) documentation for more information on sanitization and security contexts.\n\nYou can bypass sanitization using the markdown component, directive or pipe using the `disableSanitizer` option as follow:\n\n```html\n\u003c!-- disable sanitizer using markdown component --\u003e\n\u003cmarkdown\n  [data]=\"markdown\"\n  [disableSanitizer]=\"true\"\u003e\n\u003c/markdown\u003e\n\n\u003c!-- disable sanitizer using markdown directive --\u003e\n\u003cdiv markdown\n  [data]=\"markdown\"\n  [disableSanitizer]=\"true\"\u003e\n\u003c/div\u003e\n\n\u003c!-- disable sanitizer using markdown pipe --\u003e\n\u003cdiv [innerHTML]=\"markdown | markdown : { disableSanitizer: true } | async\"\u003e\u003c/div\u003e\n```\n\n#### MarkedOptions\n\nOptionally, markdown parsing can be configured using [MarkedOptions](https://marked.js.org/#/USING_ADVANCED.md#options) that can be provided with the `MARKED_OPTIONS` injection token via the `markedOptions` property when configuring `provideMarkdown`.\n\n```typescript\n// imports\nimport { MARKED_OPTIONS, provideMarkdown } from 'ngx-markdown';\n\n// using default options\nprovideMarkdown(),\n\n// using specific options with ValueProvider and passing HttpClient\nprovideMarkdown({\n  markedOptions: {\n    provide: MARKED_OPTIONS,\n    useValue: {\n      gfm: true,\n      breaks: false,\n      pedantic: false,\n    },\n  },\n}),\n```\n\n#### MarkedOptions.renderer\n\n`MarkedOptions` also exposes the `renderer` property which allows you to override token rendering for your whole application.\n\nThe example uses a factory function and override the default blockquote token rendering by adding a CSS class for custom styling when using Bootstrap CSS:\n\n```typescript\nimport { Parser } from 'marked';\nimport { MARKED_OPTIONS, MarkedOptions, MarkedRenderer } from 'ngx-markdown';\n\n// function that returns `MarkedOptions` with renderer override\nexport function markedOptionsFactory(): MarkedOptions {\n  const renderer = new MarkedRenderer();\n\n  renderer.blockquote = ({ tokens }) =\u003e {\n    return '\u003cblockquote class=\"blockquote\"\u003e\u003cp\u003e' + Parser.parse(tokens) + '\u003c/p\u003e\u003c/blockquote\u003e';\n  };\n\n  return {\n    renderer: renderer,\n    gfm: true,\n    breaks: false,\n    pedantic: false,\n  };\n}\n```\n\n```typescript\n// using specific option with FactoryProvider\nprovideMarkdown({\n  markedOptions: {\n    provide: MARKED_OPTIONS,\n    useFactory: markedOptionsFactory,\n  },\n}),\n```\n\n### Marked extensions\n\nWhen configuring `provideMarkdown`, you can provide [marked extensions](https://marked.js.org/using_advanced#extensions) using the `MARKED_EXTENSION` injection token via the `markedExtensions` property, which accepts an array of providers and supports Angular dependency injection.\n\n```typescript\nimport { gfmHeadingId } from 'marked-gfm-heading-id';\n\nprovidemarkdown({\n  markedExtensions: [\n    {\n      provide: MARKED_EXTENSIONS,\n      useFactory: gfmHeadingId,\n      multi: true,\n    },\n    {\n      provide: MARKED_EXTENSIONS,\n      useFactory: myExtensionFactory,\n      deps: [SomeService],\n      multi: true,\n    },\n  ],\n}),\n```\n\n## Usage\n\n`ngx-markdown` provides different approaches to help you parse markdown to your application depending on your needs.\n\n\u003e :bulb: As of Angular 6, the template compiler strips whitespace by default. Use `ngPreserveWhitespaces` directive to preserve whitespaces such as newlines in order for the markdown-formatted content to render as intended.  \nhttps://angular.io/api/core/Component#preserveWhitespaces\n\n### Component\n\nYou can use `markdown` component to either parse static markdown directly from your HTML markup, load the content from a remote URL using `src` property or bind a variable to your component using `data` property. You can get a hook on load complete using `load` output event property, on loading error using `error` output event property or when parsing is completed using `ready` output event property.\n\n```html\n\u003c!-- static markdown --\u003e\n\u003cmarkdown ngPreserveWhitespaces\u003e\n  # Markdown\n\u003c/markdown\u003e\n\n\u003c!-- loaded from remote url --\u003e\n\u003cmarkdown\n  [src]=\"'path/to/file.md'\"\n  (load)=\"onLoad($event)\"\n  (error)=\"onError($event)\"\u003e\n\u003c/markdown\u003e\n\n\u003c!-- variable binding --\u003e\n\u003cmarkdown\n  [data]=\"markdown\"\n  (ready)=\"onReady()\"\u003e\n\u003c/markdown\u003e\n\n\u003c!-- inline parser, omitting rendering top-level paragraph --\u003e\n\u003cmarkdown\n  [data]=\"markdown\"\n  [inline]=\"true\"\u003e\n\u003c/markdown\u003e\n```\n\n### Directive\n\nThe same way the component works, you can use `markdown` directive to accomplish the same thing.\n\n```html\n\u003c!-- static markdown --\u003e\n\u003cdiv markdown ngPreserveWhitespaces\u003e\n  # Markdown\n\u003c/div\u003e\n\n\u003c!-- loaded from remote url --\u003e\n\u003cdiv markdown\n  [src]=\"'path/to/file.md'\"\n  (load)=\"onLoad($event)\"\n  (error)=\"onError($event)\"\u003e\n\u003c/div\u003e\n\n\u003c!-- variable binding --\u003e\n\u003cdiv markdown\n  [data]=\"markdown\"\n  (ready)=\"onReady()\"\u003e\n\u003c/div\u003e\n\n\u003c!-- inline parser, omitting rendering top-level paragraph --\u003e\n\u003cdiv markdown\n  [data]=\"markdown\"\n  [inline]=\"true\"\u003e\n\u003c/div\u003e\n```\n\n### Pipe\n\nUsing `markdown` pipe to transform markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes. It is important to note that, because the `marked` parsing method returns a `Promise`, it requires the use of the `async` pipe.\n\n```html\n\u003c!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content --\u003e\n\u003cdiv [innerHTML]=\"typescriptMarkdown | language : 'typescript' | markdown | async\"\u003e\u003c/div\u003e\n```\n\nThe `markdown` pipe allow you to use all the same plugins as the component by providing the options parameters.\n\n```html\n\u003c!-- provide options parameters to activate plugins or for configuration --\u003e\n\u003cdiv [innerHTML]=\"typescriptMarkdown | language : 'typescript' | markdown : { emoji: true, inline: true } | async\"\u003e\u003c/div\u003e\n```\n\nThis is the `MarkdownPipeOptions` parameters interface, those options are the same as the ones available for the `markdown` component:\n\n```typescript\nexport interface MarkdownPipeOptions {\n  decodeHtml?: boolean;\n  inline?: boolean;\n  emoji?: boolean;\n  katex?: boolean;\n  katexOptions?: KatexOptions;\n  mermaid?: boolean;\n  mermaidOptions?: MermaidAPI.MermaidConfig;\n  markedOptions?: MarkedOptions;\n  disableSanitizer?: boolean;\n}\n```\n\n### Service\n\nYou can use `MarkdownService` to have access to markdown parsing, rendering and syntax highlight methods.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { MarkdownService } from 'ngx-markdown';\n\n@Component({ ... })\nexport class ExampleComponent implements OnInit {\n  constructor(private markdownService: MarkdownService) { }\n\n  ngOnInit() {\n    // outputs: \u003cp\u003eI am using \u003cstrong\u003emarkdown\u003c/strong\u003e.\u003c/p\u003e\n    console.log(this.markdownService.parse('I am using __markdown__.'));\n  }\n}\n```\n\n## Renderer\n\nTokens can be rendered in a custom manner by either...\n- providing the `renderer` property with the `MarkedOptions` when configuring `provideMarkdown()` (see [Configuration](#markedoptionsrenderer) section)\n- using `MarkdownService` exposed `renderer`\n\nHere is an example of overriding the default heading token rendering through `MarkdownService` by adding an embedded anchor tag like on GitHub:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { Parser } from 'marked';\nimport { MarkdownService } from 'ngx-markdown';\n\n@Component({\n  selector: 'app-example',\n  template: '\u003cmarkdown\u003e# Heading\u003c/markdown\u003e',\n})\nexport class ExampleComponent implements OnInit {\n  constructor(private markdownService: MarkdownService) { }\n\n  ngOnInit() {\n    this.markdownService.renderer.heading = ({ tokens, depth }) =\u003e {\n      const text = Parser.parseInline(tokens);\n      const escapedText = text.toLowerCase().replace(/[^\\w]+/g, '-');\n      return '\u003ch' + depth + '\u003e' +\n               '\u003ca name=\"' + escapedText + '\" class=\"anchor\" href=\"#' + escapedText + '\"\u003e' +\n                 '\u003cspan class=\"header-link\"\u003e\u003c/span\u003e' +\n               '\u003c/a\u003e' + text +\n             '\u003c/h' + depth + '\u003e';\n    };\n  }\n}\n```\n\nThis code will output the following HTML:\n\n```html\n\u003ch1\u003e\n  \u003ca name=\"heading\" class=\"anchor\" href=\"#heading\"\u003e\n    \u003cspan class=\"header-link\"\u003e\u003c/span\u003e\n  \u003c/a\u003e\n  Heading\n\u003c/h1\u003e\n```\n\n\u003e :blue_book: Follow official [marked.renderer](https://marked.js.org/#/USING_PRO.md#renderer) documentation for the list of tokens that can be overriden.\n\n## Re-render Markdown\n\nIn some situations, you might need to re-render markdown after making changes. If you've updated the text this would be done automatically, however if the changes are internal to the library such as rendering options, you will need to inform the `MarkdownService` that it needs to update.\n\nTo do so, inject the `MarkdownService` and call the `reload()` function as shown below.\n\n```typescript\nimport { MarkdownService } from 'ngx-markdown';\n\nconstructor(\n  private markdownService: MarkdownService,\n) { }\n\nupdate() {\n  this.markdownService.reload();\n}\n```\n\n\u003e :blue_book: Refer to the ngx-markdown [re-render demo](https://jfcere.github.io/ngx-markdown/rerender) for a live example.\n\n## Syntax highlight\n\nWhen using static markdown you are responsible to provide the code block with related language.\n\n```diff\n\u003cmarkdown ngPreserveWhitespaces\u003e\n+  ```typescript\n    const myProp: string = 'value';\n+  ```\n\u003c/markdown\u003e\n```\n\nWhen using remote URL ngx-markdown will use the file extension to automatically resolve the code language.\n\n```html\n\u003c!-- will use html highlights --\u003e\n\u003cmarkdown [src]=\"'path/to/file.html'\"\u003e\u003c/markdown\u003e\n\n\u003c!-- will use php highlights --\u003e\n\u003cmarkdown [src]=\"'path/to/file.php'\"\u003e\u003c/markdown\u003e\n```\n\nWhen using variable binding you can optionally use `language` pipe to specify the language of the variable content (default value is markdown when pipe is not used).\n\n```html\n\u003cmarkdown [data]=\"markdown | language : 'typescript'\"\u003e\u003c/markdown\u003e\n```\n\n## Demo application\n\nA demo is available @ [https://jfcere.github.io/ngx-markdown](https://jfcere.github.io/ngx-markdown) and its source code can be found inside the `demo` directory.\n\nThe following commands will clone the repository, install npm dependencies and serve the application @ [http://localhost:4200](http://localhost:4200)\n\n```bash\ngit clone https://github.com/jfcere/ngx-markdown.git\nnpm install\nnpm start\n```\n\n## AoT compilation\n\nBuilding with AoT is part of the CI and is tested every time a commit occurs so you don't have to worry at all.\n\n## Road map\n\nHere is the list of tasks that will be done on this library in the near future ...\n\n- Add a FAQ section to the README.md\n- Improve flexibily for some options\n\n## Contribution\n\nContributions are always welcome, just make sure that ...\n\n- Your code style matches with the rest of the project\n- Unit tests pass\n- Linter passes\n\n## Support Development\n\nThe use of this library is totally free and no donation is required.\n\nAs the owner and primary maintainer of this project, I am putting a lot of time and effort beside my job, my family and my private time to bring the best support I can by answering questions, addressing issues and improving the library to provide more and more features over time.\n\nIf this project has been useful, that it helped you or your business to save precious time, don't hesitate to give it a star and to consider a donation to support its maintenance and future development.\n\n## License\n\nLicensed under [MIT](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfcere%2Fngx-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfcere%2Fngx-markdown/lists"}