diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000000000000000000000000000000000000..22685740a22bfe91e6a159eea1ae7013752ac924
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,52 @@
+name: Release
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+jobs:
+  release:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, ubuntu-22.04, windows-latest]
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-20.04' || matrix.platform == 'ubuntu-22.04'
+        # You can remove libayatana-appindicator3-dev if you don't use the system tray feature.
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev librsvg2-dev
+      - name: Rust setup
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: "./src-ui -> target"
+
+      - name: Sync node version and setup cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+          cache: "npm"
+
+      - name: Install app dependencies and build web
+        run: npm install && npm run build
+
+      - name: Build the app
+        uses: tauri-apps/tauri-action@v0
+
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: ${{ github.ref_name }} # This only works if your workflow triggers on new tags.
+          releaseName: "Rust Tutorial v__VERSION__" # tauri-action replaces \_\_VERSION\_\_ with the app version.
+          releaseBody: "See the assets to download and install this version."
+          releaseDraft: true
+          prerelease: false
diff --git a/docs/01_ko.html b/docs/01_ko.html
index 9970b5c11366082b1599fb599be509b9361baae9..705a95e8d0b9886575d92a03efa326652d543286 100644
--- a/docs/01_ko.html
+++ b/docs/01_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -82,5 +84,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/02_ko.html b/docs/02_ko.html
index f3feabd3f67c5d2304149a333111a7d96cfa42da..04253b69bd0eb4bfb0eeafe93c95446f14318cf3 100644
--- a/docs/02_ko.html
+++ b/docs/02_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -89,5 +91,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/03_ko.html b/docs/03_ko.html
index 5ec5147b158524066f7ace5a578a7f21010f1558..310c475b9706c0f171fc8484221a1bf33419d414 100644
--- a/docs/03_ko.html
+++ b/docs/03_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -65,5 +67,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/04_ko.html b/docs/04_ko.html
index de2daa9c4cc288f4309c99580de97402e89c44ba..3f7e1ac9f6a06007e51ab4e01f9c79d5d3c17580 100644
--- a/docs/04_ko.html
+++ b/docs/04_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -63,5 +65,19 @@ $ Hello, world! (stdout)
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/06_ko.html b/docs/06_ko.html
index fc6ffde9360bf370d794e94f961d287c4a6accf9..cbdc64e771a040a19889c23e1b3162544204df60 100644
--- a/docs/06_ko.html
+++ b/docs/06_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -70,5 +72,19 @@ fn main() {
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/07_ko.html b/docs/07_ko.html
index 3af457ef77c33be9c24a68bf8c5af2b4a09693d9..48187b1eb873281160c3cfe9e5d909ccaa3538f0 100644
--- a/docs/07_ko.html
+++ b/docs/07_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -61,5 +63,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/08_ko.html b/docs/08_ko.html
index 6601f061666e42bb6d5fd9e490f18d6fc3207451..50fbb9ba3940edbae7f8a385ece6bb4e6923d419 100644
--- a/docs/08_ko.html
+++ b/docs/08_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -58,5 +60,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/09_ko.html b/docs/09_ko.html
index 2c34693f17aaf5c2de3b7200f3ffd4929a357b54..2c4fee4e5df50ea024b07b99c015631e948e7bdc 100644
--- a/docs/09_ko.html
+++ b/docs/09_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -68,5 +70,19 @@ Rust가 시스템 프로그래밍 언어이기 때문에, 기존에 익숙하지
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/10_ko.html b/docs/10_ko.html
index 6c1a0afee0a4c460bd986a7f7311faa30ee84d0c..00b646e04cc68ef9beb3a6989c83555b8825bd30 100644
--- a/docs/10_ko.html
+++ b/docs/10_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -54,5 +56,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/11_ko.html b/docs/11_ko.html
index bde314a0900e60fcb80cdb177ffda89f5f9d7ee0..9d040ca5f9f3aa4e7d03d0fdf11c346579b0c934 100644
--- a/docs/11_ko.html
+++ b/docs/11_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -56,5 +58,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/12_ko.html b/docs/12_ko.html
index 65501c5018928a9bc929d397d3d08d56b81c40b5..7f4be4af10aaa2dd4f2a09f438dfa42c0b5c76c2 100644
--- a/docs/12_ko.html
+++ b/docs/12_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -58,5 +60,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/13_ko.html b/docs/13_ko.html
index 630e7b47dd60844f72c7cf309c4d8dccfb7b9a74..6e0e5858ac8f92a950340e846fb0e9a18dd1777e 100644
--- a/docs/13_ko.html
+++ b/docs/13_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -58,5 +60,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/14_ko.html b/docs/14_ko.html
index 65fc5fc0057234eb37f783a8ead0b577900208e6..e175bb4f113a4e40be6572686b30a7be9e6e2033 100644
--- a/docs/14_ko.html
+++ b/docs/14_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -56,5 +58,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/15_ko.html b/docs/15_ko.html
index aaf961a86827e7bfaca2c194793d78b649d338ab..478c9497c244a165ae039ea49d980dab0bb7a5d3 100644
--- a/docs/15_ko.html
+++ b/docs/15_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -55,5 +57,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/16_ko.html b/docs/16_ko.html
index 61bc156a1d1e31cc963be7479bed5f75914735a6..f893fa696b22b4236acce96799c34671abc37ee2 100644
--- a/docs/16_ko.html
+++ b/docs/16_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -59,5 +61,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/TOC_ko.html b/docs/TOC_ko.html
index 9df2cbed97cba0dce3f53b0853564fae69dab00b..f0556137daf9a1f7783364f36efbd4011768a36d 100644
--- a/docs/TOC_ko.html
+++ b/docs/TOC_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
diff --git a/docs/chapter_1_ko.html b/docs/chapter_1_ko.html
index 3b8105f1f784523744da12419f95dea1a4a9d46b..2278b8f78012bece26e5cd3555f9c5ab7f369fa6 100644
--- a/docs/chapter_1_ko.html
+++ b/docs/chapter_1_ko.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -35,7 +37,7 @@
             <h1>Chapter 1 - The Basics</h1>
             <p>무슨 언어를 배우든 똑같이 기본부터 살펴보겠습니다. (변수, 함수, 클래스 등)</p>
 <p>Rust 언어 비공식이지만 거의 흔하게 쓰이는 마스코트, 게(crab)의 이름은 <strong>Ferris</strong> 입니다.</p>
-<pre><code>let ferris = crab!()</code></pre>
+<pre><code class="rust">let ferris = crab!()</code></pre>
 <p>또한 Rust를 사용하거나, 기여하거나 관심이 있는 사람들을 <strong>Rustacean</strong>[러스테이션] 라고 부릅니다.</p>
             <div class="bottomnav">
                 <span class="back"><a href="04_ko.html" rel="prev">❮ 이전</a></span>
@@ -54,5 +56,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/highlight.badge.js b/docs/highlight.badge.js
new file mode 100644
index 0000000000000000000000000000000000000000..566adf2fd866fdc23bfe53c4819d9895edde93d1
--- /dev/null
+++ b/docs/highlight.badge.js
@@ -0,0 +1,426 @@
+"use strict";
+/*
+----------------------------------------
+highlightJs Badge
+----------------------------------------
+
+A copy code and language display badge
+for the highlightJs Syntax highlighter.
+
+by Rick Strahl, 2019-2020
+License: MIT
+
+Edited by Seok Won Choi
+
+Make sure this script is loaded last in your
+script loading.
+
+Usage:
+------
+Load `highlightjs-badge.js` after `highlight.js`:
+
+```js
+<link href="highlightjs/styles/vs2015.css" rel="stylesheet">
+<script src="highlighjs/highlight.pack.js"></script>
+
+<script src="highlightjs-badge.js"></script>  
+<script>
+    setTimeout(function () {
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightBlock(pres[i]);
+        }
+        var options = {
+            contentSelector: "#ArticleBody",
+            // Delay in ms used for `setTimeout` before badging is applied
+            // Use if you need to time highlighting and badge application
+            // since the badges need to be applied afterwards.
+            // 0 - direct execution (ie. you handle timing
+            loadDelay:0,
+
+            // CSS class(es) used to render the copy icon.
+            copyIconClass: "fa fa-copy",
+            // CSS class(es) used to render the done icon.
+            checkIconClass: "fa fa-check text-success"
+        };
+        window.highlightJsBadge(options);
+    },10);
+</script>
+```
+
+The script contains the template and CSS so nothing
+else is needed to run it.
+
+Customization:
+--------------
+This code automatically embeds styling and the template.
+
+If you want to customize you can either create a template
+in your HTML **using the code at the end of this file**.
+
+Alternately you can customize the `getTemplate()` function
+that renders the code from a string and keep it self contained
+within this script.
+
+Requirements:
+-------------
+Uses some ES6 features so won't work in IE without shims:
+
+* Object.assign
+* String.trim
+
+*/
+
+// module header
+(function (global, factory) {
+  if (typeof module === "object" && typeof module.exports === "object") {
+    // For CommonJS and CommonJS-like environments where a proper `window`
+    // is present, execute the factory
+    module.exports = global.document
+      ? factory(global, true)
+      : function (w) {
+          if (!w.document) {
+            throw new Error("A window with a document is required");
+          }
+          return factory(w);
+        };
+  } else {
+    factory(global);
+  }
+
+  // Pass this if window is not defined yet
+})(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
+  if (typeof highlightJsBadgeAutoLoad !== "boolean")
+    var highlightJsBadgeAutoLoad = false;
+
+  function highlightJsBadge(opt) {
+    var options = {
+      // the selector for the badge template
+      templateSelector: "#CodeBadgeTemplate",
+
+      // base content selector that is searched for snippets
+      contentSelector: "body",
+
+      // Delay in ms used for `setTimeout` before badging is applied
+      // Use if you need to time highlighting and badge application
+      // since the badges need to be applied afterwards.
+      // 0 - direct execution (ie. you handle timing
+      loadDelay: 0,
+
+      // CSS class(es) used to render the copy icon.
+      copyIconClass: "far fa-clipboard",
+      // optional content for icons class (<i class="fa fa-copy"></i> or <i class="material-icons">file_copy</i>)
+      copyIconContent: "",
+
+      // CSS class(es) used to render the done icon.
+      checkIconClass: "fa fa-check text-success",
+      checkIconContent: "",
+
+      // function called before code is placed on clipboard
+      // Passed in text and returns back text function(text, codeElement) { return text; }
+      blogURL: "",
+    };
+
+    function initialize(opt) {
+      Object.assign(options, opt);
+
+      if (document.readyState == "loading")
+        document.addEventListener("DOMContentLoaded", load);
+      else load();
+    }
+
+    function load() {
+      if (options.loadDelay) setTimeout(addCodeBadge, loadDelay);
+      else addCodeBadge();
+    }
+
+    function addCodeBadge() {
+      // first make sure the template exists - if not we embed it
+      if (!document.querySelector(options.templateSelector)) {
+        var node = document.createElement("div");
+        node.innerHTML = getTemplate();
+        var style = node.querySelector("style");
+        var template = node.querySelector(options.templateSelector);
+        document.body.appendChild(style);
+        document.body.appendChild(template);
+      }
+
+      var hudText = document.querySelector(options.templateSelector).innerHTML;
+
+      var $codes = document.querySelectorAll("pre>code.hljs");
+      for (var index = 0; index < $codes.length; index++) {
+        var el = $codes[index];
+        if (el.querySelector(".code-badge")) continue; // already exists
+
+        var lang = el.classList[0];
+        if (lang === "hljs") {
+          lang = el.classList[1].replace("language-", "");
+        }
+        // for (var i = 0; i < el.classList.length; i++) {
+        //   var cl = el.classList[i];
+        //   console.log(cl);
+        //   // class="hljs language-csharp"
+        //   if (cl.substr(0, 9) === "language-") {
+        //     // console.log(el.parentElement.classList[i]);
+        //     if (el.parentElement.classList[i] !== undefined) {
+        //       lang = el.parentElement.classList[i].replace("language-", "");
+        //       break;
+        //     }
+        //   }
+        //   // class="hljs lang-cs"  // docFx
+        //   else if (cl.substr(0, 5) === "lang-") {
+        //     if (el.parentElement.classList[i] !== undefined) {
+        //       lang = el.parentElement.classList[i].replace("lang-", "");
+        //       break;
+        //     }
+        //   }
+        //   // class="kotlin hljs"   (auto detected)
+        //   if (!lang) {
+        //     for (var j = 0; j < el.classList.length; j++) {
+        //       if (el.parentElement.classList[j] == "hljs") continue;
+        //       lang = el.parentElement.classList[j];
+        //       break;
+        //     }
+        //   }
+        // }
+
+        if (lang) lang = lang.toLowerCase();
+        else lang = "Rust";
+
+        // Language Name overrides so it displays nicer
+        if (lang == "ps") lang = "powershell";
+        else if (lang == "cs") lang = "csharp";
+        else if (lang == "js") lang = "javascript";
+        else if (lang == "ts") lang = "typescript";
+        else if (lang == "fox") lang = "foxpro";
+
+        var html = hudText
+          .replace("{{language}}", lang)
+          .replace("{{copyIconClass}}", options.copyIconClass)
+          .trim();
+
+        // insert the Hud panel
+        var $newHud = document.createElement("div");
+        $newHud.innerHTML = html;
+        $newHud = $newHud.querySelector(".code-badge");
+
+        // make <pre> tag position:relative so positioning keeps pinned right
+        // even with scroll bar scrolled
+        var pre = el.parentElement;
+        pre.classList.add("code-badge-pre");
+
+        if (options.copyIconContent)
+          $newHud.querySelector(".code-badge-copy-icon").innerText =
+            options.copyIconContent;
+
+        pre.insertBefore($newHud, el);
+      }
+
+      var $content = document.querySelector(options.contentSelector);
+
+      // single copy click handler
+      $content.addEventListener("click", function (e) {
+        var $clicked = e.srcElement;
+        if ($clicked.classList.contains("code-badge-copy-icon")) {
+          e.preventDefault();
+          e.cancelBubble = true;
+          copyCodeToClipboard(e);
+        }
+        return false;
+      });
+    }
+
+    function copyCodeToClipboard(e) {
+      // walk back up to <pre> tag
+      var $origCode = e.srcElement.parentElement.parentElement.parentElement;
+      // select the <code> tag and grab text
+      var $code = $origCode.querySelector("pre>code");
+      var text = $code.textContent || $code.innerText;
+
+      if (options.blogURL) {
+        text = text + "\n\n" + `[ 출처: ${options.blogURL} ]`;
+      }
+
+      // Create a textblock and assign the text and add to document
+      var el = document.createElement("textarea");
+      el.value = text.trim();
+      document.body.appendChild(el);
+      el.style.display = "block";
+
+      // select the entire textblock
+      if (window.document.documentMode)
+        el.setSelectionRange(0, el.value.length);
+      else el.select();
+
+      // copy to clipboard
+      document.execCommand("copy");
+
+      // clean up element
+      document.body.removeChild(el);
+
+      // show the check icon (copied) briefly
+      swapIcons($origCode);
+    }
+
+    function swapIcons($code) {
+      var copyIcons = options.copyIconClass.split(" ");
+      var checkIcons = options.checkIconClass.split(" ");
+
+      var $fa = $code.querySelector(".code-badge-copy-icon");
+      $fa.innerText = options.checkIconContent;
+
+      for (var i = 0; i < copyIcons.length; i++)
+        $fa.classList.remove(copyIcons[i]);
+
+      for (var i = 0; i < checkIcons.length; i++)
+        $fa.classList.add(checkIcons[i]);
+
+      setTimeout(function () {
+        $fa.innerText = options.copyIconContent;
+
+        for (var i = 0; i < checkIcons.length; i++)
+          $fa.classList.remove(checkIcons[i]);
+        for (var i = 0; i < copyIcons.length; i++)
+          $fa.classList.add(copyIcons[i]);
+      }, 2000);
+    }
+
+    function getTemplate() {
+      var stringArray = [
+        "<style>",
+        "@media print {",
+        "   .code-badge { display: none; }",
+        "}",
+        "    .code-badge-pre {",
+        "        position: relative;",
+        "    }",
+        "    .code-badge {",
+        "        display: flex;",
+        "        flex-direction: row;",
+        "        white-space: normal;",
+        "        background: transparent;",
+        "        background: #333;",
+        "        color: white;",
+        "        font-size: 0.875em;",
+        "        opacity: 0.5;",
+        "        transition: opacity linear 0.5s;",
+        "        border-radius: 0 0 0 7px;",
+        "        padding: 5px 8px 5px 8px;",
+        "        position: absolute;",
+        "        right: 0;",
+        "        top: 0;",
+        "    }",
+        "    .code-badge.active {",
+        "        opacity: 0.8;",
+        "    }",
+        "",
+        "    .code-badge:hover {",
+        "        opacity: .95;",
+        "    }",
+        "",
+        "    .code-badge a,",
+        "    .code-badge a:hover {",
+        "        text-decoration: none;",
+        "    }",
+        "",
+        "    .code-badge-language {",
+        "        margin-right: 10px;",
+        "        font-weight: 600;",
+        "        color: goldenrod;",
+        "    }",
+        "    .code-badge-copy-icon {",
+        "        font-size: 1.2em;",
+        "        cursor: pointer;",
+        "        padding: 0 7px;",
+        "        margin-top:2;",
+        "    }",
+        "    .fa.text-success:{ color: limegreen !important }",
+        "</style>",
+        '<div id="CodeBadgeTemplate" style="display:none">',
+        '    <div class="code-badge">',
+        '        <div class="code-badge-language" >{{language}}</div>',
+        '        <div  title="Copy to clipboard">',
+        '            <i class="{{copyIconClass}} code-badge-copy-icon"></i></i></a>',
+        "        </div>",
+        "     </div>",
+        "</div>",
+      ];
+
+      var t = "";
+      for (var i = 0; i < stringArray.length; i++) t += stringArray[i] + "\n";
+
+      return t;
+    }
+
+    initialize(opt);
+  }
+
+  // global reference Window
+  window.highlightJsBadge = highlightJsBadge;
+
+  // module export
+  if (window.module && window.module.exports)
+    window.module.exports.highlightJsBadge = highlightJsBadge;
+
+  if (highlightJsBadgeAutoLoad) highlightJsBadge();
+});
+
+// You can embed the following into your HTML document
+// to provide your own custom styling.
+
+/*
+<style>
+    "@media print {
+        .code-badge { display: none; }
+    }
+    .code-badge-pre {
+        position: relative; 
+    }
+    .code-badge {
+        display: flex;
+        flex-direction: row;
+        white-space: normal;
+        background: transparent;
+        background: #333;
+        color: white;
+        font-size: 0.875em;
+        opacity: 0.5;
+        border-radius: 0 0 0 7px;
+        padding: 5px 8px 5px 8px;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+    .code-badge.active {
+        opacity: 0.8;
+    }
+    .code-badge:hover {
+        opacity: .95;
+    }
+    .code-badge a,
+    .code-badge a:hover {
+        text-decoration: none;
+    }
+
+    .code-badge-language {
+        margin-right: 10px;
+        font-weight: 600;
+        color: goldenrod;
+    }
+    .code-badge-copy-icon {
+        font-size: 1.2em;
+        cursor: pointer;
+        padding: 0 7px;
+        margin-top:2;
+    }
+    .fa.text-success:{ color: limegreen !important}    
+</style>
+<div id="CodeBadgeTemplate" style="display:none">
+    <div class="code-badge">
+        <div class="code-badge-language">{{language}}</div>
+        <div title="Copy to clipboard">
+            <i class="{{copyIconClass}} code-badge-copy-icon"></i>
+        </div>
+     </div>
+</div>
+*/
diff --git a/docs/highlight.badge.min.js b/docs/highlight.badge.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..cac5fea1be4646d849336862d3b06d68c9e8a4f1
--- /dev/null
+++ b/docs/highlight.badge.min.js
@@ -0,0 +1 @@
+"use strict";!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e,!0):function(e){if(!e.document)throw Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(e,o){if("boolean"!=typeof t)var t=!1;function n(o){var t,n={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"far fa-clipboard",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",blogURL:""};function c(){n.loadDelay?setTimeout(a,loadDelay):a()}function a(){if(!document.querySelector(n.templateSelector)){var o=document.createElement("div");o.innerHTML=function e(){for(var o=["<style>","@media print {","   .code-badge { display: none; }","}","    .code-badge-pre {","        position: relative;","    }","    .code-badge {","        display: flex;","        flex-direction: row;","        white-space: normal;","        background: transparent;","        background: #333;","        color: white;","        font-size: 0.875em;","        opacity: 0.5;","        transition: opacity linear 0.5s;","        border-radius: 0 0 0 7px;","        padding: 5px 8px 5px 8px;","        position: absolute;","        right: 0;","        top: 0;","    }","    .code-badge.active {","        opacity: 0.8;","    }","","    .code-badge:hover {","        opacity: .95;","    }","","    .code-badge a,","    .code-badge a:hover {","        text-decoration: none;","    }","","    .code-badge-language {","        margin-right: 10px;","        font-weight: 600;","        color: goldenrod;","    }","    .code-badge-copy-icon {","        font-size: 1.2em;","        cursor: pointer;","        padding: 0 7px;","        margin-top:2;","    }","    .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">','    <div class="code-badge">','        <div class="code-badge-language" >{{language}}</div>','        <div  title="Copy to clipboard">','            <i class="{{copyIconClass}} code-badge-copy-icon"></i></i></a>',"        </div>","     </div>","</div>",],t="",n=0;n<o.length;n++)t+=o[n]+"\n";return t}();var t=o.querySelector("style"),c=o.querySelector(n.templateSelector);document.body.appendChild(t),document.body.appendChild(c)}for(var a=document.querySelector(n.templateSelector).innerHTML,r=document.querySelectorAll("pre>code.hljs"),l=0;l<r.length;l++){var i=r[l];if(!i.querySelector(".code-badge")){var d=i.classList[0];"hljs"===d&&(d=i.classList[1].replace("language-","")),"ps"==(d=d?d.toLowerCase():"Rust")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var s=a.replace("{{language}}",d).replace("{{copyIconClass}}",n.copyIconClass).trim(),p=document.createElement("div");p.innerHTML=s,p=p.querySelector(".code-badge");var g=i.parentElement;g.classList.add("code-badge-pre"),n.copyIconContent&&(p.querySelector(".code-badge-copy-icon").innerText=n.copyIconContent),g.insertBefore(p,i)}}document.querySelector(n.contentSelector).addEventListener("click",function(o){var t,c,a,r,l;return o.srcElement.classList.contains("code-badge-copy-icon")&&(o.preventDefault(),o.cancelBubble=!0,r=(a=(c=(t=o).srcElement.parentElement.parentElement.parentElement).querySelector("pre>code")).textContent||a.innerText,n.blogURL&&(r=r+"\n\n"+`[ 출처: ${n.blogURL} ]`),(l=document.createElement("textarea")).value=r.trim(),document.body.appendChild(l),l.style.display="block",e.document.documentMode?l.setSelectionRange(0,l.value.length):l.select(),document.execCommand("copy"),document.body.removeChild(l),function e(o){var t=n.copyIconClass.split(" "),c=n.checkIconClass.split(" "),a=o.querySelector(".code-badge-copy-icon");a.innerText=n.checkIconContent;for(var r=0;r<t.length;r++)a.classList.remove(t[r]);for(var r=0;r<c.length;r++)a.classList.add(c[r]);setTimeout(function(){a.innerText=n.copyIconContent;for(var e=0;e<c.length;e++)a.classList.remove(c[e]);for(var e=0;e<t.length;e++)a.classList.add(t[e])},2e3)}(c)),!1})}Object.assign(n,t=o),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",c):c()}e.highlightJsBadge=n,e.module&&e.module.exports&&(e.module.exports.highlightJsBadge=n),t&&n()});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 478de743b3f44459355f0fb3686b3f5bfb52e90a..a37c22d107c6afbd6796b36b3c3784a354215311 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,15 +14,17 @@
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>
     <body>
         <div class="tour">
@@ -36,7 +38,7 @@
             <p><img src="/intro.webp" alt="Welcome to Rust" style="width: 100%; margin-bottom: 20px; border-radius: 10px;"></p>
 <p>Mirror 1: <a href="http://rust-study.ajousw.kr/index.html">http://rust-study.ajousw.kr/</a></p>
 <p>Mirror 2: <a href="https://hi-rust.github.io/index.html">https://hi-rust.github.io/</a></p>
-<p>Binary: <a href="https://github.com/Alfex4936/Rust-Tutorial/releases/download/v1.0.0/Rust.Tutorial_1.0.0_x64_Windows.msi">Windows</a> | <a href="https://">Mac</a> | <a href="https://">Linux</a> - TODO</p>
+<p>Binary: Windows/Mac/Ubuntu22.04 <a href="https://github.com/Hi-Rust/hi-rust.github.io/releases">@다운로드</a></p>
 <p><strong>자기주도프로젝트 🎉</strong></p>
 <p>안녕하세요. 자기주도프로젝트 Rust 튜토리얼 영상을 위한 웹사이트입니다.</p>
 <p><code>프로그래밍 기초 지식이 있는 분들을 타겟</code>으로 만들었습니다. (C &amp; Python)</p>
@@ -69,5 +71,19 @@
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/docs/tour.css b/docs/tour.css
index 3230a0e365837261cf1ec8e41d8152d70bc3b558..1be9e555467ccbd2510e65b67e9d930511075286 100644
--- a/docs/tour.css
+++ b/docs/tour.css
@@ -8,6 +8,12 @@ a:focus {
   outline: none;
 }
 
+pre > code,
+code,
+.code-badge {
+  font-family: "Fira Code", monospace;
+}
+
 div.page img {
   max-height: 100%;
   max-width: calc(100%);
@@ -55,7 +61,7 @@ blockquote {
 }
 
 code {
-  font-family: Consolas, monospace;
+  /* font-family: Consolas, monospace; */
   font-size: 1.1em;
   font-weight: 500;
   padding: 0.3em;
diff --git a/fast.py b/fast.py
index 23a75310aa38534742003d94be38d0277ad7ba2a..de68410a3dd919c80f1db8131df44397483e418c 100644
--- a/fast.py
+++ b/fast.py
@@ -13,7 +13,7 @@ app.add_middleware(
 )
 
 
-app.mount("/", StaticFiles(directory="public", html=True), name="static")
+app.mount("/", StaticFiles(directory="docs", html=True), name="static")
 
 if __name__ == "__main__":
     # standalone
diff --git a/frontend/generate.js b/frontend/generate.js
index 27ca4bcb1f25f32243941917cbba54425e6f545b..afc8454a7554c2319912d90bd7094152dced8e8e 100644
--- a/frontend/generate.js
+++ b/frontend/generate.js
@@ -127,15 +127,17 @@ const getHead = (words, lang) => `<!DOCTYPE html>
         
         <link rel="stylesheet" href="tour.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
-        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+        
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
-
+        <link rel="/manifest" href="./site.webmanifest">
+        
+        <script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
         <script src="./tour.js" defer></script>
-        <script>hljs.highlightAll();</script>
+        <!-- <script>hljs.highlightAll();</script> -->
+        <script src="./highlight.badge.min.js"></script>
     </head>`;
 
 /**
@@ -234,6 +236,20 @@ function template(
             widgetText.textContent = "New Text";
           });
         </script> -->
+
+        <script>
+        var pres = document.querySelectorAll("pre>code");
+        for (var i = 0; i < pres.length; i++) {
+            hljs.highlightElement(pres[i]);
+        }
+        var options = {
+            loadDelay: 0,
+            copyIconClass: "far fa-clipboard",
+            checkIconClass: "fa fa-check text-success",
+            blogURL: "http://rust-study.ajousw.kr/"
+        };
+        window.highlightJsBadge(options);
+        </script>
     </body>
 </html>`;
 }
diff --git a/frontend/lessons/ko/chapter_0.yaml b/frontend/lessons/ko/chapter_0.yaml
index 660fbc4a01c601152d4548cb2f3d0936ad291e05..c1b67ae57080b106aa1d852d7a228b80999ad124 100644
--- a/frontend/lessons/ko/chapter_0.yaml
+++ b/frontend/lessons/ko/chapter_0.yaml
@@ -9,7 +9,7 @@
 
     Mirror 2: [https://hi-rust.github.io/](https://hi-rust.github.io/index.html)
 
-    Binary: [Windows](https://github.com/Alfex4936/Rust-Tutorial/releases/download/v1.0.0/Rust.Tutorial_1.0.0_x64_Windows.msi) | [Mac](https://) | [Linux](https://) - TODO
+    Binary: Windows/Mac/Ubuntu22.04 [@다운로드](https://github.com/Hi-Rust/hi-rust.github.io/releases)
 
 
     **자기주도프로젝트 🎉**
diff --git a/frontend/lessons/ko/chapter_1.yaml b/frontend/lessons/ko/chapter_1.yaml
index b0c235914d9c4b3948c6b41a8c2d6fb5f891303a..a25c819df5d6ff90c1b763f10fd9ea87d582e6f2 100644
--- a/frontend/lessons/ko/chapter_1.yaml
+++ b/frontend/lessons/ko/chapter_1.yaml
@@ -6,7 +6,7 @@
     Rust 언어 비공식이지만 거의 흔하게 쓰이는 마스코트, 게(crab)의 이름은 **Ferris** 입니다.
 
 
-    <pre><code>let ferris = crab!()</code></pre>
+    <pre><code class="rust">let ferris = crab!()</code></pre>
 
 
     또한 Rust를 사용하거나, 기여하거나 관심이 있는 사람들을 **Rustacean**[러스테이션] 라고 부릅니다.
@@ -116,9 +116,9 @@
 
 
     다른 언어에서 사용하는 것보다 텍스트는 더 복잡할 수 있습니다.
-    
+
     Rust가 시스템 프로그래밍 언어이기 때문에, 기존에 익숙하지 않은 메모리 문제에 대해서도 신경쓰고 있습니다.
-    
+
     이에 대해서는 나중에 자세히 다룰 예정입니다.
 
 
@@ -136,7 +136,7 @@
     https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&code=const%20PI%3A%20f32%20%3D%203.14159%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20println!(%0A%20%20%20%20%20%20%20%20%22To%20make%20an%20apple%20%7B%7D%20from%20scratch%2C%20you%20must%20first%20create%20a%20universe.%22%2C%0A%20%20%20%20%20%20%20%20PI%0A%20%20%20%20)%3B%0A%7D%0A
   content_markdown: >
     상수는 변수와 달리 곳곳에서 사용되는 공통된 값을 효율적으로 지정하는 데 사용됩니다.
-    
+
 
     변수와 같은 곳에서 값이 복사되는 대신, 상수는 컴파일 시간에 사용되는 위치에서 직접 값을 대체합니다.
 
@@ -153,12 +153,12 @@
 
 
     *배열*의 데이터 유형은 `[T;N]` 입니다.
-    
+
     (T는 요소의 유형이고, N은 컴파일 시간에 알려진 고정 길이)
 
 
     개별 요소는 `[x]` 연산자를 사용하여 가져올 수 있습니다.
-    
+
     여기서 x는 원하는 요소의 *usize* 인덱스(0부터 시작)입니다.
 
 
@@ -180,7 +180,7 @@
 
 
     힌트: 함수를 정의하는 경우, 해당 함수가 수신하는 데이터를 매개변수 (parameter)라고합니다.
-    
+
     그 함수를 호출하고 데이터를 전달하면 인수(argument)라고합니다.
 - title: Multiple Return Values
   code: >-
@@ -193,7 +193,7 @@
 
 
     Rust는 여러 형식의 destructuring을 지원합니다.
-    
+
     우리는 더 많은 형태로 볼 것이며, 이를 통해 데이터 구조의 하위 요소를 직관적으로 추출할 수 있습니다.
 - title: Returning Nothing
   content_markdown: >
@@ -211,7 +211,7 @@
     Rust의 기초는 그렇게 나쁘지 않죠?
 
     시스템 프로그래밍 언어로서, Rust는 메모리 내 값을 매우 신경쓰며,
-    
+
     수정이 가능한지 불가능한지 여부, 그리고 수학 연산이 의도한 대로 수행되는지 확인합니다.