Added option to override the preview screen styling

README.md

@@ -143,6 +143,7 @@ easyMDE.value('New input for **EasyMDE**');
   - **strikethrough**: If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
   - **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
 - **placeholder**: If set, displays a custom placeholder message.
+- **previewClass**: A string or array of strings that will be applied to the preview screen when activated. Defaults to `"editor-preview"`.
 - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
 - **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`.
 - **promptTexts**: Customize the text used to prompt for URLs.
@@ -201,6 +202,10 @@ var editor = new EasyMDE({
 		underscoresBreakWords: true,
 	},
 	placeholder: "Type here...",
+	
+	previewClass: "my-custom-styling",
+	previewClass: ["my-custom-styling", "more-custom-styling"],
+	
 	previewRender: function(plainText) {
 		return customMarkdownParser(plainText); // Returns HTML from a custom parser
 	},

src/css/easymde.css

@@ -213,14 +213,12 @@
     content: 'characters: '
 }
 
-.editor-preview {
+.editor-preview-full {
-    padding: 10px;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    background: #fafafa;
     z-index: 7;
     overflow: auto;
     display: none;
@@ -228,13 +226,11 @@
 }
 
 .editor-preview-side {
-    padding: 10px;
     position: fixed;
     bottom: 0;
     width: 50%;
     top: 50px;
     right: 0;
-    background: #fafafa;
     z-index: 9;
     overflow: auto;
     display: none;
@@ -251,21 +247,22 @@
     display: block
 }
 
-.editor-preview > p,
+.editor-preview {
-.editor-preview-side > p {
+    padding: 10px;
+    background: #fafafa;
+}
+
+.editor-preview > p {
     margin-top: 0
 }
 
-.editor-preview pre,
+.editor-preview pre {
-.editor-preview-side pre {
     background: #eee;
     margin-bottom: 10px;
 }
 
 .editor-preview table td,
-.editor-preview table th,
+.editor-preview table th {
-.editor-preview-side table td,
-.editor-preview-side table th {
     border: 1px solid #ddd;
     padding: 5px;
 }

src/js/easymde.js

@@ -818,9 +818,23 @@ function togglePreview(editor) {
     var toolbar_div = wrapper.previousSibling;
     var toolbar = editor.options.toolbar ? editor.toolbarElements.preview : false;
     var preview = wrapper.lastChild;
-    if (!preview || !/editor-preview/.test(preview.className)) {
+    if (!preview || !/editor-preview-full/.test(preview.className)) {
+
         preview = document.createElement('div');
-        preview.className = 'editor-preview';
+        preview.className = 'editor-preview-full';
+
+        if (editor.options.previewClass) {
+
+            if (Array.isArray(editor.options.previewClass)) {
+                for (var i = 0; i < editor.options.previewClass.length; i++) {
+                    preview.className += (' ' + editor.options.previewClass[i]);
+                }
+
+            } else if (typeof editor.options.previewClass === 'string') {
+                preview.className += (' ' + editor.options.previewClass);
+            }
+        }
+
         wrapper.appendChild(preview);
     }
     if (/editor-preview-active/.test(preview.className)) {
@@ -1440,6 +1454,10 @@ function EasyMDE(options) {
         }
     }
 
+    // Editor preview styling class.
+    if (!Object.prototype.hasOwnProperty.call(options, 'previewClass')) {
+        options.previewClass = 'editor-preview';
+    }
 
     // Handle status bar
     if (!Object.prototype.hasOwnProperty.call(options, 'status')) {
@@ -1772,6 +1790,19 @@ EasyMDE.prototype.createSideBySide = function () {
     if (!preview || !/editor-preview-side/.test(preview.className)) {
         preview = document.createElement('div');
         preview.className = 'editor-preview-side';
+
+        if (this.options.previewClass) {
+
+            if (Array.isArray(this.options.previewClass)) {
+                for (var i = 0; i < this.options.previewClass.length; i++) {
+                    preview.className += (' ' + this.options.previewClass[i]);
+                }
+
+            } else if (typeof this.options.previewClass === 'string') {
+                preview.className += (' ' + this.options.previewClass);
+            }
+        }
+
         wrapper.parentNode.insertBefore(preview, wrapper.nextSibling);
     }