Django marked 使用心得

簡單記錄一下。

之前稍微想刻一個自己的部落格來用,這時候會有將輸入的文字或圖片中帶有的tag
如<h1>a title</h1>
轉換為正確的格式的需求,所以需要使用marked來為我們完成這件事。

Markdown的git:
https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet

為此,這裡需要引入jquery(這裡使用jQuery Core 1.12.4)、marked、和bootstrap

這裡使用jQuery Core 1.12.4:
https://code.jquery.com/

可以灌入marked,但這裡直接插入他的cdn比較快。
https://cdnjs.com/libraries/marked
整理一下大概是下面的樣子。

    <script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript (這裡是bootstrap.min.js) --> 
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){
$(".content-markdown").each(function(){
var content = $(this).text()
console.log(content)
var markedContent = marked(content)
console.log(markedContent)
$(this).html(markedContent)
})
})
</script>

值得一提的是,

<div class='content-markdown'>{{ note.content }}</div>

<div class='content-markdown'>
{{ note.content }}
</div>

會跑出不一樣的結果,這裡的縮排(indentation)會導致render出不一樣的內容。
(會跑出<pre><code> </code></pre>之類的東西,但我沒去追code…)

有indentation
無indentation

略過一些東西,不過大guy4這樣。

Like what you read? Give Epicure1709 a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.