angular-highlightjs demo (feat. ngSelect)

var app = angular.module('plunker', ['ngSelect', 'hljs']);

app.config(function (hljsServiceProvider) {
	hljsServiceProvider.setOptions({
		// replace tab with 2 spaces
		tabReplace: '  '
	});
});

app.controller('MainCtrl', function($scope, $timeout) {

    // no code here!

});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.1.0" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/tomorrow.min.css" />
    <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
    <script data-require="angular.js@1.2.x" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="http://pc035860.github.io/ngSelect/ngSelect.min.js"></script>
    <script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" ng-init="tabs = ['app.js', 'index.html', 'style.css', 'tab-replace-me.js']; currentTab = tabs[0]">
    <a href="https://github.com/pc035860/angular-highlightjs">
      <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" />
    </a>
    <div class="container">
      <h3>angular-highlightjs demo         <small>(feat.           <a href="https://github.com/pc035860/ngSelect">ngSelect</a>
)</small>
      </h3>
      <ul class="nav nav-tabs" ng-select ng-model="currentTab" select-class="{'active': $optSelected}">
        <li ng-repeat="tab in tabs" ng-select-option="tab">
          <a href="">{{ tab }}</a>
        </li>
      </ul>
      <div class="tab-container">
        <div ng-repeat="tab in tabs">
          <div ng-if="tab == currentTab" hljs="" include="currentTab"></div>
        </div>
      </div>
    </div>
  </body>

</html>

.tab-container {
    padding: 5px;
    border: 1px solid #ddd;
    border-width: 0 1px 1px 1px;
}

.tab-container pre {
    /* padding: 0 .3em; */
    border: none;
    margin-bottom: 0;
    background-color: transparent;
}

.tab-container pre code {
    background: none;
    background-color: transparent;
}

.nav {
    margin-bottom: 0;
}

// This file indents with tabs.
// Highlighted code is configured to be tab-replaced with 2 spaces.

function angularInit(element, bootstrap) {
	var elements = [element],
			appElement,
			module,
			names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
			NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/;

	function append(element) {
		element && elements.push(element);
	}

	forEach(names, function(name) {
		names[name] = true;
		append(document.getElementById(name));
		name = name.replace(':', '\\:');
		if (element.querySelectorAll) {
			forEach(element.querySelectorAll('.' + name), append);
			forEach(element.querySelectorAll('.' + name + '\\:'), append);
			forEach(element.querySelectorAll('[' + name + ']'), append);
		}
	});

	forEach(elements, function(element) {
		if (!appElement) {
			var className = ' ' + element.className + ' ';
			var match = NG_APP_CLASS_REGEXP.exec(className);
			if (match) {
				appElement = element;
				module = (match[2] || '').replace(/\s+/g, ',');
			} else {
				forEach(element.attributes, function(attr) {
					if (!appElement && names[attr.name]) {
						appElement = element;
						module = attr.value;
					}
				});
			}
		}
	});
	if (appElement) {
		bootstrap(appElement, module ? [module] : []);
	}
}