Angularjs Markdown Modules

Install markdown angular-marked and highlight.js

Install modules:

bower install --save  highlightjs
bower install --save  angular-marked

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- build:css(client) app/vendor.css -->
      <!-- bower:css -->
      <link rel="stylesheet" href="bower_components/highlightjs/styles/default.css" />
        . . .
      <!-- endbower -->
    <!-- endbuild -->
 . . .
  </head>
  <body ng-app="smartPlugApp">
    <!-- build:js({client,node_modules}) app/vendor.js -->
      <!-- bower:js -->
      <script src="bower_components/highlightjs/highlight.pack.js"></script>
      <script src="bower_components/marked/lib/marked.js"></script>
      <script src="bower_components/angular-marked/dist/angular-marked.js"></script>
   . . .
</body>
</html>

Angularjs:

[app.js]
var app = angular.module('exampleApp', ['hc.marked']);

app.config(['markedProvider', function (markedProvider) {
  markedProvider.setOptions({
    gfm: true,
    tables: true,
    highlight: function (code, lang) {
      if (lang) {
        return hljs.highlight(lang, code, true).value;
      } else {
        return hljs.highlightAuto(code).value;
      }
    }
  });
}]);

[/js]

Detail: https://github.com/Hypercubed/angular-marked

Leave a Reply