├── README.md ├── package.json ├── LICENSE ├── colocodo.css ├── index.html └── colocodo.js /README.md: -------------------------------------------------------------------------------- 1 | Color `````` 2 | ======== 3 | 4 | A WIP for colorizing syntax code per language. 5 | 6 | Orginally forked from [switer/colocodo](https://github.com/switer/colocodo) 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "colocodo", 3 | "version": "1.0.0", 4 | "description": "Syntax highlight for command, html, javascript,css.", 5 | "main": "colocodo.js", 6 | "scripts": { 7 | "test": "node test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/switer/colocodo.git" 12 | }, 13 | "keywords": [ 14 | "syntax", 15 | "highlight", 16 | "javascript", 17 | "css", 18 | "html", 19 | "bash" 20 | ], 21 | "author": "switer", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/switer/colocodo/issues" 25 | }, 26 | "homepage": "https://github.com/switer/colocodo" 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 guankaishe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /colocodo.css: -------------------------------------------------------------------------------- 1 | code {font-family: Consolas, 'Liberation Mono', Courier, monospace;color: #534C4C; 2 | padding: 10px 30px;border-left: 3px solid #1f8dd6;background: rgb(245, 251, 253); 3 | margin: auto;vertical-align: top;display: block;line-height: 40px;} 4 | 5 | /**** html ****/ 6 | .tag {color: #1f8dd6;} 7 | .string {color: rgb(102, 102, 102);} 8 | .attr {color: rgb(255, 130, 47);} 9 | .tagname {color: rgb(102, 102, 102);} 10 | .tagclose {color: rgb(103, 246, 36);} 11 | .inspid {color: blue;} 12 | .equal {color: #1f8dd6;} 13 | .comment {color: #ccc;} 14 | .comment span {color: #ccc!important;} 15 | 16 | /**** bash ****/ 17 | .sh {color: #1f8dd6} 18 | .cmdComment {color: #ccc;} 19 | .cmdComment span {color: #ccc;} 20 | 21 | 22 | /**** css ****/ 23 | .selector {color: rgb(255, 130, 47);} 24 | .property {color: #1f8dd6;} 25 | .cssString {color: rgb(103, 246, 36);} 26 | .cssComment {color: #ccc;} 27 | .number {color: blue;} 28 | .unit {color: red;} 29 | 30 | /**** javascript ****/ 31 | .jsString {color: rgb(103, 246, 36);} 32 | .jsString span {color: rgb(103, 246, 36);} 33 | .operation {color: red;} 34 | .var, .function, .keyword{color:#1f8dd6;} 35 | .jsComment {color: #ccc!important;} 36 | .jsComment span {color: #ccc!important;} 37 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Colocodo 6 | 7 | 8 | 9 | 25 | 30 | 38 | 39 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /colocodo.js: -------------------------------------------------------------------------------- 1 | !(function (exports) { 2 | /** 3 | * Line intent formater 4 | **/ 5 | function lineIntent (codeStr) { 6 | var lines = codeStr.split(/\n/), 7 | fmLines = [], 8 | intentMinLength; 9 | 10 | // get min intent 11 | lines.forEach(function (line, index) { 12 | if (!index && !line.trim()) return; 13 | var intents = line.match(/^\s*/)[0]; 14 | if (intentMinLength == undefined || (intents.length < intentMinLength && line.trim()) ) { 15 | intentMinLength = intents.length; 16 | } 17 | fmLines.push(line); 18 | }); 19 | // default to 0 20 | intentMinLength = intentMinLength || 0; 21 | // replace intent and replace space of   22 | var regexp = new RegExp('^\\s{0,@}'.replace('@', intentMinLength), 'g'); 23 | // use white space intent 24 | fmLines.forEach(function (line, index) { 25 | line = line.replace(regexp, ''); 26 | var intents = line.match(/^\s*/)[0]; 27 | intents = intents.replace(/\s/g, ' '); 28 | fmLines[index] = line.replace(/^\s*/, intents) 29 | 30 | }); 31 | 32 | return fmLines.join('
'); 33 | } 34 | /** 35 | * HTML syntax render 36 | **/ 37 | function renderHTML (codeStr) { 38 | var code = codeStr.replace(//g, '>') 40 | .replace(/"/g, '"') 41 | .replace(/'/g, ''') 42 | .replace(/(\s)([a-zA-Z\-]+?)\=/g, '$1$2=') 43 | .replace(/<!--([\s\S]*?)-->/g, '<!--$1-->') 44 | .replace(/\="(.+?)"/g, '="$1"') 45 | .replace(/<([a-zA-Z\-]+?)(\s)/g, '<$1$2') 46 | .replace(/\/([a-zA-Z\-]+?)>/g, '/$1>') 47 | .replace(/</g, '<') 48 | .replace(/>/g, '>') 49 | 50 | 51 | return lineIntent(code); 52 | } 53 | /** 54 | * command syntax render 55 | **/ 56 | function renderCommand (codeStr) { 57 | var code = codeStr.replace(/\n(\s*)([a-zA-Z\-]+)(?=\s|$)/g, '\n$1$2') 58 | .replace(/##([^\r\n]*)/g, '##$1') 59 | return lineIntent(code); 60 | } 61 | /** 62 | * HTML syntax render 63 | **/ 64 | function renderCss (codeStr) { 65 | var code = codeStr.replace(//g, '>') 67 | .replace(/"/g, '"') 68 | .replace(/'/g, ''') 69 | .replace(/("|')(.*?)("|')/g, '$1$2$3') 70 | .replace(/\/\*([\s\S]*?)\*\//g, '/*$1*/') 71 | .replace(/(\n|\})(\s*)([^{}\/\*]+)(?=\{)/g, '$1$2$3') 72 | .replace(/(\{|\;)(\s*)([a-zA-Z0-9\-]+)(?=\s*\:)/g, '$1$2$3') 73 | .replace(/\b(\d+?)(px|em|\%)/g, '$1$2') 74 | 75 | return lineIntent(code); 76 | } 77 | /** 78 | * HTML syntax render 79 | **/ 80 | function renderJs (codeStr) { 81 | var code = codeStr.replace(//g, '>') 83 | .replace(/"/g, '"') 84 | .replace(/'/g, ''') 85 | .replace(/\/\*([\s\S]*?)\*\//g, '/*$1*/') 86 | .replace(/([\+\-\^\~\!\%\|])/g, '$1') 87 | .replace(/"(.*?)"/g, '"$1"') 88 | .replace(/'(.*?)'/g, ''$1'') 89 | .replace( 90 | /(\b|\W|\s)(var|function|prototype|Array|String|Number|Boolean|Object|undefined|window|document|null|NaN)(\W|\b|\s)/gm, 91 | '$1$2$3' 92 | ) 93 | .replace( 94 | /\.(log|call|apply|childNodes|appendChild|removeChild|body)(?=\b|\.)/g, 95 | '.$1' 96 | ) 97 | .replace(/([\[\]\{\}\(\)])/g, '$1') 98 | .replace(/\/\/([^\r\n]*)/g, '//$1') 99 | 100 | return lineIntent(code); 101 | } 102 | function renderDefault (codeStr) { 103 | var code = codeStr.replace(//g, '>') 105 | .replace(/"/g, '"') 106 | .replace(/'/g, ''') 107 | 108 | return lineIntent(code); 109 | } 110 | /** 111 | * syntax detection method, currently only support html and css detecting 112 | **/ 113 | function syntaxDetect (codeStr) { 114 | if (codeStr.match(/^\s*\\s*$/)) return 'html'; 115 | else if (codeStr.replace(/^\s*?\/\*.*?\*\/\s*?/mg, '') 116 | .match(/^\s*?([a-zA-Z0-9\-\_\,\#\.\s]+?)(?=(\:[a-zA-Z\-]+|\s*)\{(.*?)\})/)) return 'css'; 117 | else return 'js'; 118 | } 119 | 120 | var Colo = { 121 | render: function (type, codeStr) { 122 | var args = Array.prototype.slice.call(arguments); 123 | 124 | if (args.length == 1) { 125 | // use syntaxt detection for auto type 126 | codeStr = type; 127 | type = syntaxDetect(codeStr); 128 | } 129 | 130 | switch (type) { 131 | case 'js': return renderJs(codeStr);break; 132 | case 'css': return renderCss(codeStr);break; 133 | case 'html': return renderHTML(codeStr);break; 134 | case 'command': return renderCommand(codeStr);break; 135 | default: return renderDefault(codeStr); 136 | } 137 | } 138 | } 139 | /** 140 | * Rendering Colo template-elements 141 | **/ 142 | document.addEventListener('DOMContentLoaded', function () { 143 | var codeElements = Array.prototype.slice.call(document.querySelectorAll('[type|="text/colo"]') || []); 144 | codeElements.forEach(function (element) { 145 | var type = element.getAttribute('type'), 146 | $parent = element.parentNode, 147 | $code = document.createElement('code'), 148 | args = [], 149 | attributes = Array.prototype.slice.call(element.attributes || []); 150 | 151 | type = type.replace(/text\/colo[\-]*/, ''); 152 | if (type) { 153 | args.push(type); 154 | } 155 | attributes.forEach(function (attr) { 156 | $code.setAttribute(attr.nodeName, attr.nodeValue); 157 | }); 158 | args.push(element.innerHTML); 159 | $code.innerHTML = Colo.render.apply(Colo, args); 160 | $parent.replaceChild($code, element); 161 | }); 162 | 163 | }); 164 | 165 | exports.Colo = Colo; 166 | })(this); 167 | 168 | 169 | --------------------------------------------------------------------------------