Insert html code into markdown file

Asked

Viewed 973 times

1

It is 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 inside the markdown is not possible but when exporting to html there is possibility of generated html recognize the tags previously declared in the Md file?
In my tests I did not get results.

  • 1

    Did the answer help? Was something missing, or was it unclear? Could you give feedback?

1 answer

2

I believe that most (probably none) cannot embark a <iframe>, that is to say Youtube player it won’t work directly, what you can do is put an image with a link to the Youtube address, you can get the address of the image and the video like this:

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

Example of use

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

Sample test with Stack Overflow markdown

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)

Testing:

GeekWire Summit: Joel Spolsky, CEO of Stack Overflow


Example with markdown-it

This example is just for testing, I used the library markdown-it (that 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>

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.