improve markdown css

common/static/sass/_MdContent.sass

@@ -0,0 +1,65 @@
+.markdown-content
+    & blockquote
+        background: #f9f9f9;
+        border-left: 10px solid #ccc;
+        margin: 1.5em 10px;
+        padding: 0.5em 10px;
+        quotes: "\201C""\201D""\2018""\2019";
+
+    & blockquote:before
+        color: #ccc;
+        content: open-quote;
+        font-size: 4em;
+        line-height: 0.1em;
+        margin-right: 0.25em;
+        vertical-align: -0.4em;
+
+    & table
+        border: 1px solid #ccc;
+        border-collapse: collapse;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        table-layout: fixed;
+
+    & table caption
+        font-size: 1.5em;
+        margin: .5em 0 .75em;
+
+    & table tr
+        background-color: #eee;
+        border: 1px solid #ccc;
+        padding: .35em;
+
+    & table th, table td
+        padding: .625em;
+        border: 1px solid #ccc;
+
+    & table th
+        font-size: .85em;
+        letter-spacing: .1em;
+
+    & code
+        background: #333;
+        color: #ddd;
+        font-family: monospace;
+
+    & pre
+        background: #333;
+        color: #ddd;
+        font-family: monospace;
+        width: 100%;
+        overflow: auto;
+        overflow-y: hidden;
+        font-size: 12px;
+        line-height: 20px;
+
+    & ol, ul
+        padding-left: 3rem;
+
+    & li
+        list-style: unset;
+
+    & mark
+        background: unset;
+        text-decoration: underline;

common/static/sass/boofilsic.sass

@@ -26,9 +26,11 @@
 @import Modal
 @import Label
 
-// boofilsic modules    
+// boofilsic modules
 @import MainSection
 @import AsideSection
 @import SingleSection
-     
-@import Vendor
+
+@import Vendor
+
+@import MdContent

journal/forms.py

@@ -41,7 +41,7 @@ COLLABORATIVE_CHOICES = [
 class CollectionForm(forms.ModelForm):
     # id = forms.IntegerField(required=False, widget=forms.HiddenInput())
     title = forms.CharField(label=_("标题"))
-    brief = MarkdownxFormField(label=_("介绍 (Markdown)"))
+    brief = MarkdownxFormField(label=_("介绍 (Markdown)"), strip=False)
     # share_to_mastodon = forms.BooleanField(label=_("分享到联邦网络"), initial=True, required=False)
     visibility = forms.TypedChoiceField(
         label=_("可见性"),

journal/templates/collection.html

@@ -64,8 +64,9 @@
                   </div>
                 </div>
                 <!-- <div class="dividing-line"></div> --> <!-- <div class="entity-card__img-wrapper" style="text-align: center;"> <img src="{{ collection.cover|thumb:'normal' }}" alt="" class="entity-card__img"> </div> -->
-                {{ collection.html | safe }}
-
+                <div class="markdown-content">
+                  {{ collection.html | safe }}
+                </div>
               </div>
               <div class="entity-list" hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}" hx-trigger="load">
               </div>

journal/templates/collection_edit.html

@@ -24,7 +24,7 @@
       <section id="content" class="container">
         <div class="grid">
           <div class="single-section-wrapper" id="main">
-            <form class="entity-form" method="post" enctype="multipart/form-data">
+            <form class="entity-form markdown-content" method="post" enctype="multipart/form-data">
               {% csrf_token %}
               {{ form }}
               <input class="button" type="submit" value="{% trans '提交' %}">

journal/templates/review.html

@@ -63,7 +63,7 @@
                   </div>
                 </div>
                 <!-- <div class="dividing-line"></div> -->
-                <div id="rawContent">
+                <div class="markdown-content">
                   {{ review.html_content | safe }}
                 </div>
               </div>

journal/templates/review_edit.html

@@ -37,24 +37,18 @@
                   <span class="float-left">
                     {{ form.body.label }}
                   </span>
-                  <span class="float-right">
-                    <span class="review-form__preview-button">{% trans '预览' %}</span>
-                  </span>
                 </div>
-                <div id="rawContent">
+                <div class="markdown-content">
                   {{ form.body }}
                 </div>
+                <hr>
                 <div>
                 <label for="leading_space" style="display: inline;">
-                  <input type="checkbox" name="leading_space" value="1" id="leading_space" checked> 保留行首空格（替换为全角）
+                  <input type="checkbox" name="leading_space" value="1" id="leading_space" checked> 转换行首空格为全角
                 </label>
-                <span class="review-form__fyi">
-                  {% trans '不知道什么是Markdown？可以参考' %}<a target="_blank" href="https://www.markdownguide.org/">{% trans '这里' %}</a>
-                </span>
                 </div>
                 <div class="review-form__option">
                   <div class="review-form__visibility-radio">
-
                     {{ form.visibility.label }}{{ form.visibility }}
                   </div>
                   <div class="review-form__share-checkbox">

journal/views.py

@@ -438,8 +438,8 @@ def review_edit(request, item_uuid, review_uuid=None):
                 form.instance.created_time = mark_date
             if request.POST.get("leading_space"):
                 form.instance.body = re.sub(
-                    r"^(\u2003*)( +)",
-                    lambda s: "\u2003" * ((len(s[2]) + 1) // 2 + len(s[1])),
+                    r"^(\u2003*)(  +)",
+                    lambda s: "\u2003" * (len(s[2]) // 2 + len(s[1])),
                     form.instance.body,
                     flags=re.MULTILINE,
                 )