{"id":15608542,"url":"https://github.com/hypercubed/angular-marked","last_synced_at":"2025-04-12T22:20:37.779Z","repository":{"id":12629549,"uuid":"15300841","full_name":"Hypercubed/angular-marked","owner":"Hypercubed","description":"Markdown in AngularJS using marked.","archived":false,"fork":false,"pushed_at":"2018-01-16T22:34:50.000Z","size":1009,"stargazers_count":299,"open_issues_count":10,"forks_count":58,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-08T22:35:56.963Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hypercubed.github.io/angular-marked/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jashkenas/coffeescript","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hypercubed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-19T02:55:17.000Z","updated_at":"2024-09-09T08:21:48.000Z","dependencies_parsed_at":"2022-09-11T07:01:18.853Z","dependency_job_id":null,"html_url":"https://github.com/Hypercubed/angular-marked","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-marked","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-marked/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-marked/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hypercubed%2Fangular-marked/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hypercubed","download_url":"https://codeload.github.com/Hypercubed/angular-marked/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248638430,"owners_count":21137663,"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":[],"created_at":"2024-10-03T05:21:23.141Z","updated_at":"2025-04-12T22:20:37.745Z","avatar_url":"https://github.com/Hypercubed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-marked\r\n\r\n[![NPM version][npm-badge]][npm]\r\n[![Downloads][download-badge]][npm]\r\n![Downloads][bower-badge]\r\n\r\n[![Build Status][travis-image]][travis-url]\r\n[![Codacy Badge][codacy-badge]][Codacy]\r\n\r\n[![js-semistandard-style][standard-badge]][semistandard]\r\n[![License][license-badge]][MIT License]\r\n\r\nAngularJS Markdown using [marked](https://github.com/chjj/marked).\r\n\r\n**Please note:** neither this directive nor marked (by default) implement sanitization. As always, sanitizing is necessary for user-generated content.\r\n\r\n## Install\r\n\r\n`bower install angular-marked`\r\n\r\nor\r\n\r\n`npm install angular-marked`\r\n\r\nor\r\n\r\n`jspm install angular-marked=npm:angular-marked`\r\n\r\nDepending on your setup you may need include script tags in your html:\r\n\r\n```html\r\n\u003cscript src=\"bower_components/marked/lib/marked.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"bower_components/angular-marked/dist/angular-marked.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Usage\r\n\r\n```js\r\nvar app = angular.module('example-app', ['hc.marked']);\r\n```\r\n\r\n### Set default options (optional)\r\n\r\n```js\r\napp.config(['markedProvider', function (markedProvider) {\r\n  markedProvider.setOptions({gfm: true});\r\n}]);\r\n```\r\n\r\nExample using [highlight.js Javascript syntax highlighter](http://highlightjs.org/) (must include highlight.js script).\r\n\r\n```js\r\napp.config(['markedProvider', function (markedProvider) {\r\n  markedProvider.setOptions({\r\n    gfm: true,\r\n    tables: true,\r\n    highlight: function (code, lang) {\r\n      if (lang) {\r\n        return hljs.highlight(lang, code, true).value;\r\n      } else {\r\n        return hljs.highlightAuto(code).value;\r\n      }\r\n    }\r\n  });\r\n}]);\r\n\r\n```\r\n\r\n### Override Rendered Markdown Links\r\n\r\nExample overriding the way custom markdown links are displayed to open in new windows:\r\n\r\n```js\r\napp.config(['markedProvider', function (markedProvider) {\r\n  markedProvider.setRenderer({\r\n    link: function(href, title, text) {\r\n      return \"\u003ca href='\" + href + \"'\" + (title ? \" title='\" + title + \"'\" : '') + \" target='_blank'\u003e\" + text + \"\u003c/a\u003e\";\r\n    }\r\n  });\r\n}]);\r\n```\r\n\r\n### Use as a directive\r\n\r\n```html\r\n\u003cmarked\u003e\r\n  # Markdown directive\r\n  *It works!*  \r\n\u003c/marked\u003e\r\n```\r\n\r\nBind the markdown input to a scope variable:\r\n\r\n```html\r\n\u003cdiv marked=\"my_markdown\"\u003e\r\n\u003c/div\u003e\r\n\u003c!-- Uses $scope.my_markdown --\u003e\r\n```\r\n\r\nInclude a markdown file:\r\n\r\n```html\r\n\u003cdiv marked src=\"'README.md'\"\u003e\r\n\u003c/div\u003e\r\n\u003c!-- Uses markdown content from README.md --\u003e\r\n```\r\n\r\nOr a template (great for md that includes code blocks):\r\n\r\n```html\r\n\u003cscript type=\"text/ng-template\" id=\"tpl.md\"\u003e\r\n  ## Markdown\r\n\r\n  **Code blocks**\r\n\r\n      This is \u003cb\u003ebold\u003c/b\u003e\r\n\r\n  **Ampersands**\r\n\r\n  Star Trek \u0026 Star Wars\r\n\u003c/script\u003e\r\n\r\n\u003cdiv marked src=\"'tpl.md'\"\u003e\u003c/div\u003e\r\n\u003c!-- Uses markdown content from tpl.md --\u003e\r\n```\r\n\r\nUse ```compile``` attribute to support AngularJS directives inside markdown.\r\n\r\n```html\r\n\u003cscript type=\"text/ng-template\" id=\"tpl.md\"\u003e\r\n  ## Markdown\r\n\r\n  **This will go through $compile and will be effective**\r\n\r\n  \u003cbutton ng-click=\"doClick()\"\u003e\u003c/button\u003e\r\n\r\n\u003c/script\u003e\r\n\r\n\u003cdiv ng-controller=\"ClickHandler\"\u003e\r\n    \u003cdiv marked src=\"'tpl.md'\" compile=\"true\"\u003e\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n```javascript\r\n.controller('ClickHandler', function() {\r\n  this.doClick = function() {\r\n    ...\r\n  };\r\n})\r\n```\r\n\r\n### As a service\r\n\r\n```js\r\napp.controller('myCtrl', ['marked', function (marked) {\r\n  $scope.html = marked('#TEST');\r\n}]);\r\n```\r\n\r\n## Testing\r\n\r\nInstall npm and bower dependencies:\r\n\r\n```sh\r\nnpm install\r\nbower install\r\nnpm test\r\n```\r\n\r\n## Why?\r\n\r\nI wanted to use `marked` instead of `showdown` as used in `angular-markdown-directive` as well as expose the option to globally set defaults.  Yes, it is probably best to avoid creating a bunch of angular wrapper modules... but I use this enough across multiple projects to make it worth while for me.  Use it if you like.  Pull requests are welcome.\r\n\r\n## Acknowledgments\r\nBased on [angular-markdown-directive](https://github.com/btford/angular-markdown-directive) by [briantford](http://briantford.com/) which, in turn, is based on [this excellent tutorial](http://blog.angularjs.org/2012/05/custom-components-part-1.html) by [@johnlinquist](https://twitter.com/johnlindquist).\r\n\r\n## License\r\nCopyright (c) 2013-2015 Jayson Harshbarger\r\n\r\n[MIT License]\r\n\r\n[npm]: https://npmjs.org/package/angular-marked\r\n[bower]: https://npmjs.org/package/angular-marked\r\n[semistandard]: https://github.com/Flet/semistandard\r\n[Codacy]: https://www.codacy.com/app/hypercubed/angular-marked\r\n[MIT License]: http://en.wikipedia.org/wiki/MIT_License\r\n[travis-url]: https://travis-ci.org/Hypercubed/angular-marked\r\n\r\n[travis-image]: https://img.shields.io/travis/Hypercubed/angular-marked.svg\r\n[npm-badge]: https://img.shields.io/npm/v/angular-marked.svg\r\n[bower-badge]: https://img.shields.io/bower/v/angular-marked.svg\r\n[standard-badge]: https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg\r\n[download-badge]: http://img.shields.io/npm/dm/angular-marked.svg\r\n[codacy-badge]: https://api.codacy.com/project/badge/grade/eef9605446ce4555bebb1c55f7b93e2b\r\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypercubed%2Fangular-marked","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypercubed%2Fangular-marked","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypercubed%2Fangular-marked/lists"}