All Tracks/lab markdown to html converter/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build a Markdown to HTML Converter

Markdown is a markup language used to add formatting elements to plain-text documents. For this lab, all the HTML and CSS has been provided to you. You will use JavaScript to complete the Markdown to HTML Converter app so that it can handle the conversion of basic Markdown constructs into HTML elements. **Note:** The final result won't be a comprehensive Markdown to HTML converter, but you can add extra functionalities to it if you would like. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a function named `convertMarkdown` that takes no parameters. 1. The `convertMarkdown` function should use regular expressions to convert the markdown input from `#markdown-input` into HTML and should return a string containing the HTML code. 1. The `convertMarkdown` function should convert headings of level one, two, and three into the corresponding `h1`, `h2`, and `h3` elements. A heading in markdown is indicated by as many `#` character as its level followed by a space and the heading text. `#` characters should be placed at the beginning of the line: there can be spaces but no other characters before it. 1. The `convertMarkdown` function should convert bold text into `strong` elements. Bold text in markdown is indicated either by a pair of double asterisks or a pair of double underscores enclosing the text. 1. The `convertMarkdown` function should convert italic text into `em` elements. Italic text in markdown is indicated either by a pair of asterisks or a pair of underscores enclosing the text. 1. The `convertMarkdown` function should convert images into `img` elements. An image in markdown is indicated by `![alt-text](image-source)`, where `alt-text` is the value of the `alt` attribute and `image-source` is the value of the `src` attribute. 1. The `convertMarkdown` function should convert links into anchor elements. A link in markdown is indicated by `[link text](URL)`, where `link text` is the text to enclosed within the anchor tags and `URL` is the value of `href` attribute. 1. The `convertMarkdown` function should convert quotes into `blockquote` elements. A quote in markdown is indicated by a `>` followed by a space and the quote text. The `>` character should be placed at the beginning of the line: there can be spaces but no other characters before it. 1. When you input text inside `#markdown-input`, the raw HTML code returned by `convertMarkdown` should be displayed inside `#html-output`. 1. When you input text inside `#markdown-input`, the HTML code returned by `convertMarkdown` should be rendered inside `#preview`. Note: you should work with the `input` event for this project. Here's a table containing all the markdown that `convertMarkdown` should be able to handle and the expected HTML after conversion: <table> <thead> <tr> <th>Markdown</th> <th>HTML</th> </tr> </thead> <tbody> <tr> <td><code># heading 1</code></th> <td><code>&lth1&gtheading 1&lt/h1&gt</code></th> </tr> <tr> <td><code>## heading 2</code></th> <td><code>&lth2&gtheading 2&lt/h2&gt</code></th> </tr> <tr> <td><code>### heading 3</code></th> <td><code>&lth3&gtheading 3&lt/h3&gt</code></th> </tr> <tr> <td><code>**bold text**</code> or <code>__bold text__</code></th> <td><code>&ltstrong&gtbold text&lt/strong&gt</code></th> </tr> <tr> <td><code>*italic text*</code> or <code>_italic text_</code></th> <td><code>&ltem&gtitalic text&lt/em&gt</code></th> </tr> <tr> <td><code>![alt-text](image-source)</code></th> <td><code>&ltimg alt="alt-text" src="image-source"&gt</code></th> </tr> <tr> <td><code>[link text](URL)</code></th> <td><code>&lta href="URL"&gtlink text&lt/a&gt</code></th> </tr> <tr> <td><code>> quote</code></th> <td><code>&ltblockquote&gtquote&lt/blockquote&gt</code></th> </tr> </tbody> </table> **Note:** Be sure to link your JavaScript file in your HTML.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.