1

É possível usar o HTML para suprir aquilo que o markdown não suporta na sua sintaxe?

Por exemplo, inserir uma tag de vídeo:

<div class="video">
    <iframe width="854" height="480" src="https://www.youtube.com/embed/QkqoNB_s77U" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

Eu sei que visualizar dentro do markdown não é possível mas, quando exportar para html há possibilidade do html gerado reconhecer as tags antes declaradas no arquivo md?
Nos meus testes não consegui resultado.

0

1 Resposta 1

3

Creio que a maioria (provavelmente nenhum) não possam embarcar um <iframe>, ou seja Youtube player não vai funcionar diretamente, o que você pode fazer é colocar uma imagem com um link para o endereço do Youtube, você pode pegar o endereço da imagem e do vídeo assim:

  • https://img.youtube.com/vi/<ID DO VIDEO>/0.jpg (retorna a imagem/thumb principal do vídeo)
  • https://www.youtube.com/watch?v=<ID DO VIDEO>

Exemplo de uso

[![descrição da imagem](https://img.youtube.com/vi/<ID DO VIDEO>/0.jpg)](https://www.youtube.com/watch?v=<ID DO VIDEO>)

Exemplo de teste com o markdown do Stack Overflow

Código usado:

[![GeekWire Summit: Joel Spolsky, CEO of Stack Overflow](https://img.youtube.com/vi/R1V8OUOb-Hw/0.jpg)](https://www.youtube.com/watch?v=R1V8OUOb-Hw)

Teste:

GeekWire Summit: Joel Spolsky, CEO of Stack Overflow


Exemplo com markdown-it

Este exemplo é só para efetuar testes, usei a biblioteca markdown-it (que é capaz de rodar dentro do stack snippet do site):

//Inicia o markdown
var mdit = window.markdownit();

var editor = document.getElementById("editor");
var preview = document.getElementById("preview");

document.getElementById("testar").onclick = function () {
   var resultado = mdit.render(editor.value);
   preview.innerHTML = resultado;   
};
#editor, #preview {
    width: 100%;
}

#editor {
    min-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.0/markdown-it.js"></script>

<textarea id="editor">
Lista numérica:

1. foo
1. bar
1. baz


## sub-titulo

`codigo` inline

Código por indetanção

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Bloco de código

```
código
```

[![GeekWire Summit: Joel Spolsky, CEO of Stack Overflow](https://img.youtube.com/vi/R1V8OUOb-Hw/0.jpg)](https://www.youtube.com/watch?v=R1V8OUOb-Hw)</textarea>
<button id="testar">Testar</button>
<hr>
<div id="preview"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .