Skip to content

Commit

Permalink
[docs] refactor usage docs syntax highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
addyosmani committed May 13, 2020
1 parent ba5984d commit 25367f4
Showing 1 changed file with 8 additions and 12 deletions.
20 changes: 8 additions & 12 deletions site/src/_includes/components/usage.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down

0 comments on commit 25367f4

Please sign in to comment.