Bootstrap markdown not working - html

Question

Hey guys I am trying to use this: http://www.codingdrama.com/bootstrap-markdown/
. I am using the Ionic framework and working on a single page web application.
This are the includes in the header of my index.html:
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- JQuery animated scrolling plugin -->
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- MARKDOWN -->
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Currently, I am running this example from the website:
<form>
<input name="title" type="text" placeholder="Title?" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox"> Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
Unfortunately, the outcome is nothing like the example. I just see a blank form that is not even close to the expected output.
I have also tried the includes(first 4 lines) from this example: http://bootsnipp.com/snippets/99r9D . However, I am still having no luck. Can anyone who has experience with this bootstrap plugin help me out?
This is what I see:

Answer 1

Please check the below snippet. Its working for me,
Submit button may not work here because of permission issue. ,
Added some extra style to show the checkbox properly.
.checkbox {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form>
<input name="title" type="text" placeholder="Title?" class="form-control" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox">Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
</form

Answer 2

Try this code.it works with preview.
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
<script src="https://use.fontawesome.com/f9b4728164.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://www.codingdrama.com/bootstrap-markdown/js/to-markdown.js"></script>
<script src="http://www.codingdrama.com/bootstrap-markdown/js/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<form>
<textarea id="myEditor" name="content" data-provide="markdown" rows="10">
</textarea>
</form>