diff --git a/app/src/components/MarkdownText.vue b/app/src/components/MarkdownText.vue index 2770f73..089ce97 100644 --- a/app/src/components/MarkdownText.vue +++ b/app/src/components/MarkdownText.vue @@ -31,11 +31,31 @@ const html = computed(() => { .markdown-content :deep(ol) { list-style: decimal; padding-left: 1em; + line-height: 1.2; } -.markdown-content :deep(code) { - background-color: #282a33; +.markdown-content :deep(ul) { + list-style: disc; + padding-left: 1em; + line-height: 1.2; +} +.markdown-content :deep(pre) { + background-color: #2e3440; + border-radius: 0.5rem; + padding: 0.5rem; + font-size: 0.9rem; + color: #d8dee9; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #4c566a; + line-height: 1.5; + font-family: 'monospace'; +} + +.markdown-content :deep(code:not(pre code)) { + background-color: #2e3440; border-radius: 0.25rem; - padding: 0.25rem; - font-size: 0.875rem; + padding: 0.2rem 0.4rem; + font-size: 0.9rem; + color: #d8dee9; + font-family: 'monospace'; } diff --git a/quests/cast/answer.sh b/quests/cast/answer.sh deleted file mode 100644 index 52942b0..0000000 --- a/quests/cast/answer.sh +++ /dev/null @@ -1,3 +0,0 @@ -echo start -echo example -echo How are you \ No newline at end of file diff --git a/quests/cast/game.yml b/quests/cast/game.yml deleted file mode 100644 index bb74680..0000000 --- a/quests/cast/game.yml +++ /dev/null @@ -1,64 +0,0 @@ -id: cast -image: base -title: 輸出文字 -instruction: | - 在這個關卡中,你將會學到: - 1. 如何使用 `echo` 在終端機上顯示文字。 - -requirements: - - get-started - -stages: - - id: start - name: 按下 `開始` 按鈕開始 - condition: - command: ^echo start$ - response: - content: | - 還記得第一關使用的指令 `echo` 嗎? - `echo` 指令可以將後方接續的文字輸出到終端機上。 - 例如你輸入 `echo Hello`,終端機就會顯示 `Hello`。 - 你可以試著輸入 `echo ` 並在後面加上一些文字,然後按下 Enter 鍵,就可以看到終端機上顯示了你剛才輸入的文字。 - hint: | - 輸入 `echo` 並在後面加上一些文字 - 例如:`echo example` - - - id: echo - name: 在終端機上顯示顯示任意文字 - requirements: - - start - condition: - command: ^echo .* - response: - content: | - 你應該可以看到終端機上顯示了你在 `echo` 指令後面的文字。 - 接下來,請你試著在終端機上顯示 `How are you?`。 - hint: | - 輸入 `echo How are you?` - - - id: END - name: 在終端機上顯示 `How are you?` - requirements: - - echo - condition: - command: ^echo [Hh]ow are you\??$ - exceptions: - - id: missing_echo - condition: - command: ^[Hh]ow are you\??$ - response: - type: narrative - content: | - 在 `How are you?` 前面必須加上 `echo` - - id: incomplete_command - condition: - command: ^echo$ - response: - type: narrative - content: | - 在 `echo ` 後面還需要加上 `How are you?` - response: - content: | - 你成功的在終端機上顯示了 `How are you?`。 - 相信你已經了解如何使用 `echo` 指令來顯示文字了。 - 之後如果要在終端機顯示文字,記得可以使用 `echo` 指令。 diff --git a/quests/get-started/game.yml b/quests/get-started/game.yml index 617e9a0..778e8db 100644 --- a/quests/get-started/game.yml +++ b/quests/get-started/game.yml @@ -3,9 +3,11 @@ image: base title: 終端機的基本知識 instruction: | 歡迎來到 Linux Odyssey! + 這個關卡是為了讓你熟悉終端機的基本操作。 在這個關卡中,你將會學到: 1. 如何使用這個網站 2. 如何使用終端機 + 3. 如何使用 `echo` 指令 stages: - id: start @@ -14,14 +16,11 @@ stages: command: ^echo start$ response: content: | - 在畫面的中下方的區塊是終端機,你可以在終端機裡輸入指令來操作電腦。 - 在終端機中,你所看到的 `commander:~ $` 叫做命令提示字串。 - 命令提示字串最後的錢字號 `$` 叫命令提示符,你必須將指令輸入在它的後方。 - 當你輸入完指令並按下 Enter 之後,終端機會執行你輸入的指令,並且會從終端機的下一行開始輸出指令的執行結果。 - 直到你看到新的 `commander:~ $` 出現時,代表你可以輸入下一個指令了。 - 現在請你輸入 `echo hello` 來看看會發生什麼事。 - hint: | - 在 `commander:~ $` 後面輸入 `echo hello` 並按下 Enter + 嗨,勇敢的冒險者! + 歡迎來到 Linux Odyssey!這是一場充滿終端機魔法的冒險之旅。 + 終端機就像是你的魔法杖,讓你用**文字咒語**來操控電腦,這可是成為程式大師的必備技能哦! + 在畫面中下方的區域就是你的魔法舞台——終端機,準備好施展你的第一個咒語了嗎? + 現在,請在下方輸入 `echo hello`,然後按下 Enter 鍵,看看會有什麼神奇的事情發生吧! - id: echo-hello name: 在終端機輸入 `echo hello` @@ -31,17 +30,25 @@ stages: command: ^echo hello$ response: content: | + 恭喜你完成了你的第一個指令! 你應該可以看到終端機上顯示了以下內容: ``` commander:~ $ echo hello hello ``` - 第一行的 `commander:~ $` 是命令提示字串,接在後方的 `echo hello` 是你輸入的指令。 - 第二行的 `hello` 則是終端機的輸出結果。 - 你現在知道了如何在終端機上輸入指令,以及查看終端機輸出的位置。 - 現在請輸入 `echo next` 來繼續下一個步驟。 + 看到 `commander:~ $` 的時候,代表電腦在等你輸入指令。 + 當你輸入 `echo hello` 後,電腦就會在下一行回答「hello」。 + + 指令就像是告訴電腦要做什麼的句子。 + 就像 `echo hello` 這個指令: + - `echo` 是在告訴電腦「請你說出」 + - `hello` 是要電腦說的內容 + 所以當你輸入 `echo hello` 時,電腦就會說出「hello」。 + + 好的,那接下來,請你試試讓終端機顯示 `next` 這個字串。 + 如果遇到困難,可以按下 `提示` 按鈕來獲得提示。 hint: | - 輸入 `echo next` 繼續下一個步驟 + 請輸入 `echo next` 來繼續下一個步驟。 - id: echo-next name: 在終端機輸入 `echo next` @@ -51,14 +58,11 @@ stages: command: ^echo next$ response: content: | - `Ctrl + C` 在終端機中是一個很重要的快捷鍵,它可以用來中斷正在執行的指令,並產生一個新的命令提示字串,讓你可以繼續輸入指令。 - 如果指令執行很久沒有反應,或你因為其他原因想要中斷指令,你可以按下 `Ctrl + C` 來中斷指令。 - 又或者你輸入了錯誤的指令,卻懶得慢慢刪除,你也可以按下 `Ctrl + C` 來產生新的命令提示字串重新輸入指令。 - 如果你已經理解了剛才的說明,請輸入 `echo finish` 來結束這一關。 - hint: | - 按下 `Ctrl + C` 能夠中斷正在執行的指令 - 按下 `Ctrl + C` 能夠產生新的命令提示字串 - 輸入 `echo finish` 來結束這一關 + 恭喜你學會了如何使用 `echo` 指令。 + 你可能會好奇,為什麼我們需要有這樣的指令。 + 雖然 `echo` 指令是個很簡單的指令,但它卻是許多指令的基礎。 + 在我們的冒險中,也常會使用 `echo` 指令來觸發事件。 + 那麼我們這個關卡就到此為止,請你輸入 `echo finish` 來結束這個關卡。 - id: END name: 結束關卡 @@ -69,3 +73,4 @@ stages: response: content: | 恭喜你,你已經完成了這個關卡! + 你已經學會了如何使用 `echo` 指令,並且了解了它的用途。