{% load staticfiles %}
{% if boostrap_cdn %}
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
{% endif %}
<script src="{% static "bootstrap_markdown/js/bootstrap-markdown.js" %}" type="text/javascript"></script>
{% if locale %}<script src="{% static locale %}" type="text/javascript"></script>{% endif %}
<script src="{% static "bootstrap_markdown/js/markdown.js" %}" type="text/javascript"></script>
<script src="{% static "bootstrap_markdown/js/to-markdown.js" %}" type="text/javascript"></script>
<link rel="stylesheet" href="{% static "bootstrap_markdown/css/bootstrap-markdown.min.css" %}">
<script type="text/javascript">
$(document).ready(function() {
    var opts = {
    autofocus: {{ opts.autofocus }},
    {% if "%" in opts.width %}width: "{{ opts.width }}",{% else %}width: {{ opts.width }},{% endif %}
    {% if "%" in opts.height %}height: "{{ opts.height }}",{% else %}height: {{ opts.height }},{% endif %}
    resize: "{{ opts.resize }}",
    iconlibrary: "{{ opts.icon }}",
    {% if opts.locale %}language: "{{ opts.locale }}",{% endif %}
    footer: "{{ opts.footer }}",
    fullscreen: {{ opts.fullscreen }}
    };
    $('#{{ id }}').markdown(opts);
});
</script>
{{ element }}