Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Changed from syntaxhightlighter 3 to hijs, much better!

  • Loading branch information...
commit abf35e8397c4d2592aa63d43b054d61263195b7d 1 parent c94316b
@javve authored
Showing with 212 additions and 104 deletions.
  1. +29 −7 website/css/style.css
  2. +90 −97 website/index.html
  3. +93 −0 website/js/libs/hijs.js
View
36 website/css/style.css
@@ -100,11 +100,6 @@ p {
font-size:12px;
line-height:1.3;
}
-code {
- color:#fff;
- background-color:rgba(255,255,255,0.05);
- border-radius:3px;
-}
h2 {
font-size:18px;
color:#bbb;
@@ -250,7 +245,7 @@ td {
background-color:rgba(0,0,0,.2);
border:solid 1px rgba(255,255,255,.15);
border-radius:10px;
- padding:20px;
+ padding:20px 20px 0;
margin-bottom:50px;
font-size:14px;
}
@@ -539,4 +534,31 @@ h1 {
}
.paging li a:hover {
color:#eee;
-}
+}
+
+
+/* * * * * * * * * * * * * * * * * * * * *
+* Syntax coloring
+* * * * * * * * * * * * * * * * * * * * */
+
+pre {
+ border-top:solid 1px rgba(255, 255, 255, .15);
+ border-bottom:solid 1px rgba(255, 255, 255, .15);
+ background-color:rgba(0, 0, 0, .2);
+ padding:0 20px 10px;
+ margin:0 -20px 20px;
+ line-height:1.5;
+}
+
+pre, code {
+ font-family: 'monaco', sans-serif;
+ font-size: 12px;
+}
+
+pre .keyword { color: #FF0C4B; }
+pre .string { color: #01DBFF; }
+pre .regexp { color: #15E80B; }
+pre .class { color: #15E80B; font-weight: bold; }
+pre .special { color: #FFD901; }
+pre .number { color: #01DBFF; }
+pre .comment { color: grey; font-style: italic; }
View
187 website/index.html
@@ -13,8 +13,7 @@
<meta name="description" content="You do want a 3 KB native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yes?">
<meta name="author" content="Jonny Strömberg">
<meta name="google-site-verification" content="CxtqsFWhMxG32DK5A7Hbtg1ficvqhu9sybSeDP25JpI" />
-
-
+
<!--
Nothing to see here that has to do with List.js, look at the bottom of the page!
@@ -24,8 +23,6 @@
<link rel="shortcut icon" href="/images/graphics/favicon.ico">
<link rel="stylesheet" href="css/style.css">
- <link href="js/libs/syntaxhighlighter_3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
- <link href="js/libs/syntaxhighlighter_3.0.83/styles/shThemeListJs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
@@ -144,56 +141,56 @@ <h2 class="look"><strong>Look here!</strong> This is an example of what List.js
<div class="code">
<h3>HTML</h3>
- <script type="syntaxhighlighter" class="brush: js"><![CDATA[
- &lt;div id="example-list">
- <input class="search" />
- <span class="sort" data-sort="feature">Sort features</span>
- <ul class="list">
- <li>
- <span class="feature">Search</span>
- <small class="description">Search through all items.</small>
- </li>
- <li>
- <span class="feature">Sort</span>
- <small class="description">Sort lists by value that
- you choose.</small>
- </li>
- <li>
- <span class="feature">Filter</span>
- <small class="description">
- Write your own filter functions.
- </small>
- </li>
- <li>
- <span class="feature">Add</span>
- <small class="description">Add items on the fly.</small>
- </li>
- <li>
- <span class="feature">Get</span>
- <small class="description">Get item based on value.</small>
- </li>
- <li>
- <span class="feature">Update</span>
- <small class="description">Update items as you go.</small>
- </li>
- <li>
- <span class="feature">Remove</span>
- <small class="description">
- Remove items whenever you feel like.
- </small>
- </li>
- </ul>
- &lt;/div>
- ]]></script>
+<pre><code>
+&lt;div id="example-list">
+ &lt;input class="search" />
+ &lt;span class="sort" data-sort="feature">Sort features&lt;/span>
+ &lt;ul class="list">
+ &lt;li>
+ &lt;span class="feature">Search&lt;/span>
+ &lt;small class="description">Search through all items.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Sort&lt;/span>
+ &lt;small class="description">Sort lists by value that
+ you choose.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Filter&lt;/span>
+ &lt;small class="description">
+ Write your own filter functions.
+ &lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Add&lt;/span>
+ &lt;small class="description">Add items on the fly.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Get&lt;/span>
+ &lt;small class="description">Get item based on value.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Update&lt;/span>
+ &lt;small class="description">Update items as you go.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Remove&lt;/span>
+ &lt;small class="description">
+ Remove items whenever you feel like.
+ &lt;/small>
+ &lt;/li>
+ &lt;/ul>
+&lt;/div>
+</code></pre>
<h3>JavaScript</h3>
- <script type="syntaxhighlighter" class="brush: js"><![CDATA[
- var options = {
- valueNames: [ 'feature', 'description' ]
- };
+<pre><code>
+var options = {
+ valueNames: [ 'feature', 'description' ]
+};
- var featureList = new List('example-list', options);
- ]]></script>
+var featureList = new List('example-list', options);
+</code></pre>
</div>
</div>
</div>
@@ -206,49 +203,49 @@ <h2 class="look"><strong>Look here!</strong> This is an example of what List.js
<div class="code">
<h3>HTML</h3>
- <script type="syntaxhighlighter" class="brush: js"><![CDATA[
- &lt;div id="example-list">
- <input class="search" />
- <span class="sort" data-sort="feature">Sort features</span>
- <ul class="list">
- <li>
- <span class="feature">Search</span>
- <small class="description">Search through all items.</small>
- </li>
- <li>
- <span class="feature">Sort</span>
- <small class="description">Sort lists by value that
- you choose.</small>
- </li>
- <li>
- <span class="feature">Filter</span>
- <small class="description">Write your own filter functions.</small>
- </li>
- </ul>
- &lt;/div>
- ]]></script>
+<pre><code>
+&lt;div id="example-list">
+ &lt;input class="search" />
+ &lt;span class="sort" data-sort="feature">Sort features&lt;/span>
+ &lt;ul class="list">
+ &lt;li>
+ &lt;span class="feature">Search&lt;/span>
+ &lt;small class="description">Search through all items.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Sort&lt;/span>
+ &lt;small class="description">Sort lists by value that
+ you choose.&lt;/small>
+ &lt;/li>
+ &lt;li>
+ &lt;span class="feature">Filter&lt;/span>
+ &lt;small class="description">Write your own filter functions.&lt;/small>
+ &lt;/li>
+ &lt;/ul>
+&lt;/div>
+</code></pre>
<h3>JavaScript</h3>
- <script type="syntaxhighlighter" class="brush: js"><![CDATA[
- var options = {
- valueNames: [ 'feature', 'description' ]
- };
-
- var values = [
- { feature: 'Add', description:'Add items on the fly.' }
- , { feature: 'Get', description:'Get item based on value.' }
- , { feature: 'Update', description:'Update items as you go.' }
- ];
-
- var featureList = new List('example-list', options, values);
-
- var newFeature = {
- feature: 'Remove'
- , description:'Remove items whenever you feel like.'
- };
-
- featureList.add(newFeature);
- ]]></script>
+<pre><code>
+var options = {
+ valueNames: [ 'feature', 'description' ]
+};
+
+var values = [
+ { feature: 'Add', description:'Add items on the fly.' }
+ , { feature: 'Get', description:'Get item based on value.' }
+ , { feature: 'Update', description:'Update items as you go.' }
+];
+
+var featureList = new List('example-list', options, values);
+
+var newFeature = {
+ feature: 'Remove'
+ , description:'Remove items whenever you feel like.'
+};
+
+featureList.add(newFeature);
+</code></pre>
</div>
</div>
</div>
@@ -275,10 +272,6 @@ <h2 class="look"><strong>Look here!</strong> This is an example of what List.js
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=javve"></script>
- <script type="text/javascript" src="js/libs/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
- <script type="text/javascript" src="js/libs/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
- <script type="text/javascript">
- SyntaxHighlighter.all()
- </script>
+ <script type="text/javascript" src="js/libs/hijs.js"></script>
</body>
</html>
View
93 website/js/libs/hijs.js
@@ -0,0 +1,93 @@
+(function (hijs) {
+//
+// hijs - JavaScript Syntax Highlighter
+//
+// Copyright (c) 2010 Alexis Sellier
+//
+
+// All elements which match this will be syntax highlighted.
+var selector = hijs || 'code';
+
+var keywords = ('var function if else for while break switch case do new null in with void '
+ +'continue delete return this true false throw catch typeof with instanceof').split(' '),
+ special = ('eval window document undefined NaN Infinity parseInt parseFloat '
+ +'encodeURI decodeURI encodeURIComponent decodeURIComponent').split(' ');
+
+// Syntax definition
+// The key becomes the class name of the <span>
+// around the matched block of code.
+var syntax = [
+ ['comment', /(\/\*(?:[^*\n]|\*+[^\/*])*\*+\/)/g],
+ ['comment', /(\/\/[^\n]*)/g],
+ ['string' , /("(?:(?!")[^\\\n]|\\.)*"|'(?:(?!')[^\\\n]|\\.)*')/g],
+ ['regexp' , /(\/.+\/[mgi]*)(?!\s*\w)/g],
+ ['class' , /\b([A-Z][a-zA-Z]+)\b/g],
+ ['number' , /\b([0-9]+(?:\.[0-9]+)?)\b/g],
+ ['keyword', new(RegExp)('\\b(' + keywords.join('|') + ')\\b', 'g')],
+ ['special', new(RegExp)('\\b(' + special.join('|') + ')\\b', 'g')]
+];
+var nodes, table = {};
+
+if (/^[a-z]+$/.test(selector)) {
+ nodes = document.getElementsByTagName(selector);
+} else if (/^\.[\w-]+$/.test(selector)) {
+ nodes = document.getElementsByClassName(selector.slice(1));
+} else if (document.querySelectorAll) {
+ nodes = document.querySelectorAll(selector);
+} else {
+ nodes = [];
+}
+
+for (var i = 0, children; i < nodes.length; i++) {
+ children = nodes[i].childNodes;
+
+ for (var j = 0, str; j < children.length; j++) {
+ code = children[j];
+
+ if (code.length >= 0) { // It's a text node
+ // Don't highlight command-line snippets
+ if (! /^\$\s/.test(code.nodeValue.trim())) {
+ syntax.forEach(function (s) {
+ var k = s[0], v = s[1];
+ code.nodeValue = code.nodeValue.replace(v, function (_, m) {
+ return '\u00ab' + encode(k) + '\u00b7'
+ + encode(m) +
+ '\u00b7' + encode(k) + '\u00bb';
+ });
+ });
+ }
+ }
+ }
+}
+for (var i = 0; i < nodes.length; i++) {
+ nodes[i].innerHTML =
+ nodes[i].innerHTML.replace(/\u00ab(.+?)\u00b7(.+?)\u00b7\1\u00bb/g, function (_, name, value) {
+ value = value.replace(/\u00ab[^\u00b7]+\u00b7/g, '').replace(/\u00b7[^\u00bb]+\u00bb/g, '');
+ return '<span class="' + decode(name) + '">' + escape(decode(value)) + '</span>';
+ });
+}
+
+function escape(str) {
+ return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// Encode ASCII characters to, and from Braille
+function encode (str, encoded) {
+ table[encoded = str.split('').map(function (s) {
+ if (s.charCodeAt(0) > 127) { return s }
+ return String.fromCharCode(s.charCodeAt(0) + 0x2800);
+ }).join('')] = str;
+ return encoded;
+}
+function decode (str) {
+ if (str in table) {
+ return table[str];
+ } else {
+ return str.trim().split('').map(function (s) {
+ if (s.charCodeAt(0) - 0x2800 > 127) { return s }
+ return String.fromCharCode(s.charCodeAt(0) - 0x2800);
+ }).join('');
+ }
+}
+
+})(window.hijs);
Please sign in to comment.
Something went wrong with that request. Please try again.