#441 add initial version of styles for JS highlighting

demo_docs/source/code_examples.rst

@@ -0,0 +1,50 @@
+Code examples
+============
+
+JavaScript
+----------
+
+.. code-block:: js
+
+  /*comment*/
+  // comment
+  /*
+   * comment
+  */
+  const test = /\w+/
+  const defg = 'defg'
+  const testObject = {
+    object: 'test',
+    object2: 'test2',
+    defg
+  }
+  const testArray = [...testObject]
+  ['array', "array"]
+  let arrowFunction = x => x * 2
+  var data = new Date()
+  const that = this
+  let testTemplateString = `abc${defg}`
+  export default that
+
+  $(document).ready(function() {
+  	$(document).keyup(function(event) {
+  		var activeElementType = document.activeElement.tagName;
+  		// don't navigate when in search box or textarea
+  		if (activeElementType !== 'TEXTAREA' && activeElementType !== 'INPUT' && activeElementType !== 'SELECT') {
+  			switch (event.keyCode) {
+  				case 37: // left
+  					var prevHref = $('link[rel="prev"]').prop('href');
+  					if (prevHref) {
+  						window.location.href = prevHref;
+  						return false;
+  					}
+  				case 39: // right
+  					var nextHref = $('link[rel="next"]').prop('href');
+  					if (nextHref) {
+  						window.location.href = nextHref;
+  						return false;
+  					}
+  			}
+  		}
+  	});
+  });

demo_docs/source/index.rst

@@ -19,6 +19,7 @@ Contents
     demo
     lists_tables
     api
+    code_examples
 
 .. toctree::
     :maxdepth: 3

sass/_theme_js_highlight.sass

@@ -0,0 +1,33 @@
+.highlight-js
+  //pre
+    background-color: #282c34
+  // keywords: var, let, (const: if fixed in Pygments)
+  span.kd
+    color: #c678dd
+  // keywords: export, (const: if not fixed in Pygments)
+  span.kr
+    color: #c678dd
+  // names
+  // span.nx
+    color: #61afef
+  // operators (missing: arrows =>)
+  span.o
+    color: #56b6c2
+  // strings: single quote, double quote, template
+  span.s1, span.s2, span.sb
+    color: #98c379
+  // numbers
+  span.mi
+    color: #d19a66
+  // brackets/parenthesis
+  span.p
+    color: #abb2bf
+  // keywords: new, this, default, switch, case...
+  span.k
+    color: #e06c75
+  // boolean
+  span.kc
+    color: #d19a66
+  // global variable: window
+  span.nb
+    color: #e06c75

sass/theme.sass

@@ -49,6 +49,7 @@
 @import theme_layout
 @import theme_badge
 @import theme_rst
+@import theme_js_highlight
 @import theme_mathjax
 @import theme_font_awesome_compatibility
 @import theme_font_local