安裝django-markdownx

• Macos：直接pip install django-mrakdownx;Ubuntu需要先安裝pillow,參考此連結。
• 按照官方教程設定,不同的是本文markdownx的widget如下設定，在專案的templates根目錄下，建立markdownx資料夾，再建立widget.html,內容如下：

{% load staticfiles %}
<link rel="stylesheet" href="{%static "/css/bootstrap/3.3.7/bootstrap.min.css" %}">  

<div class
 
="markdownx row">
    <div class="col-md-6">
        {{ markdownx_editor }}
    </div>
    <div class="col-md-6">
        <div class="markdownx-preview"></div>
    </div>
</div>

• 若仍覺得操作不適，參照下文兩種方法選其一

A. 通過修改django改變editor和preview的樣式

1. 修改form.css

修改<python-package>/django/contrib/admin/static/admin/css/form.css

import sys
print sys.path

macos虛擬環境中的<python-package>是：/Users/johnsonlai/.virtualenvs/mySite/lib/python2.7/site-packages; Ubuntu 14.04的是：/usr/local/lib/python2.7/dist-packages。

1. .aligned ul中的``margin-left = 160``註釋掉，使得li標籤不會向右偏移160畫素
2. .aligned label中的``float = left``註釋掉，使label在上輸入框在下
3. .submit-row a.deletelink 中的``height = 15px``註釋掉，否則delete按鈕會顯示不全
 

2. 修改wdigets.py

修改<python-package>/django/forms/widgets.py中textarea中textarea的設定‘cols : 80’(預設40)，使輸入更加方便。

B. 通過在widget.html引入新的css改變樣式

widget.html中引入css

{% load staticfiles %}

<link rel="stylesheet" href="{%static "/css/self/jblog-admin.css" %}">  
...
<div class="markdownx row">
    <div class="col-md-6">
        {{ markdownx_editor }}
    </div>
    <div class="col-md-6">
        <div class="markdownx-preview"></div>
    </div>
</div>

jblog-admin.css內容如下:

.aligned ul
{
    margin-left: 0px;
}

.aligned label
{
    float: none;
}

textarea
{
    width: 100%;
}

C. 效果