Wordpress plugin to enable Markdown Editor as in Stack Overflow with a customizable side preview
Auto-convert to Markdown using LGPL PHP library Markdownify.
Toolbar and shortcut keys using Pagedown and Pagedown-Extra similar to Stack Overflow.
Conversion to HTML using MIT JavaScript library Remarkable and custom plugin.
Generated HTML is sent to server, so no dubious conversion.
Changes are incrementally applied to preview window using LGPL JavaScript library diffDOM, highlighting elements affected by each change in Markdown code.
Preview is a Web Component with Shadow Dom isolation, providing styling isolation from the Admin page.
In order to customize preview Style, just add to current template the corresponding JavaScript and CSS files as follows:
/mmd-preview-editor.css
/mmd-preview-editor.js
Those files will be automatically included in the Preview Component.
Disable editor for specific posts and pages adding a custom field named my-markdown-disabled
with some value like 1
or true
.
You can listen to editor events using JavaScript event API.
Fires when preview window is updated
Event: previewComponentUpdated
Parameters:
element
: preview containercontent
: new content
this.dispatchEvent(new CustomEvent('previewComponentUpdated', { detail: {
'element': this.shadowRoot.querySelector('.mmd-preview-content'),
'content': content
}}));
//...
editorPreview.addEventListener('previewComponentUpdated', function(e) {
//do thing
});
Fires whenever there is a element that was identified to have been changed and has mmd-changed
css class in it.
Event: previewComponentElementChanged
Parameters:
element
: changed element
var changedElement = this.shadowRoot.querySelector('.mmd-changed');
if (changedElement) {
this.dispatchEvent(new CustomEvent('previewComponentElementChanged', { detail: {
'element': changedElement
}}));
}
Fires when source editor content has changed.
Event: markdownEditorContentChanged
Parameters:
html
: html generated by the convertertext
: Markdown text from editor
panels.input.dispatchEvent(new CustomEvent('markdownEditorContentChanged', { detail : {
html: converter.makeHtml(text),
text: text
}}));
Example:
<<<well
**Super** content!
>>>
Custom class:
<<<well:well-lg
**Super** content with extra space!
>>>
Example:
<<<alert
**Info** alert...
>>>
Custom type:
<<<alert:danger
**Danger** alert!
>>>
Custom class:
<<<alert:danger extra-class
**Danger** alert!
>>>
Just use @@
plus name as described in Bootstrap documentation.
Download icon example:
[@@download](http://download.com/file.zip)
Sometimes you want to escape content to be processed by Remarkable. One example is a wordpress shortcode.
You can achieve that starting a line with two exclamation points, as in this example:
!![embed]https://www.youtube.com/watch?v=SnAq9tbeRm4[/embed]
- Configure project properly to minify code
- Add TOC generation (?)
- Feature: new bootstrap markdown for labels (?)
- Make it possible to extend markdown without changing the plugin (?)