devLib/mkd-conversor.html at main · devrenj/devLib · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/style/markdown.css">

  <!--Configurações de compartilhamento-->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Roberto Nóbrega Jr." />
  <meta property="og:description" content="Trabalhando com Markdown" />
  <meta property="og:url" content="http://www.renj.dev.br/DevLib/learning/markdown/index.html" />
  <meta property="og:image" content="https://raw.githubusercontent.com/devrenj/devrenj.github.io/main/1678917177849.jpg" />
  <meta name="theme-color" content="#fff" />

  <!-- Font Roboto: GOOGLE -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap" rel="stylesheet">
  <title>Trabalhando com Markdown</title>
</head>

<body>
  <main>
    <div  class="conteudo">
  <h1 class="tituloDaPagina">Try it!</h1><br>
  <div>
    <textarea id="input" placeholder="Digite seu texto em Markdown aqui..." rows="10" cols="30"></textarea>
    <section id="salvar">
      <label for="nomeArquivo">Nome do arquivo</label>
      <input type="text" id="nomeArquivo" size="15" required></input>
      <br>
      <button id="save-button">Salvar HTML</button>
    </section>
  </div>
    <div id="html-output"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
    <script>
        const nomeArquivo = document.getElementById('nomeArquivo');
        const input = document.getElementById('input');
        const htmlOutput = document.getElementById('html-output');
        const saveButton = document.getElementById('save-button');

        input.addEventListener('input', () => {
            const markdownText = input.value;
            const htmlText = marked(markdownText);
            htmlOutput.innerHTML = htmlText;
        });

        saveButton.addEventListener('click', () => {
            const markdownText = input.value;
            const htmlText = marked(markdownText);

            const blob = new Blob([htmlText], { type: 'text/html' });
            const url = URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.href = url;
            a.download = nomeArquivo.value + '.html'; // Correção aqui
            a.click();

            URL.revokeObjectURL(url);
        });
    </script>
    </div>
  </main>
</body>
</html>