feat(core): correct markdown formatting for KB articles

ref: #270

app/project-static/content.css

@@ -43,7 +43,7 @@ refactored
 }
 
 
-#content-body form#dynamic-form div {
+#content-body form#dynamic-form div:not(#markdown) {
   align-items: center;
   display: block;
   line-height: inherit;
@@ -199,7 +199,7 @@ main section a:visited {
 
 }
 
-article div {
+article div:not(.codehilite) {
   /* background-color: #ff0000; */
   justify-content: center;
   width: 100%;

app/project-static/ticketing.css

@@ -581,8 +581,20 @@
     margin: 0px 5px 0px 5px;
 }
 
+div#markdown {
+    justify-content: center;
+    display: block;
+    text-align: left;
+    padding: 10px;
+}
+#markdown .codehilite {
+    display: block;
+    width: 100%;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
 
-#ticket-content #markdown h1 {
+#markdown h1 {
     background-color: inherit;
     color: inherit;
     font-size: 24px;
@@ -594,7 +606,7 @@
 }
 
 
-#ticket-content #markdown h2 {
+#markdown h2 {
     background-color: inherit;
     color: inherit;
     font-size: 20px;
@@ -606,7 +618,7 @@
 }
 
 
-#ticket-content #markdown h3 {
+#markdown h3 {
     background-color: inherit;
     color: inherit;
     font-size: 18px;
@@ -618,7 +630,7 @@
 }
 
 
-#ticket-content #markdown h4 {
+#markdown h4 {
     background-color: inherit;
     color: #000;
     font-size: 16px;
@@ -630,7 +642,7 @@
 }
 
 
-#ticket-content #markdown h5 {
+#markdown h5 {
     background-color: inherit;
     color: #000;
     font-size: 14px;
@@ -642,7 +654,7 @@
 }
 
 
-#ticket-content #markdown li {
+#markdown li {
     background-color: inherit;
     font-size: 14px;
     line-height: 25px;
@@ -654,7 +666,7 @@
 
 
 
-#ticket-content #markdown p:not(div.admonition p){
+#markdown p:not(div.admonition p){
     background-color: inherit;
     font-size: inherit;
     line-height: 25px;
@@ -691,6 +703,15 @@
     width: 100%;
 }
 
+#markdown div.admonition.info {
+    background-color: #b6f5dd;
+    border-color:#27ffbe;
+}
+
+#markdown div.admonition.info p.admonition-title {
+    background-color: #1ef59170;
+}
+
 #markdown div.admonition.note {
     background-color: #b6d3f5;
     border-color:#278cff;

app/templates/content/field.html.j2

@@ -2,6 +2,11 @@
 {% load markdown %}
 {% load choice_ids %}
 
+{% block additional-stylesheet %}
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'ticketing.css' %}">
+{% endblock additional-stylesheet %}
+
 {% if field.widget_type == 'textarea' or field.label == 'Notes' %}
 
     {% if field.name in section.json and field.value %}
@@ -17,7 +22,7 @@
                 {{ field.label }}
                 </label>
 
-                <div style="display: inline-block; text-align: left;">
+                <div id="markdown"  style="display: inline-block; text-align: left;">
                     {% if field.value %}
                     {{ field.value | markdown | safe }}
                     {% else %}
@@ -30,7 +35,7 @@
 
             {% if field.value %}
 
-                <div style="display:block; width: 95%; text-align: left;">{{ field.value | markdown | safe }}</div>
+                <div id="markdown">{{ field.value | markdown | safe }}</div>
 
             {% else %}
 

docs/projects/centurion_erp/user/core/markdown.md

@@ -44,6 +44,8 @@ Available admonition types are:
 
 - note
 
+- info
+
 - tip
 
 - warning