Update README.md

Author: WebCoder49

README.md

@@ -1,5 +1,5 @@
 # code-input
-[![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.shields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases)
+[![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.shields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases) [![View the demo on CodePen](https://img.shields.io/static/v1?label=Demo&message=on%20CodePen&color=orange&logo=codepen&style=for-the-badge)](https://codepen.io/WebCoder49/details/jOypJOx)
 
 > ___Fully customisable syntax-highlighted textareas.___
 
@@ -26,6 +26,8 @@ The `<code-input>` element works like a `<textarea>` and therefore **works in HT
 
 - The next step is to set up a `template` to link `code-input` to your syntax-highlighter. If you're using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as `"syntax-highlighted"`, but you can use any template name as long as you are consistent.
 
+> NB: You need to do this above where you declare any `code-input` elements in the HTML.
+
   - *Highlight.js:*
     ```js
     codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs));