diff --git a/docs/01_ko.html b/docs/01_ko.html
index 6f2f19e201a553bbd75db54e0037a8404ab3df24..382c78768ddd584789ea289b59a1a719b8336dd2 100644
--- a/docs/01_ko.html
+++ b/docs/01_ko.html
@@ -36,12 +36,7 @@
             </div>
             <div class="page">
             <h1>Rust 언어 소개</h1>
-            <div align="center">
-<p>
-    <img src="https://user-images.githubusercontent.com/2356749/223437049-ef50db6b-1ba4-4087-b67f-efeca5569201.png" alt="Rust logo" style="width: 20%; margin-bottom: 20px; border-radius: 10px;">
-</p>
-<h3>Rust official logo</h3>
-</div>
+            <div align="center"><p><img src="https://user-images.githubusercontent.com/2356749/223437049-ef50db6b-1ba4-4087-b67f-efeca5569201.png" alt="NO IMG" style="width: 20%; margin-bottom: 20px; border-radius: 10px;"></p><h3>Rust official logo</h3></div>
 <blockquote>
   <p>I burnt out; ran out of emotional energy to be effective in my role as technical lead for the project mid way through 2013 (at the tail end of my divorce, and while recovering from a surgery -- not a great time in my life), so I took a break, switched off the Rust team - Graydon Hoare</p>
 </blockquote>
diff --git a/docs/03_ko.html b/docs/03_ko.html
index e041fcdd651ae5d337744775bb615bfd62901da8..c4f70367a129c87654ae96418d7e885994dfce78 100644
--- a/docs/03_ko.html
+++ b/docs/03_ko.html
@@ -39,6 +39,7 @@
             <p><a href="https://rustup.rs/" target="_blank" rel="noopener">https://rustup.rs/</a></p>
 <p><a href="https://visualstudio.microsoft.com/ko/visual-cpp-build-tools/" target="_blank" rel="noopener"><code>Microsoft C++ Build Tools</code></a></p>
 <p><a href="https://www.rust-lang.org/tools/install" target="_blank" rel="noopener">@Link</a></p>
+<pre><code class="bash">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
 <div align="center">
 <p>
     <img src="https://user-images.githubusercontent.com/2356749/223654372-637cbfd5-06f3-4c20-b97c-aefcdbbdafe6.png">
diff --git a/docs/06_ko.html b/docs/06_ko.html
index d875cf6837880ff40f689b8e4d2b632c59fd2274..fb829f93a3b8fcccf42e33e3d668a24b69089f81 100644
--- a/docs/06_ko.html
+++ b/docs/06_ko.html
@@ -53,7 +53,7 @@ fn main() {
     {
         ::std::io::_print(format_args!("Welcome to the playground! You can modify the code in here.\n"));
     };
-} </code></pre>
+}</code></pre>
             <div class="bottomnav">
                 <span class="back"><a href="chapter_1_ko.html" rel="prev">❮ 이전</a></span>
                 <span class="next"><a href="07_ko.html" rel="next">다음 ❯</a></span>
diff --git a/docs/15_ko.html b/docs/15_ko.html
index e1cafe9ad0a24067b8ce34b2a35ac1c7540195ec..e987c4c1d9dcb43131468db7a3404c7d685f3ae1 100644
--- a/docs/15_ko.html
+++ b/docs/15_ko.html
@@ -48,7 +48,7 @@
         42 => println!("인생, 우주, 그리고 모든 것에 대한 답"),
         _ => println!("숫자는 다른 것입니다"),
     }
-} </code></pre>
+}</code></pre>
 <p>여기서는 number 변수의 값을 여러 패턴과 비교합니다.</p>
 <p><code>_</code> 패턴은 이전 패턴에서 명시적으로 다루지 않은 모든 값을 매치하는 <code>catch-all</code> 패턴입니다.</p>
 <pre><code class="rust">fn classify_age(age: u8) {
@@ -62,7 +62,7 @@
 fn main() {
     let age = 25;
     classify_age(age);
-} </code></pre>
+}</code></pre>
 <p>이 예제에서는 match 표현식을 사용하여 나이를 그룹으로 분류하고,</p>
 <p>나이 변수와 매치하기 위해 범위를 패턴으로 사용합니다.</p>
             <div class="bottomnav">
diff --git a/docs/16_ko.html b/docs/16_ko.html
index 2250b051bab6bc96fcdc525ea2495f790a3fd082..eca5df1157fe1c75b9a497d85705699f659a9f10 100644
--- a/docs/16_ko.html
+++ b/docs/16_ko.html
@@ -42,10 +42,10 @@
 <pre><code class="rust">struct Person {
   name: String,
   age: u8,
-} </code></pre>
-<p>구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.
-예를 들면:</p>
-<pre><code class="rust">let person = Person { name: String::from("Alice"), age: 30 }; </code></pre>
+} %end
+구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.
+예를 들면:
+%rust% let person = Person { name: String::from("Alice"), age: 30 };</code></pre>
 <hr />
 <p><strong>열거형 (Enum)</strong></p>
 <p>열거형(enum, "enumeration"의 줄임말)은 고정된 명명된 값 집합인 "변종(variants)"을 가진 타입을 나타냅니다.</p>
@@ -55,12 +55,12 @@
   Active,
   Inactive,
   Pending,
-} </code></pre>
+}</code></pre>
 <p>열거형의 인스턴스를 생성하려면, 열거형 이름 뒤에 두 개의 콜론(<code>::</code>)과 변종 이름을 사용합니다.</p>
 <p>예를 들면:</p>
-<pre><code class="rust">let status = Status::Active; </code></pre>
+<pre><code class="rust">let status = Status::Active;</code></pre>
 <p>열거형 변종에 따라 다른 작업을 수행하려면 match 표현식을 사용할 수 있습니다:</p>
-<pre><code class="rust">let user_status = Status::Active; </code></pre>
+<pre><code class="rust">let user_status = Status::Active;</code></pre>
 <p>열거형을 다루려면, 종종 match 표현식을 사용하며, 이를 통해 열거형 변종에 따라 다른 작업을 수행할 수 있습니다:</p>
 <pre><code class="rust">fn print_status_message(status: Status) {
     match status {
@@ -72,7 +72,7 @@
 fn main() {
     let user_status = Status::Active;
     print_status_message(user_status);
-} </code></pre>
+}</code></pre>
 <hr />
 <p><strong>Tuple Struct, Enum</strong></p>
 <p>주로 간결한 표현, 타입 안전성 및 논리적 구조를 위해 사용됩니다.</p>
@@ -105,7 +105,7 @@ fn main() {
         Shape::Circle(radius) => println!("원의 반지름: {}", radius),
         _ => (),
     }
-} </code></pre>
+}</code></pre>
 <hr />
 <p><strong>Nested</strong>
 중첩된 Struct과 Enum을 만들고 싶다면?</p>
@@ -143,7 +143,7 @@ fn main() {
         species: String::from("개"),
         is_domestic: true,
     };
-} </code></pre>
+}</code></pre>
             <div class="bottomnav">
                 <span class="back"><a href="15_ko.html" rel="prev">❮ 이전</a></span>
                 <span class="next"><a href="17_ko.html" rel="next">다음 ❯</a></span>
diff --git a/docs/tour.css b/docs/tour.css
index fd046732ba0803abc2f5855348560d8d68d2281c..b265057727acd872a65f574826e15471faf888c4 100644
--- a/docs/tour.css
+++ b/docs/tour.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
 
 a {
   color: #1e90ff;
diff --git a/frontend/generate.js b/frontend/generate.js
index 755ec7dfc5951d0f393f6e676de521a81d13a677..057b69894b1136a6f732678c620359226d151123 100644
--- a/frontend/generate.js
+++ b/frontend/generate.js
@@ -5,6 +5,39 @@ const yaml = require("js-yaml");
 const lessonSource = process.argv[2];
 const targetDir = process.argv[3];
 
+showdown.extension("rust", function () {
+  return [
+    {
+      type: "lang",
+      regex: /%rust%([^]+?)%end%/gi,
+      replace: function (s, match) {
+        return '<pre><code class="rust">' + match.trim() + "</code></pre>";
+      },
+    },
+  ];
+});
+
+showdown.extension("centerImage", function () {
+  return [
+    {
+      type: "lang",
+      regex: /%center\s*-\s*([^\s%]+)(?:\s*,\s*([^%\n]+))?\s*%/gi,
+      replace: function (s, src, subtitle) {
+        var html =
+          '<div align="center">' +
+          '<p><img src="' +
+          src +
+          '" alt="NO IMG" style="width: 20%; margin-bottom: 20px; border-radius: 10px;"></p>';
+        if (subtitle) {
+          html += "<h3>" + subtitle.trim() + "</h3>";
+        }
+        html += "</div>";
+        return html;
+      },
+    },
+  ];
+});
+
 /**
  * @param {number} num
  * @returns {string}
@@ -90,7 +123,7 @@ const lessons = {
   pages,
 };
 
-const a_binder = [
+const aBinder = [
   {
     type: "output",
     regex: /(<a [^>]*)(>.*<\/a>)/g,
@@ -99,9 +132,11 @@ const a_binder = [
 ];
 
 const converter = new showdown.Converter({
-  extensions: [...a_binder],
+  extensions: [...aBinder, "rust", "centerImage"],
 });
 
+converter.setOption("parseImgDimensions", true);
+
 /**
  * @param {string[]} words
  * @param {string} lang
diff --git a/frontend/lessons/ko/chapter_0.yaml b/frontend/lessons/ko/chapter_0.yaml
index 21f0fcd7dc293317d04ebe7a60951c58004cad56..66762fd387cb7d0d91a5abf935fc990a4b98bd63 100644
--- a/frontend/lessons/ko/chapter_0.yaml
+++ b/frontend/lessons/ko/chapter_0.yaml
@@ -33,12 +33,7 @@
   code: >-
     https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&code=fn+main%28%29+%7B%0A++++%2F%2F+%EC%83%81%ED%99%A9%3A+%EC%86%8C%EC%9C%A0%EA%B6%8C+%EC%9D%B4%EC%A0%84%ED%95%98%EA%B8%B0%0A++++let+mut+x+%3D+String%3A%3Afrom%28%22hello%22%29%3B%0A++++let+y+%3D+x%3B+%2F%2F+x%EC%9D%98+%EC%86%8C%EC%9C%A0%EA%B6%8C%EC%9D%B4+y%EB%A1%9C+%EC%9D%B4%EC%A0%84%EB%90%A8%0A++++println%21%28%22%7B%7D%22%2C+y%29%3B+%2F%2F+%EA%B2%B0%EA%B3%BC%3A+hello%0A+++++++++++++++++++++++%2F%2F+println%21%28%22%7B%7D%22%2C+x%29%3B+%2F%2F+%EC%98%A4%EB%A5%98%3A+%60x%60%EC%9D%98+%EC%86%8C%EC%9C%A0%EA%B6%8C%EC%9D%B4+y%EB%A1%9C+%EC%9D%B4%EC%A0%84%EB%90%98%EC%96%B4+%EB%8D%94+%EC%9D%B4%EC%83%81+%EC%82%AC%EC%9A%A9%ED%95%A0+%EC%88%98+%EC%97%86%EC%9D%8C%0A%0A++++%2F%2F+%EC%83%81%ED%99%A9%3A+%EB%8C%80%EC%97%AC%ED%95%98%EA%B8%B0%0A++++let+v+%3D+vec%21%5B1%2C+2%2C+3%5D%3B%0A++++let+s+%3D+sum%28%26v%29%3B+%2F%2F+v%EB%A5%BC+%EB%B6%88%EB%B3%80%EC%9C%BC%EB%A1%9C+%EB%8C%80%EC%97%AC%ED%95%98%EA%B3%A0+%ED%95%A9%EA%B3%84%EB%A5%BC+%EA%B5%AC%ED%95%9C%EB%8B%A4.%0A++++println%21%28%22%7B%7D%22%2C+s%29%3B+%2F%2F+%EA%B2%B0%EA%B3%BC%3A+6%0A%0A++++let+k+%3D+v%3B%0A++++%2F%2F+println%21%28%22%7B%3A%23%3F%7D%22%2C+v%29%3B+%2F%2F+error%5BE0382%5D%3A+borrow+of+moved+value%3A+%60v%60%0A%7D%0A%0Afn+sum%28v%3A+%26Vec%3Ci32%3E%29+-%3E+i32+%7B%0A++++let+mut+result+%3D+0%3B%0A++++for+i+in+v+%7B%0A++++++++result+%2B%3D+*i%3B%0A++++%7D%0A++++result%0A%7D%0A
   content_markdown: |
-    <div align="center">
-    <p>
-        <img src="https://user-images.githubusercontent.com/2356749/223437049-ef50db6b-1ba4-4087-b67f-efeca5569201.png" alt="Rust logo" style="width: 20%; margin-bottom: 20px; border-radius: 10px;">
-    </p>
-    <h3>Rust official logo</h3>
-    </div>
+    %center - https://user-images.githubusercontent.com/2356749/223437049-ef50db6b-1ba4-4087-b67f-efeca5569201.png, Rust official logo%
 
     > I burnt out; ran out of emotional energy to be effective in my role as technical lead for the project mid way through 2013 (at the tail end of my divorce, and while recovering from a surgery -- not a great time in my life), so I took a break, switched off the Rust team - Graydon Hoare
 
@@ -129,7 +124,14 @@
 
     [`Microsoft C++ Build Tools`](https://visualstudio.microsoft.com/ko/visual-cpp-build-tools/)
 
-    [@Link](https://www.rust-lang.org/tools/install)
+    [@Rust lang Link](https://www.rust-lang.org/tools/install)
+
+    [@DOWNLOAD RUSTUP-INIT.EXE (64-BIT)](https://static.rust-lang.org/rustup/dist/x86_64-pc-windows-msvc/rustup-init.exe)
+
+    [@DOWNLOAD RUSTUP-INIT.EXE (32-BIT)](https://static.rust-lang.org/rustup/dist/i686-pc-windows-msvc/rustup-init.exe)
+
+
+    <pre><code class="bash">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
 
     <div align="center">
     <p>
diff --git a/frontend/lessons/ko/chapter_1.yaml b/frontend/lessons/ko/chapter_1.yaml
index 401dd8b595f1258db236a1b744f3a4826c6ce16b..0b8e402e99afddb44d95b8916345d289e06fcb6a 100644
--- a/frontend/lessons/ko/chapter_1.yaml
+++ b/frontend/lessons/ko/chapter_1.yaml
@@ -8,7 +8,9 @@
     Rust 언어 비공식이지만 거의 흔하게 쓰이는 마스코트, 게(crab)의 이름은 **Ferris** 입니다.
 
 
-    <pre><code class="rust">let ferris = crab!()</code></pre>
+    %rust%
+    let ferris = crab!()
+    %end%
 
 
     또한 Rust를 사용하거나, 기여하거나 관심이 있는 사람들을 **Rustacean**[러스테이션] 라고 부릅니다.
@@ -32,7 +34,8 @@
     (`cargo inspect` 명령어)
 
 
-    <pre><code class="rust">#![feature(prelude_import)]
+    %rust%
+    #![feature(prelude_import)]
 
 
     #[prelude_import]
@@ -50,7 +53,7 @@
             ::std::io::_print(format_args!("Welcome to the playground! You can modify the code in here.\n"));
         };
     }
-    </code></pre>
+    %end%
 
 - title: 변수
   code: >-
@@ -210,7 +213,8 @@
     그리고 첫 번째 일치하는 패턴에 해당하는 코드 블록을 실행합니다.
 
 
-    <pre><code class="rust">fn main() {
+    %rust%
+    fn main() {
         let number = 42;
 
         match number {
@@ -220,7 +224,7 @@
             _ => println!("숫자는 다른 것입니다"),
         }
     }
-    </code></pre>
+    %end%
 
     여기서는 number 변수의 값을 여러 패턴과 비교합니다.
 
@@ -228,7 +232,8 @@
     `_` 패턴은 이전 패턴에서 명시적으로 다루지 않은 모든 값을 매치하는 `catch-all` 패턴입니다.
 
 
-    <pre><code class="rust">fn classify_age(age: u8) {
+    %rust%
+    fn classify_age(age: u8) {
         match age {
             0..=12 => println!("어린이"),
             13..=19 => println!("청소년"),
@@ -241,7 +246,7 @@
         let age = 25;
         classify_age(age);
     }
-    </code></pre>
+    %end%
 
 
     이 예제에서는 match 표현식을 사용하여 나이를 그룹으로 분류하고,
@@ -260,18 +265,20 @@
 
     다음은 Person 구조체의 예입니다:
 
-    <pre><code class="rust">struct Person {
+    %rust%
+    struct Person {
       name: String,
       age: u8,
     }
-    </code></pre>
+    %end
 
     구조체의 인스턴스를 생성하려면, 구조체 이름 뒤에 중괄호를 사용하고 필드에 값을 할당합니다.
 
     예를 들면:
 
-    <pre><code class="rust">let person = Person { name: String::from("Alice"), age: 30 };
-    </code></pre>
+    %rust%
+    let person = Person { name: String::from("Alice"), age: 30 };
+    %end%
 
     ---
 
@@ -286,12 +293,13 @@
 
     다음은 Status 열거형의 예입니다:
 
-    <pre><code class="rust">enum Status {
+    %rust%
+    enum Status {
       Active,
       Inactive,
       Pending,
     }
-    </code></pre>
+    %end%
 
 
     열거형의 인스턴스를 생성하려면, 열거형 이름 뒤에 두 개의 콜론(`::`)과 변종 이름을 사용합니다.
@@ -299,17 +307,20 @@
 
     예를 들면:
 
-    <pre><code class="rust">let status = Status::Active;
-    </code></pre>
+    %rust%
+    let status = Status::Active;
+    %end%
 
     열거형 변종에 따라 다른 작업을 수행하려면 match 표현식을 사용할 수 있습니다:
 
-    <pre><code class="rust">let user_status = Status::Active;
-    </code></pre>
+    %rust%
+    let user_status = Status::Active;
+    %end%
 
     열거형을 다루려면, 종종 match 표현식을 사용하며, 이를 통해 열거형 변종에 따라 다른 작업을 수행할 수 있습니다:
 
-    <pre><code class="rust">fn print_status_message(status: Status) {
+    %rust%
+    fn print_status_message(status: Status) {
         match status {
             Status::Active => println!("사용자가 활성 상태입니다."),
             Status::Inactive => println!("사용자가 비활성 상태입니다."),
@@ -321,7 +332,7 @@
         let user_status = Status::Active;
         print_status_message(user_status);
     }
-    </code></pre>
+    %end%
 
     ---
 
@@ -337,7 +348,8 @@
 
     - 튜플 열거형 변종 (Tuple Enum Variants): 튜플 열거형 변종은 열거형의 각 변종에 데이터를 연관시키는 데 사용됩니다. 튜플 열거형 변종은 각 변종에 서로 다른 타입과 수의 값을 저장할 수 있습니다. 이러한 변종은 열거형의 다양한 경우를 명확하게 구분하고, 관련 데이터를 함께 저장하여 논리적 구조를 제공하는 데 유용합니다. 패턴 매칭을 사용하면 튜플 열거형 변종의 값을 안전하게 추출하고, 해당 값에 따라 다양한 작업을 수행할 수 있습니다.
 
-    <pre><code class="rust">// 튜플 구조체 (Tuple Struct)
+    %rust%
+    // 튜플 구조체 (Tuple Struct)
 
     struct Point3D(f32, f32, f32);
 
@@ -366,7 +378,7 @@
             _ => (),
         }
     }
-    </code></pre>
+    %end%
 
     ---
 
@@ -374,7 +386,8 @@
 
     중첩된 Struct과 Enum을 만들고 싶다면?
 
-    <pre><code class="rust">// 중첩된 구조체 (Nested Struct)
+    %rust%
+    // 중첩된 구조체 (Nested Struct)
 
     struct Address {
         street: String,
@@ -414,7 +427,7 @@
             is_domestic: true,
         };
     }
-    </code></pre>
+    %end%
 
 - title: Returning Nothing
   code: >-