diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 78ed81c..af5f7bb 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -123,7 +123,6 @@
 }
 
 .article-page.has-toc {
-
     .left-sidebar {
         display: none;
     }
@@ -395,6 +394,41 @@
         }
     }
 
+    .highlight {
+        background-color: var(--pre-background-color);
+        padding: var(--card-padding);
+        position: relative;
+
+        &:hover {
+            .copyCodeButton {
+                opacity: 1;
+            }
+        }
+
+        pre {
+            margin: initial;
+            padding: 0;
+            margin: 0;
+            width: auto;
+        }
+    }
+
+    .copyCodeButton {
+        position: absolute;
+        top: calc(var(--card-padding));
+        right: calc(var(--card-padding));
+        background: var(--card-background);
+        border: none;
+        box-shadow: var(--shadow-l2);
+        border-radius: var(--tag-border-radius);
+        padding: 8px 16px;
+        color: var(--card-text-color-main);
+        cursor: pointer;
+        font-size: 14px;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
     .table-wrapper {
         padding: 0 var(--card-padding);
         overflow-x: auto;
@@ -449,6 +483,7 @@
     /// Negative margins
     blockquote,
     figure,
+    .highlight,
     pre,
     .gallery,
     .video-wrapper,
@@ -458,30 +493,4 @@
         margin-right: calc((var(--card-padding)) * -1);
         width: calc(100% + var(--card-padding) * 2);
     }
-
-    .highlight {
-        position: relative;
-
-        &:hover {
-            .copyCodeButton {
-                opacity: 1;
-            }
-        }
-    }
-
-    .copyCodeButton {
-        position: absolute;
-        top: calc(var(--card-padding));
-        right: 0;
-        background: var(--card-background);
-        border: none;
-        box-shadow: var(--shadow-l2);
-        border-radius: var(--tag-border-radius);
-        padding: 8px 16px;
-        color: var(--card-text-color-main);
-        cursor: pointer;
-        font-size: 14px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
 }
diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index 5de13a2..ec7c02d 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -57,6 +57,58 @@ class StackGallery {
     }
 
     public static createGallery(container: HTMLElement) {
+        /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
+        /// because it can not detect whether image is being wrapped by a link or not
+        /// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
+
+        const images = container.querySelectorAll('img');
+        for (const img of Array.from(images)) {
+            /// Images are wrapped with figure tag if the paragraph has only images without texts
+            /// This is done to allow inline images within paragraphs
+            const paragraph = img.closest('p');
+
+            if (paragraph.textContent.trim() == '') {
+                /// Once we insert figcaption, this check no longer works
+                /// So we add a class to paragraph to mark it
+                paragraph.classList.add('no-text');
+            }
+
+            let isNewLineImage = paragraph.classList.contains('no-text');
+            if (!isNewLineImage) continue;
+
+            const hasLink = img.parentElement.tagName == 'A';
+
+            let el: HTMLElement = img;
+            /// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
+            const figure = document.createElement('figure');
+            figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
+            figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
+            if (hasLink) {
+                /// Wrap <a> if it exists
+                el = img.parentElement;
+            }
+            el.parentElement.insertBefore(figure, el);
+            figure.appendChild(el);
+
+            /// Add figcaption if it exists
+            if (img.hasAttribute('alt')) {
+                const figcaption = document.createElement('figcaption');
+                figcaption.innerText = img.getAttribute('alt');
+                figure.appendChild(figcaption);
+            }
+
+            /// Wrap img tag with <a> tag if image was not wrapped by <a> tag
+            if (!hasLink) {
+                figure.className = 'gallery-image';
+
+                const a = document.createElement('a');
+                a.href = img.src;
+                a.setAttribute('target', '_blank');
+                img.parentNode.insertBefore(a, img);
+                a.appendChild(img);
+            }
+        }
+
         const figuresEl = container.querySelectorAll('figure.gallery-image');
 
         let currentGallery = [];
diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index 20de18c..f3160ae 100644
--- a/assets/ts/main.ts
+++ b/assets/ts/main.ts
@@ -62,20 +62,21 @@ let Stack = {
         /**
          * Add copy button to code block
         */
-        const codeBlocks = document.querySelectorAll('.article-content > div.highlight');
+        const highlights = document.querySelectorAll('.article-content div.highlight');
         const copyText = `Copy`,
             copiedText = `Copied!`;
-        codeBlocks.forEach(codeBlock => {
+
+        highlights.forEach(highlight => {
             const copyButton = document.createElement('button');
             copyButton.innerHTML = copyText;
             copyButton.classList.add('copyCodeButton');
-            codeBlock.appendChild(copyButton);
+            highlight.appendChild(copyButton);
 
-            const pre = codeBlock.getElementsByTagName('pre');
-            const code = pre[0].textContent;
+            const codeBlock = highlight.querySelector('code[data-lang]');
+            if (!codeBlock) return;
 
             copyButton.addEventListener('click', () => {
-                navigator.clipboard.writeText(code)
+                navigator.clipboard.writeText(codeBlock.textContent)
                     .then(() => {
                         copyButton.textContent = copiedText;
 
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index a67b4aa..d449fc9 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -109,7 +109,7 @@ params:
             defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
             serverName: "cactus.chat"
             siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
-            
+
         giscus:
             repo:
             repoID:
@@ -122,15 +122,15 @@ params:
             emitMetadata: 0
 
         gitalk:
-            owner: 
-            admin:  
-            repo: 
-            clientID: 
-            clientSecret: 
-        
+            owner:
+            admin:
+            repo:
+            clientID:
+            clientSecret:
+
         cusdis:
-            host: 
-            id: 
+            host:
+            id:
     widgets:
         enabled:
             - search
@@ -183,19 +183,19 @@ menu:
               ### For demonstration purpose, the home link will be open in a new tab
               newTab: true
               icon: home
-    
+
     social:
         - identifier: github
           name: GitHub
           url: https://github.com/CaiJimmy/hugo-theme-stack
           params:
-            icon: brand-github
-            
+              icon: brand-github
+
         - identifier: twitter
           name: Twitter
           url: https://twitter.com
           params:
-            icon: brand-twitter
+              icon: brand-twitter
 
 related:
     includeNewer: true
@@ -219,3 +219,9 @@ markup:
         startLevel: 2
     highlight:
         noClasses: false
+        codeFences: true
+        guessSyntax: true
+        lineNoStart: 1
+        lineNos: true
+        lineNumbersInTable: true
+        tabWidth: 4
diff --git a/exampleSite/content/post/markdown-syntax/index.md b/exampleSite/content/post/markdown-syntax/index.md
index be381a0..0254cca 100644
--- a/exampleSite/content/post/markdown-syntax/index.md
+++ b/exampleSite/content/post/markdown-syntax/index.md
@@ -162,3 +162,7 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
 
 Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Hyperlinked image
+
+[![Google](https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png)](https://google.com)
\ No newline at end of file
diff --git a/exampleSite/content/post/rich-content/index.md b/exampleSite/content/post/rich-content/index.md
index af8a390..f2b45db 100644
--- a/exampleSite/content/post/rich-content/index.md
+++ b/exampleSite/content/post/rich-content/index.md
@@ -36,3 +36,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 ## bilibilibi Shortcode
 
 {{< bilibili av498363026 >}}
+
+## Gist Shortcode
+
+{{< gist spf13 7896402 >}}
\ No newline at end of file
diff --git a/go.mod b/go.mod
index 1cf4674..776617e 100644
--- a/go.mod
+++ b/go.mod
@@ -1,3 +1,3 @@
-module github.com/CaiJimmy/hugo-theme-stack
+module github.com/CaiJimmy/hugo-theme-stack/v3
 
 go 1.12
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 0325458..0ed5584 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -25,22 +25,17 @@
 	{{- end -}}
 {{- end -}}
 
-<figure 
+<img src="{{ $Permalink }}"
+	{{ with $Width }}width="{{ . }}"{{ end }}
+	{{ with $Height }}height="{{ . }}"{{ end }}
+	{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+	loading="lazy"
+	{{ with $alt }}
+		alt="{{ . }}"
+	{{ end }}
 	{{ if $galleryImage }}
 		class="gallery-image" 
-		style="
-			flex-grow: {{ div (mul $image.Width 100) $image.Height }}; 
-			flex-basis: {{ div (mul $image.Width 240) $image.Height }}px"
-	{{ end }}>
-	<a href="{{ $Permalink }}" {{ if $galleryImage }}data-size="{{ $image.Width }}x{{ $image.Height }}"{{ end }}>
-		<img src="{{ $Permalink }}"
-			{{ with $Width }}width="{{ . }}"{{ end }}
-			{{ with $Height }}height="{{ . }}"{{ end }}
-			{{ with $Srcset }}srcset="{{ . }}"{{ end }}
-			loading="lazy"
-			{{ with $alt }}alt="{{ . }}"{{ end }}>
-	</a>
-	{{ with $alt }}
-	<figcaption>{{ . | markdownify }}</figcaption>
+		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
 	{{ end }}
-</figure>
\ No newline at end of file
+>
\ No newline at end of file
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
index d367b25..072465c 100644
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "3.7.0" -}}
+{{- $ThemeVersion := "3.8.0" -}}
 <footer class="site-footer">
     <section class="copyright">
         &copy;