Angular-marked: Markdown Integration in AngularJS

AngularJS is a popular JavaScript framework used for building dynamic web applications. One of its key features is the ability to create custom modules, plugins, and directives that extend its functionality. In this article, we will be exploring one such module – angular-marked.

Angular-marked is an AngularJS wrapper for the popular Markdown library, marked. It allows developers to easily incorporate Markdown into their AngularJS projects, making it easier to write and display formatted text. In this article, we will take a closer look at how to use angular-marked, its various features, and why it can be a valuable addition to your development toolkit.

Usage

To get started with angular-marked, you will need to install it using bower. Simply run the following command in your project directory:

bower install Hypercubed/angular-marked

This will install both the marked library and the angular-marked module. Next, you will need to include the marked.js script into your app. By default, it should be located at bower_components/marked/lib/marked.js. Then, include the angular-marked.js file (located at bower_components/angular-marked/angular-marked.js) into your app, after the marked.js script.

Once you have included the necessary files, you can add hc.marked as a dependency to your AngularJS app. This will make the angular-marked module available for use in your project.

Set default options (optional)

Angular-marked also allows you to set default options for the marked library. This can be done by using the marked.setOptions() method. For example, if you want to enable GitHub flavored markdown, you can do so by adding the following code to your app’s configuration:

app.config(['marked', function(marked) {

  marked.setOptions({gfm: true});

}]);

This will set the gfm option to true, which enables GitHub flavored markdown in your app.

As a directive

One of the main features of angular-marked is its ability to be used as a directive. This allows you to easily incorporate Markdown into your HTML templates. To use it as a directive, simply add the <marked> tag with your Markdown content inside it. For example:

<marked>

#  Heading

  This is **bold** text.

</marked>

This will render the Markdown content as HTML, displaying a heading and bold text. You can also bind the Markdown input to a scope variable, like so:

<div marked="markdown"></div>

This will use the value of $scope.markdown as the Markdown input, allowing you to dynamically change the content being displayed.

Include a markdown file

Another useful feature of angular-marked is its ability to include external Markdown files. This can be done using the ng-include directive. For example:

<div marked ng-include="'README.md'"></div>

This will include the content from the README.md file and render it as HTML. This is particularly useful for displaying documentation or other large chunks of text in your app.

As a service

In addition to being used as a directive, angular-marked can also be used as a service. This allows you to programmatically convert Markdown to HTML within your AngularJS controllers. To use it as a service, simply inject marked into your controller and use the marked() method to convert your Markdown content. For example:

app.controller('myCtrl', ['marked', function(marked) {

  $scope.html = marked('

#  Heading');

}]);

This will set the value of $scope.html to the rendered HTML version of the Markdown input. This can be useful for situations where you need to manipulate the Markdown content before displaying it.

Testing

Angular-marked comes with a built-in testing framework using Karma. To run the tests, you will need to install Karma globally using npm:

npm install -g karma

Then, you can run the tests by executing the following command in your project directory:

karma start

This will run the tests and provide you with feedback on the functionality of angular-marked.

Why?

You may be wondering why you should use angular-marked instead of other AngularJS Markdown modules such as angular-markdown-directive. The main reason is that angular-marked uses the marked library, which is widely used and has a larger community support compared to other libraries. Additionally, angular-marked allows you to set default options for the marked library, giving you more control over how your Markdown is rendered.

Acknowledgments

Angular-marked was created by Hypercubed and is maintained by its founder, Brian Ford. It is licensed under the MIT license, making it free to use and modify in your projects.

License

Angular-marked is licensed under the MIT license. You are free to use, modify, and distribute it in your projects. However, please note that the marked library itself is licensed under the BSD 3-Clause license.

Conclusion

In conclusion, angular-marked is a valuable addition to any AngularJS developer’s toolkit. Its ability to easily incorporate Markdown into your projects, along with its various features and flexibility, make it a popular choice among developers. Whether you are building a simple blog or a complex web application, angular-marked can help you display formatted text in a clean and efficient manner. So go ahead and give it a try in your next project!