Making quotes around literals lighter

src/index.html

@@ -75,6 +75,10 @@
           fill: transparent;
         }
 
+        .quote {
+          fill: #a0a0a0;
+        }
+
         .placeholder text {
           fill: #fff;
           font-weight: bold;

src/js/parser/javascript/base.js

@@ -48,9 +48,7 @@ export default {
         group = this.container.group()
           .addClass('label'),
         rect = group.rect(),
-        text = group.text().attr({
-          text: text
-        });
+        text = group.text(0, 0, text);
 
     setTimeout(deferred.resolve.bind(deferred, group));
     deferred.promise.then(() => {
@@ -58,7 +56,7 @@ export default {
           margin = 5;
 
       text.transform(Snap.matrix()
-        .translate(margin, box.height + margin));
+        .translate(margin, box.height / 2 + 2 * margin));
 
       rect.attr({
         width: box.width + 2 * margin,

src/js/parser/javascript/literal.js

@@ -5,8 +5,13 @@ export default _.extend({}, Base, {
   type: 'literal',
 
   _render() {
-    return this.renderLabel('"' + this.literal.textValue + '"')
+    return this.renderLabel(['"', this.literal.textValue, '"'])
       .then(label => {
+        var spans = label.selectAll('tspan');
+
+        spans[0].addClass('quote');
+        spans[2].addClass('quote');
+
         label.select('rect').attr({
           rx: 3,
           ry: 3