Insert html code into markdown file

1

Is it possible to use HTML to supply what markdown does not support in its syntax?

For example, insert a video tag:

<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>

I know that viewing within the markdown is not possible but when exporting to html is there any possibility of the generated html recognizing the tags previously declared in the md? In my tests I did not get results.

    
asked by anonymous 30.11.2017 / 14:02

1 answer

2

I think most (probably none) can not upload a <iframe> , ie Youtube player will not work directly, what you can do is put a image with a link to the Youtube address, you can get the address of the image and video like this:

  • https://img.youtube.com/vi/<ID DO VIDEO>/0.jpg (returns the main video image / thumb)
  • https://www.youtube.com/watch?v=<ID DO VIDEO>

Usage example

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

Stack Overflow markdown test example

Code used:

[![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)

Test:

Example with markdown-it

This example is just for testing, I used the markdown-it library. (which is able to run inside the site's snippet stack):

//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><textareaid="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>
    
30.11.2017 / 15:03