showdown creates wrong output

I am using the following example: html:

   <markdown>
# Hello World!
- Zeppelin
- That guy
- Kronos
    </markdown>

directive:

.directive('markdown', function($window) {
    var converter = new $window.Showdown.converter();
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    }

You can see an example of how this should work in jsFiddle: http://jsfiddle.net/8bENp/267/ (that's where I took it from)

But in my project, the line "element.html(htmlText)" does not return the wanted html with lists but just wraps "<pre> and <code>" around it instead. So the result is this:

<markdown><pre><code>                            # Hello World!
                            - Zeppelin
                            - That guy
                            - Kronos
</code></pre></markdown>

but should be

<markdown><h1 id="helloworld">Hello World!</h1>

<ul>
<li>Zeppelin</li>
<li>That guy</li>
<li>Kronos</li>
</ul></markdown>

I included exactly the same showdown-file:

http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js

Modules in my application are:

'ui.bootstrap',
    'frapontillo.bootstrap-switch',
    'angulartics',
    'angulartics.google.analytics',
    'uiGmapgoogle-maps'

Any idea, what can cause this behaviour? Any known incompatibility with one of my other modules?

DISCLAIMER: I'm showdown's current project leader.

---

first you should really use a new version of showdown as 0.3.1 is very outdated. https://github.com/showdownjs/showdown/releases

Also, showdown has an official angularjs module that takes care angular integration for you. https://github.com/showdownjs/ng-showdown

for a live example of showdown + ng-showdown you can check the demo http://showdownjs.github.io/demo/

---

for your specific question

Markdown is indentation sensible. the most likely problem with your code is that the text inside markdown tags is indented in relation to line start

for instance, this will not work:

<div>
    <div>
        <markdown>
        # Hello World!
        - Zeppelin
        - That guy
        - Kronos
        </markdown>
    </div>
</div>

while this will:

<div>
    <div>
        <markdown>
# Hello World!
- Zeppelin
- That guy
- Kronos
        </markdown>
    </div>
</div>