From cbf9873f2801c49d22ffdff78893ffa92f6820b5 Mon Sep 17 00:00:00 2001 From: Alfex4936 <ikr@kakao.com> Date: Sun, 19 Mar 2023 19:32:06 +0900 Subject: [PATCH] Update showdown conf --- docs/01_ko.html | 7 +--- docs/03_ko.html | 1 + docs/06_ko.html | 2 +- docs/15_ko.html | 4 +- docs/16_ko.html | 20 +++++----- docs/tour.css | 1 + frontend/generate.js | 39 +++++++++++++++++++- frontend/lessons/ko/chapter_0.yaml | 16 ++++---- frontend/lessons/ko/chapter_1.yaml | 59 ++++++++++++++++++------------ 9 files changed, 98 insertions(+), 51 deletions(-) diff --git a/docs/01_ko.html b/docs/01_ko.html index 6f2f19e..382c787 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 e041fcd..c4f7036 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 d875cf6..fb829f9 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 e1cafe9..e987c4c 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 2250b05..eca5df1 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 fd04673..b265057 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 755ec7d..057b698 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 21f0fcd..66762fd 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 401dd8b..0b8e402 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: >- -- GitLab