使用来自markdown和django的javascript和代码渲染html答案

【问题标题】：Rendering html using javascript and code from markdown and django使用来自markdown和django的javascript和代码渲染html
【发布时间】：2016-03-27 18:55:59
【问题描述】：

我正在尝试创建一个使用 django 作为博客管理器的两列 html 页面。帖子正文有一个TextField，转换为markdown并发送到html：

class Post(models.Model):
    title = models.CharField(max_length=67, unique=True)
    body = models.TextField()
    body_md = models.TextField(editable=False, blank=True, null=True)
    def save(self):
        selft.body_md = markdown2.markdown(body, extras=['fenced-code-blocks'])

然后在模板正文中调用post：

{{ body_md|safe }}

这工作正常。但是，我试图将正文文本传递给一个 javascript 函数，该函数将文本分成两列，并在尊重某些边界的 html 页面中自动呈现。例如，两列中的文本可能有 300 像素的宽度和 800 像素的高度。

我面临的第一个问题是在使用 markdown 字段时无法使用 javascript 呈现文本。如果我使用：

<script type="text/javascript">
var html = "<div class='row'>" +
"<div class='content'> {{ body_md|safe }}</div>" +
"</div>";
document.write(html);
</script>

它不起作用。但是，如果我不使用像 {{ body_md|safe }} 这样的经过降价处理的文本，而是使用未处理的内容，比如标题 {{title}}。然后它会正确渲染。

欢迎任何帮助。

【问题讨论】：

标签： javascript python html django markdown

【解决方案1】：

您在这里遇到的问题是 safe 导致 Django 在您希望的 Javascript 中打印 body_md（新行和所有内容）。

所以要清楚你希望得到：

var html = "<div class='row'>" +
"<div class='content'><p>this is the first line</p>" +
"<p>this is the second line</p>" +
"</div>" +
"</div>";

但你实际上得到了

var html = "<div class='row'>" +
"<div class='content'><p>this is the first line</p>
<p>this is the second line</p>
</div>" +
"</div>";

这不是有效的 javascript。（提示，右键，查看页面源码）。

最简单的解决办法是：

<div id="hidden_body" style="display: none">{{ body_md|safe }}</div>
<script>
var hidden_body = document.getElementById("hidden_body").innerHTML;
var html = "<div class='row'>" +
"<div class='content'>" + hidden_body + "</div>" +
"</div>";
document.write(html);

顺便说一句，markdown2 非常慢，misaka 是一个不错的选择。

【讨论】：