摊牌会产生错误的输出

Question

我正在使用以下示例： html:

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

指令：

.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);
        }
    }

您可以在 jsFiddle 中查看其工作原理的示例： http://jsfiddle.net/8bENp/267/ （那是我从那里拿走的）

但在我的项目中，行“element.html(htmlText)”并没有return想要的html列表，而只是包裹了“<pre>和<code> " 而不是在它周围。所以结果是这样的：

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

但应该是

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

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

我包含了完全相同的决战文件：

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

我的应用程序中的模块是：

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

知道什么会导致这种行为吗？与我的其他模块之一有任何已知的不兼容吗？

Answer 1

免责声明：我是摊牌的现任项目负责人。

首先你真的应该使用新版本的 showdown 因为 0.3.1 已经过时了。 https://github.com/showdownjs/showdown/releases

此外，showdown 有一个官方 angularjs 模块，可以为您处理 angular 集成。 https://github.com/showdownjs/ng-showdown

有关摊牌 + ng-showdown 的现场示例，您可以查看演示 http://showdownjs.github.io/demo/

针对您的具体问题

Markdown 的缩进很合理。您的代码最可能的问题是降价标签内的文本相对于行开始缩进

例如，这行不通：

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

而这将：

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

摊牌会产生错误的输出

showdown creates wrong output

javascript

angularjs

showdown