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

Question

我正在尝试创建一个两列 html 页面，该页面使用 django 作为博客管理器。 post 的 body 有一个 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'])

然后在模板body中调用post：

{{ body_md|safe }}

一切正常。但是，我正在尝试将 body 文本传递给 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}}。然后它会正确呈现。

欢迎任何帮助。

Answer 1

你在这里遇到的问题是 safe 导致 Django 在你希望的 Javascript.[=16= 中打印 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 是一个不错的选择。

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

Rendering html using javascript and code from markdown and django

javascript

python

html

django

markdown