Construir um Conversor de Markdown para HTML

Instruções

Construir um Conversor de Markdown para HTML

Markdown é uma linguagem de marcação usada para adicionar elementos de formatação a documentos de texto simples. Para este laboratório, todo o HTML e CSS foram fornecidos para você. Você usará JavaScript para completar o aplicativo Conversor de Markdown para HTML para que ele possa lidar com a conversão de construções básicas de Markdown em elementos HTML. Nota: O resultado final não será um conversor completo de Markdown para HTML, mas você pode adicionar funcionalidades extras a ele se desejar. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter uma função chamada convertMarkdown que não recebe parâmetros. 1. A função convertMarkdown deve usar expressões regulares para converter a entrada markdown de #markdown-input em HTML e deve retornar uma string contendo o código HTML. 1. A função convertMarkdown deve converter títulos de nível um, dois e três nos elementos correspondentes h1, h2 e h3. Um título em markdown é indicado por tantos caracteres # quanto seu nível seguido de um espaço e do texto do título. Os caracteres # devem ser colocados no início da linha: pode haver espaços mas nenhum outro caractere antes deles. 1. A função convertMarkdown deve converter texto em negrito em elementos strong. O texto em negrito no markdown é indicado por um par de dois asteriscos duplos ou um par de dois underscores duplos envolvendo o texto. 1. A função convertMarkdown deve converter texto *itálico* em elementos em. Texto *itálico* em markdown é indicado por um par de asteriscos ou um par de underscores envolvendo o texto. 1. A função convertMarkdown deve converter imagens em elementos img. Uma imagem em markdown é indicada por ![texto-alt](fonte-da-imagem), onde texto-alt é o valor do atributo alt e fonte-da-imagem é o valor do atributo src. 1. A função convertMarkdown deve converter links em elementos de âncora. Um link em markdown é indicado por [texto do link](URL), onde texto do link é o texto a ser incluído dentro das tags de âncora e URL é o valor do atributo href. 1. A função convertMarkdown deve converter aspas em elementos blockquote. Uma citação em markdown é indicada por um > seguido de um espaço e o texto da citação. The > character should be placed at the beginning of the line: there can be spaces but no other characters before it. 1. Quando você insere texto dentro de #markdown-input, o código HTML bruto retornado por convertMarkdown deve ser exibido dentro de #html-output. 1. Quando você insere texto dentro de #markdown-input, o código HTML retornado por convertMarkdown deve ser renderizado dentro de #preview. Nota: você deve trabalhar com o evento input para este projeto. Aqui está uma tabela contendo todo o markdown que convertMarkdown deve ser capaz de processar e o HTML esperado após a conversão: <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> Nota: Certifique-se de vincular seu arquivo JavaScript no seu HTML.

O que fazer:

Testes:

Você deve ter uma função chamada `convertMarkdown`.
Quando o valor de `#markdown-input` for `# título 1`, `convertMarkdown()` deve retornar `<h1>título 1</h1>`.
Quando o valor de `#markdown-input` for `# título 1`, `<h1>título 1</h1>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `# título 1`, um elemento `h1` com o texto `título 1` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `some text # title 1`, `convertMarkdown()` não deve converter `# title 1` em um elemento `h1`.
Quando o valor de `#markdown-input` for `# título 1` seguido por `# título alternativo` em uma nova linha, `convertMarkdown()` deve retornar `<h1>título 1</h1><h1>título alternativo</h1>`.
Quando o valor de `#markdown-input` for `## título 2`, `convertMarkdown()` deve retornar `<h2>título 2</h2>`.
Quando o valor de `#markdown-input` for `## título 2`, `<h2>título 2</h2>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `## título 2`, um elemento `h2` com o texto `título 2` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `some text ## title 2`, `convertMarkdown()` não deve converter `## title 2` em um elemento `h2`.
Quando o valor de `#markdown-input` for `## título 2` seguido por `## título 2 alt` em uma nova linha, `convertMarkdown()` deve retornar `<h2>título 2</h2><h2>título 2 alt</h2>`.
Quando o valor de `#markdown-input` for `### título 3`, `convertMarkdown()` deve retornar `<h3>título 3</h3>`.
Quando o valor de `#markdown-input` for `### título 3`, `<h3>título 3</h3>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `### title 3`, um elemento `h3` com o texto `title 3` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `some text ### title 3`, `convertMarkdown()` não deve converter `### title 3` em um elemento `h3`.
Quando o valor de `#markdown-input` for `### título 3` seguido de `### terceiro título` em uma nova linha, `convertMarkdown()` deve retornar `<h3>título 3</h3><h3>terceiro título</h3>`.
Quando o valor de `#markdown-input` for `**este texto está em negrito**`, `convertMarkdown()` deve retornar `<strong>este texto está em negrito</strong>`.
Quando o valor de `#markdown-input` for `**isto está em negrito**`, `<strong>isto está em negrito</strong>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `**isto está em negrito**`, um elemento `strong` com o texto `isto está em negrito` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `**este é negrito**` seguido por `**este também é negrito**` em uma nova linha, `convertMarkdown()` deve retornar `<strong>este é negrito</strong><strong>este também é negrito</strong>`.
Quando o valor de `#markdown-input` for `__isto está em negrito__`, `<strong>isto está em negrito</strong>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `__isto está em negrito__`, um elemento `strong` com o texto `isto está em negrito` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `__este é negrito__` seguido por `__este também é negrito__` em uma nova linha, `convertMarkdown()` deve retornar `<strong>este é negrito</strong><strong>este também é negrito</strong>`.
Quando o valor de `#markdown-input` for `*isto está em itálico*`, `convertMarkdown()` deve retornar `<em>isto está em itálico</em>`.
Quando o valor de `#markdown-input` for `*isto está em itálico*`, `<em>isto está em itálico</em>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `*isto está em itálico*`, um elemento `em` com o texto `isto está em itálico` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `*este é itálico*` seguido por `*este também é itálico*` em uma nova linha, `convertMarkdown()` deve retornar `<em>este é itálico</em><em>este também é itálico</em>`.
Quando o valor de `#markdown-input` for `_isto está em itálico_`, `convertMarkdown()` deve retornar `<em>isto está em itálico</em>`.
Quando o valor de `#markdown-input` for `_isto está em itálico_`, `<em>isto está em itálico</em>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `_isto está em itálico_`, um elemento `em` com o texto `isto está em itálico` deve ser adicionado como filho de `#preview`.
Quando o valor de `#markdown-input` for `_isto está em itálico_` seguido por `_isto também está em itálico_` em uma nova linha, `convertMarkdown()` deve retornar `<em>isto está em itálico</em><em>isto também está em itálico</em>`.
Quando o valor de `#markdown-input` for `# **title 1**` ou `# __title 1__`, `convertMarkdown()` deve retornar `<h1><strong>title 1</strong></h1>`.
Quando o valor de `#markdown-input` for `# **title 1**` ou `# __title 1__`, `<h1><strong>title 1</strong></h1>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `# **title 1**` ou `# __title 1__`, você define o HTML interno de `#preview` para `<h1><strong>title 1</strong></h1>`.
Quando o valor de `#markdown-input` for `![alt-text](image-source)`, `convertMarkdown()` deve retornar `<img alt="alt-text" src="image-source">`.
Quando o valor de `#markdown-input` for `![alt-text](image-source)`, `<img alt="alt-text" src="image-source">` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `![alt-text](image-source)`, `<img alt="alt-text" src="image-source">` deve ser anexado como um filho de `#preview`.
Quando o valor de `#markdown-input` for `![alt-text](image-source)` seguido por `![alt-text-2](image-source-2)` em uma nova linha, `convertMarkdown()` deve retornar `<img alt="alt-text" src="image-source"><img alt="alt-text-2" src="image-source-2">`.
Quando o valor de `#markdown-input` for `[link text](URL)`, `convertMarkdown()` deve retornar `<a href="URL">link text</a>`.
Quando o valor de `#markdown-input` for `[link text](URL)`, `<a href="URL">link text</a>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `[link text](URL)`, `<a href="URL">link text</a>` deve ser adicionado como um filho de `#preview`.
Quando o valor de `#markdown-input` for `[link text](URL)` seguido por `[link text 2](URL2)` em uma nova linha, `convertMarkdown()` deve retornar `<a href="URL">link text</a><a href="URL2">link text 2</a>`.
Quando o valor de `#markdown-input` for `> esta é uma citação`, `convertMarkdown()` deve retornar `<blockquote>esta é uma citação</blockquote>`.
Quando o valor de `#markdown-input` for `> isto é uma citação`, `<blockquote>isto é uma citação</blockquote>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `> this is a quote`, `<blockquote>this is a quote</blockquote>` deve ser anexado como um filho de `#preview`.
Quando o valor de `#markdown-input` for `> esta é uma citação` seguido por `> esta é outra citação` em uma nova linha, `convertMarkdown()` deve retornar `<blockquote>esta é uma citação</blockquote><blockquote>esta é outra citação</blockquote>`.
Quando o valor de `#markdown-input` for `some text > not a quote anymore`, `convertMarkdown()` não deve converter `> not a quote anymore` em um elemento `blockquote`.
Quando o valor de `#markdown-input` for `> **this is a *quote***`, `convertMarkdown()` deve retornar `<blockquote><strong>this is a <em>quote</em></strong></blockquote>`.
Quando o valor de `#markdown-input` for `> **este é um *citação***`, `<blockquote><strong>este é um <em>citação</em></strong></blockquote>` deve ser exibido dentro de `#html-output`.
Quando o valor de `#markdown-input` for `> **this is a *quote***`, você deve definir o HTML interno de `#preview` como `<blockquote><strong>this is a <em>quote</em></strong></blockquote>`.
Você deve ter apenas um elemento `script` no seu HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Markdown to HTML Converter</h1>
    <div id="container">
        <div class="container">
            <h2>Markdown Input:</h2>
            <textarea id="markdown-input" placeholder="Enter your markdown here..."></textarea>
        </div>
        <div class="container">
            <h2>Raw HTML Output:</h2>
            <div id="html-output"></div>
        </div>
        <div class="container">
            <h2>HTML Preview:</h2>
            <div id="preview"></div>
        </div>
    </div>
</body>

</html>

* {
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
}
 #markdown-input {
     width: 100%;
     height: 100px;
}
 #html-output, #preview {
     height: 100px;
     display: inline-block;
     width: 100%;
     border: 1px solid #ccc;
     padding: 10px;
     margin: auto;
     white-space: pre-wrap;
     background-color: #f9f9f9;
}
 @media (min-width: 600px) {
     #markdown-input, #html-output, #preview {
         height: 200px;
         margin: 0;
    }
     #container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
    }
}

Preview