Better string highlight (#462)

Better string highlight

src/assets/toolkit/styles/vendor/prism.css

@@ -16,15 +16,17 @@
 }
 
 .token.property,
-.token.keyword {
+.token.keyword,
+.token.interpolation-punctuation {
   color: color-mod(var(--color-blue) h(-15) s(+50%) l(+20%));
 }
 
 .token.constant,
 .token.attr-value,
 .token.selector,
-.token.class-name {
-  color: color-mod(var(--color-green) l(+17%));
+.token.class-name,
+:matches(.language-js, .language-javascript) .token.string {
+  color: color-mod(var(--color-green) l(+25%) s(-20%));
 }
 
 .token.rule,

src/patterns/components/cms-content/base.hbs

@@ -58,5 +58,26 @@ repos = indexedRepos.sort((a, b) => {
     return a.index < b.index ? -1 : 1;
   }
   return a.language < b.language ? -1 : 1;
-});</code></pre>
+});
+
+// Set up a resolved promise for our loop
+let step = Promise.resolve();
+
+// For every frame we need to generate…
+for (let i = 0; i &lt;= frames; i++) {
+  let position = duration / frames * i;
+  let filename = `whut-${filePrefix}${i}${fileScale}${fileExtension}`;
+  // Begin this step when the previous finishes
+  step = step.then(() => {
+    timeline.pause(position);
+    return svgAsPngUri(document.getElementById("amoeba"), { scale }).then(
+      uri => {
+        // Convert data URI to plain base64
+        let imgDataIndex = uri.indexOf("base64,") + "base64,".length;
+        let imgData = uri.substr(imgDataIndex);
+        zip.file(filename, imgData, { base64: true });
+      }
+    );
+  });
+}</code></pre>
 </article>