diff --git a/Makefile b/Makefile
index d2649fd8bb769fa6ae33952782f7f8f4d9394214..728c22cfb5df6cc7140ca394270eb2dae0e543f6 100644
--- a/Makefile
+++ b/Makefile
@@ -6,9 +6,9 @@ setup:
 	npm install
 	mkdir -p build
 
-# watch the changes to js source code and update the target js code
+# Watch the changes to js source code and update the target js code
 watch-js: pseudocode.js $(wildcard src/*.js)
-	./node_modules/.bin/watchify $< --standalone pseudocode -o build/pseudocode.js
+	./node_modules/.bin/watchify $< --exclude katex --standalone pseudocode -o build/pseudocode.js
 
 clean:
 	rm -rf build/*
@@ -18,8 +18,11 @@ zip: build/pseudocode-js.tar.gz build/pseudocode-js.zip
 lint: pseudocode.js $(wildcard src/*.js)
 	./node_modules/.bin/jshint $^
 
+# although pseudocode.js depends on katex, pseudocode.js will not be 
+# bundled with katex, as users are likely to have katex.js loade in a separate 
+# file by browser
 build/pseudocode.js: pseudocode.js $(wildcard src/*.js)
-	./node_modules/.bin/browserify $< --standalone pseudocode -o $@
+	./node_modules/.bin/browserify $< --exclude katex --standalone pseudocode -o $@
 
 build/pseudocode.min.js: build/pseudocode.js
 	./node_modules/.bin/uglifyjs --mangle --beautify beautify=false < $< > $@
diff --git a/src/Renderer.js b/src/Renderer.js
index a718476dc54dcce02476b4eb87b17ff40c22b374..85a1eb45845cda8756f4ad56461b09539e4ad679 100644
--- a/src/Renderer.js
+++ b/src/Renderer.js
@@ -1,7 +1,9 @@
 /*
  * TODO: rename commentSymbol to commentDelimiters
 * */
-var katex = require('katex');
+/* katex package may either be defined in a separate js file loaded by browser
+ * or imported by node.js.
+* */
 var utils = require('./utils');
 
 /*
@@ -155,6 +157,7 @@ TextEnvironment.prototype.renderToHTML = function() {
             this._html.putText(text);
             break;
         case 'math':
+            if (!katex) katex = require('katex');
             var mathHTML = katex.renderToString(text);
             this._html.putSpan(mathHTML);
             break;