From 25367f4d27bf53669c5dfdb5330c6fee5bde5a11 Mon Sep 17 00:00:00 2001
From: Addy Osmani <addyosmani@gmail.com>
Date: Tue, 12 May 2020 18:17:57 -0700
Subject: [PATCH] [docs] refactor usage docs syntax highlighting

---
 site/src/_includes/components/usage.njk | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/site/src/_includes/components/usage.njk b/site/src/_includes/components/usage.njk
index 84ebf72c..905d851d 100644
--- a/site/src/_includes/components/usage.njk
+++ b/site/src/_includes/components/usage.njk
@@ -4,35 +4,31 @@
 {{ "Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time." | markdown | safe }}
 
 {{ "Quickstart:" | markdown | safe }}
-{% markdownConvert %}
-```
+
+{% highlight "html" %}
 <!-- Include quicklink from dist -->
 <script src="dist/quicklink.umd.js"></script>
 <!-- Initialize (you can do this whenever you want) -->
 <script>
 quicklink.listen();
 </script>
-```
-{% endmarkdownConvert %}
+{% endhighlight %}
 
 {{ "For example, you can initialize after the `load` event fires:" | markdown | safe }}
-{% markdownConvert %}
-```html
+{% highlight "html" %}
 <script>
 window.addEventListener('load', () => {
   quicklink.listen();
 });
 </script>
-```
-{% endmarkdownConvert %}
+{% endhighlight %}
 
 {{ "ES Module import:" | markdown | safe }}
-{% markdownConvert %}
-```js
+{% highlight "js" %}
 import quicklink from "quicklink/dist/quicklink.mjs";
 quicklink.listen();
-```
-{% endmarkdownConvert %}
+{% endhighlight %}
+
 {{ "The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:" | markdown | safe }}
 {{ "* Call `quicklink.listen()` once a navigation to a new route has completed" | markdown | safe }}
 {{ "* Call `quicklink.listen()` against a specific DOM element / component" | markdown | safe }}