diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
index c1a0ca429..8168d77e3 100644
--- a/assets/js/darkmode.js
+++ b/assets/js/darkmode.js
@@ -8,12 +8,7 @@ const syntaxTheme = document.querySelector("#theme-link");
 
 if (currentTheme) {
   document.documentElement.setAttribute('saved-theme', currentTheme);
-  if (currentTheme === 'dark') {
-    syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
-  }
-  else {
-    syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
-  }
+  syntaxTheme.href = currentTheme === 'dark' ?  '{{ $darkSyntax.Permalink }}' :  '{{ $lightSyntax.Permalink }}';
 }
 
 const switchTheme = (e) => {
diff --git a/assets/styles/clipboard.scss b/assets/styles/clipboard.scss
index 4f40f8104..7989e248c 100644
--- a/assets/styles/clipboard.scss
+++ b/assets/styles/clipboard.scss
@@ -15,26 +15,33 @@
   z-index: 1;
   opacity: 0;
   transition: 0.12s;
-}
-.clipboard-button > svg {
-  fill: var(--light);
-  filter: contrast(0.3);
-}
-.clipboard-button:hover {
-  cursor: pointer;
-  border-color: var(--primary);
-}
-.clipboard-button:hover > svg {
-  fill: var(--primary);
-}
-.clipboard-button:focus {
-  outline: 0;
-}
-.highlight {
-  position: relative;
-}
-.highlight:hover > .clipboard-button {
-  opacity: 1;
-  transition: 0.2s;
+  
+  & > svg {
+    fill: var(--light);
+    filter: contrast(0.3);
+  }
+  
+  &:hover {
+    cursor: pointer;
+    border-color: var(--primary);
+    
+    & > svg {
+      fill: var(--primary);
+    }
+  }
+  
+  &:focus {
+    outline: 0;
+  }
 }
 
+.highlight {
+  position: relative;
+  
+  &:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+  }
+}
+
+
diff --git a/content/notes/hosting.md b/content/notes/hosting.md
index 70f9d04cf..fffcd653a 100644
--- a/content/notes/hosting.md
+++ b/content/notes/hosting.md
@@ -66,7 +66,7 @@ Please note that the `cname` field should *not* have any path `e.g. end with /qu
 
 [Reference `deploy.yaml` here](https://github.com/jackyzha0/quartz/blob/hugo/.github/workflows/deploy.yaml)
 
-```yaml
+```yaml {title=".github/workflows/deploy.yaml"}
 - name: Deploy  
   uses: peaceiris/actions-gh-pages@v3  
   with:  
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 8dda6a8c0..dbcf732fd 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,8 +1,9 @@
 {{$src := .Destination | safeURL }}
+{{$width := index (split .Text "|") 1 | default "auto" }}
 {{$external := strings.HasPrefix $src "http" }}
 {{- if $external -}}
-<img src="{{ $src }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
+<img src="{{ $src }}" width="{{ $width }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
 {{- else -}}
 {{$fixedUrl := (cond (hasPrefix $src "/") $src (print "/" $src)) | urlize}}
-<img src="{{.Page.Site.BaseURL}}{{ $fixedUrl }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
+<img src="{{.Page.Site.BaseURL}}{{ $fixedUrl }}" width="{{ $width }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
 {{- end -}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dec1b7180..813fe534d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -95,6 +95,7 @@
       {{if $.Site.Data.config.enableClipboard -}}
       addCopyButtons();
       {{ end }}
+
       {{if $.Site.Data.config.enableSPA -}}
       addTitleToCodeBlocks();
       {{ end }}
@@ -135,6 +136,7 @@
       window.addEventListener("DOMContentLoaded", addCopyButtons);
       {{ end }}
       {{ end }}
+
       {{if $.Site.Data.config.enableCodeBlockTitle -}}
       {{if $.Site.Data.config.enableSPA -}}
       addTitleToCodeBlocks();
@@ -166,8 +168,11 @@
       navigate: (url) => (window.location.href = url),
       prefetch: () => {},
     }
-    init()
-    render()
+
+    window.addEventListener("DOMContentLoaded", () => {
+      init()
+      render()
+    })
   </script>
   {{end}}
 </head>