Example for using angular-highlightjs with browserify. #39

pc035860 · Feb 3, 2015 · dcf5c95 · dcf5c95
1 parent b3b79bb
commit dcf5c95
Show file tree

Hide file tree

Showing 6 changed files with 813 additions and 0 deletions.
diff --git a/with-browserify/index.html b/with-browserify/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html ng-app="exampleApp">
+
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON pretty print with AngularJS</title>
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/tomorrow.min.css">
+    <link rel="stylesheet" href="style.css" />
+
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
+
+    <script src="scripts/bundle.js"></script>    
+  </head>
+
+  <body ng-controller="MainCtrl">
+    <div class="container">
+      <h3>JSON pretty print with AngularJS &nbsp;<small>powered by <a href="https://github.com/pc035860/angular-highlightjs" target="_blank">angular-highlightjs</a></small></h3>
+      <div class="row">
+        <div class="col-sm-6 col-12">
+          <h4 class="taller">JSON or Object expression</h4>
+          <div>
+            <textarea class="form-control" ng-model="editObject"></textarea>
+          </div>
+        </div>
+        <div class="col-sm-6 col-12">
+          <h4>
+            Pretty print &nbsp; &nbsp;
+            <span class="text-muted">tab width: <input type="text" class="form-control" ng-model="tabWidth" maxlength="1" /></span>
+          </h4>
+          <div hljs source="toPrettyJSON(editObject, tabWidth)"></div>
+        </div>
+      </div>
+
+    </div>
+
+  </body>
+
+</html>
diff --git a/with-browserify/package.json b/with-browserify/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "with-browserify",
+  "version": "0.0.0",
+  "description": "",
+  "main": "./scripts/app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "browserify . -d -o scripts/bundle.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "angular": "^1.3.11",
+    "angular-highlightjs": "^0.4.0",
+    "browserify-shim": "^3.8.2"
+  },
+
+  "browserify": {
+    "transform": [ "browserify-shim" ]
+  },
+  "browser": {
+	"angular": "./node_modules/angular/angular.min.js"
+  },
+  "browserify-shim": {
+  	"angular": "angular"
+  }
+}
diff --git a/with-browserify/scripts/app.js b/with-browserify/scripts/app.js
@@ -0,0 +1,7 @@
+var angular = require('angular');
+
+angular
+.module('exampleApp', [
+  require('angular-highlightjs')
+])
+.controller('MainCtrl', require('./main-ctrl'));