stickel/angular-highlight.js

## angular-highlight.js
(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    // define(["angular", "hljs"], factory);
    module.exports = factory(require("angular"), require("highlight.js"));
  } else if (typeof module === "object" && module.exports) {
    module.exports = factory(require("angular"), require("highlight.js"));
  } else {
    root.returnExports = factory(root.angular, root.hljs);
  }
}(this, function (angular, hljs) {

## app.js
'use strict';

require('./index.html');
// Require the hljs styles
require('../node_modules/highlight.js/styles/github.css');

import routes from '../routes';

// Controllers
import { HomeCtrl } from './home/home-controller';

export default angular
  .module('app', [
      'ngRoute',
      'hljs'
  ])
  .config(routes)
  .config(function (hljsServiceProvider) {
    hljsServiceProvider.setOptions({
      tabReplace: '  '
    });
  })
  .controller('HomeCtrl', HomeCtrl);

## home.html
<h2>Home</h2>

<div hljs language="html">
  <div class="foo">this thing</div>
</div>

<div hljs language="html">
  <p>Something else</p>
</div>

## index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link href='/app.css' rel='stylesheet' type='text/css'>
</head>
<body>
  <header layout layout-align="vertical-center">
    <h1>Test Angular App</h1>
  </header>
  <div ng-view></div>

  <script src="/vendor.js"></script>
  <script src="/app.js"></script>
</body>
</html>

## vendor.js
'use strict';

require('highlight.js');
require('npm/angular');
require('npm/angular-route');
require('npm/angular-highlightjs');

## webpack.config.js
var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    // server: ['./src/server.js'],
    app: ['webpack/hot/dev-server', './src/app'],
    vendor: ['./src/vendor']
  },

  output: {
    path: './build',
    publicPath: '/',
    filename: '[name].js'
  },

  node: {
    __dirname: true,
    __filename: true
  },

  resolve: {
    root: __dirname,
    alias: {
      'npm': __dirname + '/node_modules'
    }
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css?sourceMap!autoprefixer?browsers=last 2 versions!sass?sourceMap'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'ng-annotate!babel!jshint',
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: 'html',
        exclude: /node_modules/
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name].css'),
    new HtmlPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ],

  externals: [
    'koa',
    'koa-cors',
    'koa-bodyparser'
  ],

  devtool: 'source-map'
};
	(function (root, factory) {
	if (typeof define === "function" && define.amd) {
	// define(["angular", "hljs"], factory);
	module.exports = factory(require("angular"), require("highlight.js"));
	} else if (typeof module === "object" && module.exports) {
	module.exports = factory(require("angular"), require("highlight.js"));
	} else {
	root.returnExports = factory(root.angular, root.hljs);
	}
	}(this, function (angular, hljs) {
	'use strict';

	require('./index.html');
	// Require the hljs styles
	require('../node_modules/highlight.js/styles/github.css');

	import routes from '../routes';

	// Controllers
	import { HomeCtrl } from './home/home-controller';

	export default angular
	.module('app', [
	'ngRoute',
	'hljs'
	])
	.config(routes)
	.config(function (hljsServiceProvider) {
	hljsServiceProvider.setOptions({
	tabReplace: ' '
	});
	})
	.controller('HomeCtrl', HomeCtrl);
	<h2>Home</h2>

	<div hljs language="html">
	<div class="foo">this thing</div>
	</div>

	<div hljs language="html">
	<p>Something else</p>
	</div>
	<!doctype html>
	<html lang="en" ng-app="app">
	<head>
	<base href="/">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test</title>
	<link href='/app.css' rel='stylesheet' type='text/css'>
	</head>
	<body>
	<header layout layout-align="vertical-center">
	<h1>Test Angular App</h1>
	</header>
	<div ng-view></div>

	<script src="/vendor.js"></script>
	<script src="/app.js"></script>
	</body>
	</html>
	'use strict';

	require('highlight.js');
	require('npm/angular');
	require('npm/angular-route');
	require('npm/angular-highlightjs');
	var webpack = require('webpack'),
	path = require('path'),
	ExtractTextPlugin = require('extract-text-webpack-plugin'),
	HtmlPlugin = require('html-webpack-plugin');

	module.exports = {
	entry: {
	// server: ['./src/server.js'],
	app: ['webpack/hot/dev-server', './src/app'],
	vendor: ['./src/vendor']
	},

	output: {
	path: './build',
	publicPath: '/',
	filename: '[name].js'
	},

	node: {
	__dirname: true,
	__filename: true
	},

	resolve: {
	root: __dirname,
	alias: {
	'npm': __dirname + '/node_modules'
	}
	},

	module: {
	loaders: [
	{
	test: /\.css$/,
	loader: ExtractTextPlugin.extract('css')
	},
	{
	test: /\.scss$/,
	loader: ExtractTextPlugin.extract('css?sourceMap!autoprefixer?browsers=last 2 versions!sass?sourceMap'),
	exclude: /node_modules/
	},
	{
	test: /\.js$/,
	loader: 'ng-annotate!babel!jshint',
	exclude: /node_modules/
	},
	{
	test: /\.html$/,
	loader: 'html',
	exclude: /node_modules/
	}
	]
	},

	plugins: [
	new ExtractTextPlugin('[name].css'),
	new HtmlPlugin({
	filename: 'index.html',
	template: './src/index.html'
	})
	],

	externals: [
	'koa',
	'koa-cors',
	'koa-bodyparser'
	],

	devtool: 'source-map'
	};