utluiz / my-markdown

Wordpress Markdown editor with better preview

My Markdown

Wordpress plugin to enable Markdown Editor as in Stack Overflow with a customizable side preview

Existent posts

Auto-convert to Markdown using LGPL PHP library Markdownify.

Editor

Toolbar and shortcut keys using Pagedown and Pagedown-Extra similar to Stack Overflow.

HTML generation

Conversion to HTML using MIT JavaScript library Remarkable and custom plugin.

Generated HTML is sent to server, so no dubious conversion.

Preview

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.

Disabling editor

Disable editor for specific posts and pages adding a custom field named my-markdown-disabled with some value like 1 or true.

Extending

You can listen to editor events using JavaScript event API.

Preview updated

Fires when preview window is updated

Event: previewComponentUpdated

Parameters:

• element: preview container
• content: new content

this.dispatchEvent(new CustomEvent('previewComponentUpdated', { detail: {
    'element': this.shadowRoot.querySelector('.mmd-preview-content'),
    'content': content
}}));

//...

editorPreview.addEventListener('previewComponentUpdated', function(e) {
    //do thing
});

Changed element

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
    }}));
}

Editor was changed

Fires when source editor content has changed.

Event: markdownEditorContentChanged

Parameters:

• html: html generated by the converter
• text: Markdown text from editor

panels.input.dispatchEvent(new CustomEvent('markdownEditorContentChanged', { detail : {
    html: converter.makeHtml(text),
    text: text
}}));

Markdown Additional Plugins

Bootstrap Well

Example:

<<<well
**Super** content!
>>>

Custom class:

<<<well:well-lg
**Super** content with extra space!
>>>

Bootstrap Alerts

Example:

<<<alert
**Info** alert...
>>>

Custom type:

<<<alert:danger
**Danger** alert!
>>>

Custom class:

<<<alert:danger extra-class
**Danger** alert!
>>>

Bootstrap Glyphicons

Just use @@ plus name as described in Bootstrap documentation.

Download icon example:

[@@download](http://download.com/file.zip)

Escape line

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]

TODO

• 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 (?)
  • http://projects.jga.me/toc/#toc8
  • https://github.com/gajus/contents