Git Product home page Git Product logo

wordpress-markdown-plugin's Introduction

WP Githuber MD

Screenshot

An all-in-on WordPress Markdown Plugin provides a variety of features such as Markdown editor, live-preivew, image-paste, HTML-to-Markdown helper, and more..

How it works

  1. WP Githuber MD will save your Markdown content into wp_posts.post_content_filtered.
  2. Parse the Markdown to HTML, save the parsed HTML content into wp_posts.post_content.

This plugin will detect your Markdown content and decide what scripts will be loaded, to avoid loading unnecessary scripts. For example, if you enabled syntax highlight, you have to update your post again to take effects.

Demo

GIF animation

The demo shows you the following steps:

Screenshot

  1. Convert HTML to Markdown by using HTML to Markdown tool.

Screenshot

  1. Cut up a selection area of an image and copy it from Photoshop, then paste it to Markdown Editor.

Screenshot

  1. Click "Update" button to save Markdown to post_content_filtered and save HTML to post_content (it is what you will see in result).
  2. View the result.

Video

https://youtu.be/it1noNCTXa4

Requirement

  • PHP version > 5.3
  • WordPress version > 4.0
  • Tested up to 5.0.2

Installation

  1. Upload the plugin files to the /wp-content/plugins/wp-githuber-md directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress.
  3. Go to the WP Githuber MD menu in Plugins and set your Markdown options.

Suggestions

The better situation to use this plugin is you just started a new blog.

If you're planning to use this plugin in an existing blog, be sure to:

  • Turn off other Markdown plugins, because the similar plugins might do the same things when submitting your posts, may have some syntax conversion issues between Markdown and HTML.
  • My personal suggestion is to turn off revision and auto-save, there are options in setting page.

Features

Features For Githuber Theme:

  • Menu: Bootstrap 4 menu.
  • Widget: Table of content.
  • Post type: GitHub repository.

Other screenshots

Setting pages

Screenshot

Screenshot

Translations

Traditional Chinese (zh_TW) by 阿力獅

Changelog

1.0.0

  • First release.

1.1.0

  • Add Image-Paste module.

1.2.0

  • Image paste - Provide an option that allows you directly upload to Imgur.com.
  • Rename plugin name from "Githuber MD" to "WP Githuber MD".
  • Add new settings.

1.2.5

1.3.0

  • Add a HTML to Markdown tool beside the editor.
  • Add an option that allows users to turn off auto-save.
  • Add more information in About page.

1.3.1

  • Backward compatible with PHP 5.3 and WordPress 4.0.x. Tested OKAY.
  • Modify HTML-to-Markdown helper and image-paste description.
  • Add language packs template.
  • Improve HTML-to-Markdown helper.

1.3.2

  • Add language pack: zh_TW.
  • Fix bugs.

1.4.0

  • Add Mermaid module.
  • Add language pack: zh_CN.
  • Fx bugs.

= 1.4.1

  • Add line-number setting for Markdown Editor.
  • Adjust KaTeX module - Now it can only used in the Markdown code block defined with katax.
  • Improve Markdown editor - Adjust the dialog button's look and fix the overflow issues.
  • Yoast SEO's CSS has a global class name path uses animation, will break the Marmaid's SVG in the editor's preview panel, because they both uses the same common class name. We force to remove the animation attribute to make it work.

Known Issues

  • #1 - Sequence Diagram: this feature is only available in WordPress version > 4.5, because it uses underscore.js, and it has confict issues with WordPress' plupload uploader in early version. You can use Mermaid instead of it. We have already hidden this option in setting while an user uses that version < 4.5

wordpress-markdown-plugin's People

Contributors

terrylinooo avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.