Markdown has debued its initial release in 2004 with the goal of creating an easy-to-read, easy-to-write plain text syntax that could be converted to valid HTML. Recently, markdown's popularity has soared and has become a standard for everything from blocks to the holy Stack Overflow itself. Here is a quick and easy way to get markdown up and running with the added plus of highlightjs for those purty color schemes we can't live without.

Before I say anything else, here is a plunk I found to get your feet wet:

https://plnkr.co/edit/3ECSANT7FXeRRfr6It4z?p=preview

Setup

Lets take a quick look at package requirements you will need to specify. For our angular project, we specify angular-marked, highlightjs, and marked. Here is a quick breakdown of what each library does:

• marked - Marked is a javascript library that reads raw text and converts it to HTML per the markdown standard.
• angular-marked - Utilizes marked to create a custom directive to make it very simple to get up and running with markdown in Angular.
• highlightjs - Applies a color scheme to code and pre tags within HTML.

I used package.json to install all of my dependencies. Here is what you will need for the boilerplate project.

{
  "dependencies": {
    "angular": "^1.5.5",
    "angular-marked": "^1.2.1",
    "highlight.js": "isagalaev/highlight.js",
    "marked": "^0.3.5",
  }

}

Note that highlight.js is a little different. If you tried to install highlight with

npm install highlight.js --save

you will grind your teeth in frustraition wondering why highlight isn't doing anything. Once you realize its because you have to build something, you will grind what's left of your teeth wondering what everyone is talking about online about some tools dir.

Highlight requires a building process post-download with npm to build the files that will actually be used included in your HTML file. Unfortunately, if you download the obvious npm install highlight.js, the tools dir will be missing from the downloaded package. Why? Because that would be to easy. Instead, download highlightjs from

npm install isagalaev/highlight.js --save

to get the tools dir inside of highlight.js and all of its glory. Now all that is left is to build the distribution files and we're on our way.

Navigate to directory

cd node_modules/highlight.js/

install local dependencies for highlight (I told you this wouldn't be easy!)

npm install

and build the files

node ./tools/build.js :common

Note that this will build the files to include the top 20 or so languages, you can choose to do them all or list them explicity. For more information checkout out highlight's page.

Here is an elegant solution to automate this a bit:

{
  "devDependencies": {
    "highlight.js":   "isagalaev/highlight.js"
  },
  "scripts": {
    "postinstall": "cd ./node_modules/highlight.js && npm i && node ./tools/build.js :common"
  }
}

The postinstall will navigate to the directory, then install the packages, and then build the files, as we have manually done above.