Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

html classes for css styling #39

Closed
wants to merge 5 commits into from

3 participants

@buschtoens

New mode is called browser-css.

@Marak
Owner

Do you have the .css file you are using? Seems like it would be useful to check that into the repo as well.

@buschtoens

Where do you want that file? Main directory? How shall I name it?

@buschtoens

I'll just include it in the example.html and name it example.css.

@buschtoens

(@Marak It's included... you can hit merge)

@dcodeIO

A fix for this issue has been incorporated into https://npmjs.org/package/colour

@Marak Marak closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 5, 2013
  1. @buschtoens

    Add browser-css mode

    buschtoens authored
  2. @buschtoens

    Add browser-css test

    buschtoens authored
  3. @buschtoens

    Clean up test

    buschtoens authored
  4. @buschtoens

    Add example.css

    buschtoens authored
  5. @buschtoens
This page is out of date. Refresh to see the latest.
Showing with 77 additions and 2 deletions.
  1. +21 −1 colors.js
  2. +25 −0 example.css
  3. +14 −0 example.html
  4. +17 −1 test.js
View
22 colors.js
@@ -99,10 +99,30 @@ function stylize(str, style) {
'red' : ['<span style="color:red;">', '</span>'],
'yellow' : ['<span style="color:yellow;">', '</span>']
};
+ } else if (exports.mode === 'browser-css') {
+ styles = {
+ //styles
+ 'bold' : ['<span class="ansi-escape ansi-escape-bold">', '</span>'],
+ 'italic' : ['<span class="ansi-escape ansi-escape-italic">', '</span>'],
+ 'underline' : ['<span class="ansi-escape ansi-escape-underline">', '</span>'],
+ 'inverse' : ['<span class="ansi-escape ansi-escape-inverse">', '</span>'],
+ 'strikethrough' : ['<span class="ansi-escape ansi-escape-strikethrough">', '</span>'],
+ //grayscale
+ 'white' : ['<span class="ansi-escape ansi-escape-white">', '</span>'],
+ 'grey' : ['<span class="ansi-escape ansi-escape-grey">', '</span>'],
+ 'black' : ['<span class="ansi-escape ansi-escape-black">', '</span>'],
+ //colors
+ 'blue' : ['<span class="ansi-escape ansi-escape-blue">', '</span>'],
+ 'cyan' : ['<span class="ansi-escape ansi-escape-cyan">', '</span>'],
+ 'green' : ['<span class="ansi-escape ansi-escape-green">', '</span>'],
+ 'magenta' : ['<span class="ansi-escape ansi-escape-magenta">', '</span>'],
+ 'red' : ['<span class="ansi-escape ansi-escape-red">', '</span>'],
+ 'yellow' : ['<span class="ansi-escape ansi-escape-yellow">', '</span>']
+ };
} else if (exports.mode === 'none') {
return str+'';
} else {
- console.log('unsupported mode, try "browser", "console" or "none"');
+ console.log('unsupported mode, try "browser", "browser-css", "console" or "none"');
}
return styles[style][0] + str + styles[style][1];
}
View
25 example.css
@@ -0,0 +1,25 @@
+/* reset */
+span.ansi-escape {
+ color: #000;
+ background: transparent;
+}
+
+/* styles */
+span.ansi-escape.ansi-escape-bold { font-weight: bold; }
+span.ansi-escape.ansi-escape-italic { font-style: italic; }
+span.ansi-escape.ansi-escape-underline { text-decoration: underline; }
+span.ansi-escape.ansi-escape-inverse { color: #FFF; background: #000; }
+span.ansi-escape.ansi-escape-strikethrough { text-decoration: line-through; }
+
+/* greyscale */
+span.ansi-escape.ansi-escape-white { color: #FFF; }
+span.ansi-escape.ansi-escape-grey { color: #7F7F7F; }
+span.ansi-escape.ansi-escape-black { color: #000; }
+
+/* colors */
+span.ansi-escape.ansi-escape-blue { color: #00F; }
+span.ansi-escape.ansi-escape-cyan { color: #0FF; }
+span.ansi-escape.ansi-escape-green { color: #0F0; }
+span.ansi-escape.ansi-escape-magenta { color: #F0F; }
+span.ansi-escape.ansi-escape-red { color: #F00; }
+span.ansi-escape.ansi-escape-yellow { color: #FF0; }
View
14 example.html
@@ -4,6 +4,7 @@
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Colors Example</title>
<script src="colors.js"></script>
+ <link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<script>
@@ -71,6 +72,19 @@
// outputs yellow text
document.write("this is a warning".warn);
+ //
+ // Using CSS classes
+ //
+
+ colors.mode = "browser-css"
+
+ var stylesColors = ['white', 'grey', 'black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow'];
+ var stylesNormal = stylesColors.concat(['bold', 'italic', 'underline', 'inverse']);
+
+ stylesNormal.forEach(function (style) {
+ var string = "Im feeling rather " + style + " today.";
+ document.write(string[style] + "<br>");
+ });
</script>
</body>
</html>
View
18 test.js
@@ -26,8 +26,14 @@ function h(s, color) {
// that's pretty dumb approach to testing it
}
+function css(s, color) {
+ return '<span class="ansi-escape ansi-escape-' + color + '">' + s + '</span>';
+ // not better
+}
+
var stylesColors = ['white', 'grey', 'black', 'blue', 'cyan', 'green', 'magenta', 'red', 'yellow'];
-var stylesAll = stylesColors.concat(['bold', 'italic', 'underline', 'inverse', 'rainbow']);
+var stylesNormal = stylesColors.concat(['bold', 'italic', 'underline', 'inverse']);
+var stylesAll = stylesNormal.concat(['rainbow']);
colors.mode = 'console';
assert.equal(s.bold, '\x1B[1m' + s + '\x1B[22m');
@@ -67,6 +73,16 @@ stylesColors.forEach(function (color) {
assert.equal(typeof("astring".red),'string');
assert.equal(typeof("astring".error),'string');
+colors.mode = 'browser-css';
+assert.ok(s.rainbow);
+stylesNormal.forEach(function (color) {
+ assert.equal(s[color], css(s, color));
+ assert.equal(colors[color](s), css(s, color));
+});
+
+assert.equal(typeof("astring".red),'string');
+assert.equal(typeof("astring".error),'string');
+
colors.mode = 'none';
stylesAll.forEach(function (style) {
assert.equal(s[style], s);
Something went wrong with that request. Please try again.