User render.scss for markdown preview

schickmacher/static/sass/project.scss

@@ -33,3 +33,7 @@ $red: #b94a48;
   border-color: $dark-pink;
   color: $red;
 }
+
+.markdownx-preview {
+  @import 'render';
+}

schickmacher/templates/base.html

@@ -19,10 +19,13 @@
 
     <!-- Latest compiled and minified Bootstrap CSS -->
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
 
 
     <!-- Your stuff: Third-party CSS libraries go here -->
     {% compress css %}
+     <link href="{% static 'css/pygmentize.css' %}" rel="stylesheet">
     <!-- This file stores project-specific CSS -->
 
     <link type="text/x-scss" href="{% static 'sass/project.scss' %}" rel="stylesheet">

schickmacher/templates/renderer/render_form.html

@@ -17,5 +17,7 @@
       {% csrf_token %}
       {{ form|crispy }}
   </form>
+  <div class="preview">
   {{ form.media }}
+  </div>
 {% endblock %}

schickmacher/templates/renderer/rendered.html

@@ -5,7 +5,7 @@
     <title>{{ title }}</title>
     {% compress css %}
     <link type="text/x-scss" href="{% static 'sass/render.scss' %}" rel="stylesheet">
-      <link href="{% static 'css/pygmentize.css' %}" rel="stylesheet">
+    <link href="{% static 'css/pygmentize.css' %}" rel="stylesheet">
     {% endcompress %}
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">