diff --git a/docs/_assets/customizer.css b/docs/_assets/customizer.css
index b2b3f4ec..0c45ecc3 100644
--- a/docs/_assets/customizer.css
+++ b/docs/_assets/customizer.css
@@ -109,10 +109,12 @@
   width: 100%;
   box-sizing: border-box;
 }
-.mdl-gen__cdn .demo-code code {
-  visibility: hidden;
+.mdl-gen__cdn .demo-code .mdl-gen__cdn-link{
+  display: none;
 }
-
-.mdl-gen__cdn .demo-code code.visible {
-  visibility: visible;
+.mdl-gen__cdn .demo-code .visible {
+  display: block;
+}
+.mdl-gen__cdn .demo-code .visible + .mdl-gen__placeholder {
+  display: none;
 }
diff --git a/docs/_assets/customizer.js b/docs/_assets/customizer.js
index 4c090fb9..57a59268 100644
--- a/docs/_assets/customizer.js
+++ b/docs/_assets/customizer.js
@@ -5,7 +5,7 @@ function init() {
   'use strict';
 
   var wheel = document.querySelector('#wheel > svg');
-  var cdn = document.querySelector('.mdl-gen__cdn code');
+  var cdn = document.querySelector('.mdl-gen__cdn .mdl-gen__cdn-link');
   new MaterialCustomizer(wheel, cdn);
 }
 
diff --git a/docs/_templates/customize.html b/docs/_templates/customize.html
index 23b01033..cdd9c9b9 100644
--- a/docs/_templates/customize.html
+++ b/docs/_templates/customize.html
@@ -67,7 +67,7 @@
       </div>
     </div>
     <div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
-      <pre class="demo-code language-markup"><code class="language-markup" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /&gt; </code></pre>
+      <pre class="demo-code language-markup"><code class="language-markup mdl-gen__cdn-link" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /&gt; </code><code class="language-markup mdl-gen__placeholder" data-language="markup"> &lt;link rel="stylehsheet" href="$$hosted_libs_prefix$$/$$version$$/material.indigo-pink.min.css" /&gt; </code></pre>
     </div>
   </div>
 </div>