diff --git a/docs/app/templates/public-pages/docs/styles.hbs b/docs/app/templates/public-pages/docs/styles.hbs
index e2046734..1b79e36f 100644
--- a/docs/app/templates/public-pages/docs/styles.hbs
+++ b/docs/app/templates/public-pages/docs/styles.hbs
@@ -18,7 +18,9 @@
   There is only four variables you can tweak (Sass syntax)
 </p>
 
-{{get-code-snippet "styles-1.scss"}}
+{{#let (get-code-snippet "styles-1.scss") as |snippet|}}
+  <CodeBlock @language="scss" @code={{snippet.source}} />
+{{/let}}
 
 <p>
   If by example you want to change the colour of the overlay to be blue, you
@@ -26,7 +28,9 @@
   <code>app.scss</code>/<code>app.less</code>.
 </p>
 
-{{get-code-snippet "styles-2.scss" }}
+{{#let (get-code-snippet "styles-2.scss") as |snippet|}}
+  <CodeBlock @language="scss" @code={{snippet.source}} />
+{{/let}}
 
 <p>
   In the next sections we'll give in more involved customizations.