diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8470a139..7cba4f5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
 - :art: Perf: optimize footer code
 - :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
+- :bug: Fix: typeit print code error ([#19](https://github.com/Lruihao/FixIt/issues/19))
 - :bug: Fix: add scroll-margin to headerlink
 - :bug: Fix: pre element overflow error ([#29](https://github.com/Lruihao/FixIt/issues/29))
 - :bug: Fix: toc-auto display error ([#21](https://github.com/Lruihao/FixIt/issues/21))
diff --git a/layouts/partials/function/id.html b/layouts/partials/function/id.html
index a423e1d7..73fac683 100644
--- a/layouts/partials/function/id.html
+++ b/layouts/partials/function/id.html
@@ -1,7 +1,13 @@
 {{- /* ID */ -}}
-{{- $count := (.Scratch.Get "this").count | default 1 -}}
-{{- $id := printf "id-%d" $count -}}
-{{- $count | add 1 | .Scratch.SetInMap "this" "count" -}}
+{{- $id := "" -}}
+{{- with .Id -}}
+  {{- /* If an ID is specified, then just use it.*/ -}}
+  {{- $id = printf "%v" . -}}
+{{- else -}}
+  {{- $count := ($.Scratch.Get "this").count | default 1 -}}
+  {{- $id = printf "id-%d" $count -}}
+  {{- $count | add 1 | $.Scratch.SetInMap "this" "count" -}}
+{{- end -}}
 {{- with .Content -}}
   {{- dict $id . | dict "data" | dict "config" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
 {{- end -}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e977beb2..61f28b42 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -11,7 +11,7 @@
             <span class="header-title-pre">{{ . | safeHTML }}</span>
           {{- end -}}
           {{- if .typeit -}}
-            {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+            {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-desktop" | partial "function/id.html" -}}
             <span id="{{ $id }}" class="typeit"></span>
             {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
           {{- else -}}
@@ -26,7 +26,7 @@
       </a>
       {{- with .Site.Params.header.subtitle -}}
         {{- if .typeit -}}
-          {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+          {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-subtitle-desktop" | partial "function/id.html" -}}
           <span id="{{ $id }}" class="typeit header-subtitle"></span>
           {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
         {{- else -}}
@@ -107,7 +107,7 @@
               <span class="header-title-pre">{{ . | safeHTML }}</span>
             {{- end -}}
             {{- if .typeit -}}
-              {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+              {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-title-mobile" | partial "function/id.html" -}}
               <span id="{{ $id }}" class="typeit"></span>
               {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
             {{- else -}}
@@ -122,7 +122,7 @@
         </a>
         {{- with .Site.Params.header.subtitle -}}
           {{- if .typeit -}}
-            {{- $id := dict "Content" .name "Scratch" $.Scratch | partial "function/id.html" -}}
+            {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-subtitle-mobile" | partial "function/id.html" -}}
             <span id="{{ $id }}" class="typeit header-subtitle"></span>
             {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
           {{- else -}}
diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
index b1433156..41678ff6 100644
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -30,7 +30,7 @@
   {{- with $profile.subtitle -}}
     <h2 class="home-subtitle">
       {{- if $profile.typeit -}}
-        {{- $id := dict "Content" . "Scratch" $.Scratch | partial "function/id.html" -}}
+        {{- $id := dict "Content" . "Scratch" $.Scratch "Id" "typeit-profile-subtitle" | partial "function/id.html" -}}
         <div id="{{ $id }}" class="typeit"></div>
         {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
       {{- else -}}
diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html
index 8269f7f0..6affc9d9 100644
--- a/layouts/shortcodes/typeit.html
+++ b/layouts/shortcodes/typeit.html
@@ -6,7 +6,7 @@
   {{- /* highlight code content without line number */ -}}
   {{- $content = highlight $content . "linenos=false" -}}
   {{- /* delete outer label */ -}}
-  {{- $content = replaceRE `<div class="highlight"><pre class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content -}}
+  {{- $content = replaceRE `<div class="highlight"><pre tabindex="0" class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content -}}
   {{- /* parsing markdown links */ -}}
   {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=$4>$3</a>$1$5$6" $content -}}
   {{- /* replace " " to "&nbsp;" and replace "\n" to "<br />" */ -}}