diff --git a/website/content/docs/hugo.md b/website/content/docs/hugo.md
index daf85f96..b225db7a 100644
--- a/website/content/docs/hugo.md
+++ b/website/content/docs/hugo.md
@@ -223,7 +223,7 @@ CMS.registerEditorComponent({
             widget: "string"
         },
     ],
-    pattern: /{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/,
+    pattern: /^{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/,
     fromBlock: function(match) {
         return {
             username: match[1],
@@ -234,7 +234,7 @@ CMS.registerEditorComponent({
         return `{{< gist ${obj.username} ${obj.gid} >}}`;
     },
     toPreview: function(obj) {
-        return `{{< gist ${obj.username} ${obj.gid} >}}`;
+        return '<a href="https://gist.github.com/' + obj.username + '/' + obj.id + '">gist</a>';
     },
 });
 ```
@@ -243,4 +243,4 @@ CMS.registerEditorComponent({
 
 ![Gist](/img/hugo_shortcode_gist.png "Gist")
 
-For getting started quickly you can refer to this amazing prebuilt resource of [hugo shortcodes editor components](https://github.com/sharadcodes/hugo-shortcodes-netlify-cms)!
\ No newline at end of file
+For getting started quickly you can refer to this amazing prebuilt resource of [hugo shortcodes editor components](https://github.com/sharadcodes/hugo-shortcodes-netlify-cms)!