angular-markdown-it
Advanced tools
Angular 1.x directive for rendering markdown with markdown-it. This directive is based on @btford's markdown directive.
Pick one of these options:
git clone https://github.com/macedigital/angular-markdown-it.gitnpm install angular-markdown-itbower install angular-markdown-itYou'll need to load angular, angular-sanitize, and markdown-it in your markup like in the example below (assuming you installed via npm).
<html ng-app="myapp">
<head>
<!-- ... -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="node_modules/markdown-it/dist/markdown-it.min.js"></script>
<script src="node_modules/angular-markdown-it/dist/ng-markdownit.min.js"></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
Since release 0.5 it is possible to lazy-load the markdown-it dependency. Just make sure it is available before a markdown-it directive is first called.
If you like browserify, you could include this snippet into your entry.js file instead.
require('angular');
require('angular-sanitize');
global.markdownit = require('markdown-it');
require('angular-markdown-it');
angular.module('myapp', ['mdMarkdownIt']);
Include the markdown-it directive in your templates:
<markdown-it>
# Hey there!
*It works!*
</markdown-it>
You can also bind the markdown input to a scope variable:
<div markdown-it="markdown"></div>
<!-- Uses $scope.markdown -->
Or, you include a markdown file:
<div markdown-it ng-include="'README.md'"></div>
<!-- Uses content from README.md -->
By default, nothing has to be configured. All markdown will be rendered similar to GFM, but without HTML, typographer & autolinker features.
Nonetheless, there are two methods for changing behavior, which can be combined:
You can pass in custom options to the markdownItConverterProvider by choosing a preset, and/or custom settings calling the config() method.
angular.module('myapp', ['ngSanitize', 'mdMarkdownIt'])
.config(['markdownItConverterProvider', function(markdownItConverter) {
markdownItConverter.config('commonmark', {
breaks: true,
html: true
});
}])
In above example, we'll use CommonMark mode, render line-breaks as <br> tags, and enable HTML tags in the source.
See markdown-it presets and options for all possible variations.
Adding plugins is supported by calling the use() method.
Each plugin must be added individually, but you can use method-chaining to simplify the process. The signature of use() mimicks the way how you would add plugins to vanilla markdown-it.
angular.module('myapp', ['ngSanitize', 'mdMarkdownIt'])
.config(['markdownItConverterProvider', function(markdownItConverter) {
markdownItConverter
.use(plugin1)
.use(plugin2, opts, ...)
.use(plugin3)
;
}])
There are many markdown-it plugins available.
MIT
FAQs
Angular directive for rendering markdown with markdown-it.
The npm package angular-markdown-it receives a total of 149 weekly downloads. As such, angular-markdown-it popularity was classified as not popular.
We found that angular-markdown-it demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.