explaingit

pandao/editor.md

14,303JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Embeddable Markdown editor for websites that shows a live formatted preview alongside the text you type, built on CodeMirror, jQuery, and Marked.

Mindmap

mindmap
  root((editor.md))
    Features
      Live preview
      Code folding
      Math formulas
      Flowcharts
    Built on
      CodeMirror
      jQuery
      Marked
    Use Cases
      Blog editors
      CMS content
      Documentation
    Setup
      npm or Bower
      Include jQuery
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a live Markdown editor with split-pane preview to a blog or CMS where users write content.

USE CASE 2

Embed a code editor with syntax highlighting and math formula support into a technical documentation site.

USE CASE 3

Let users draw flowcharts and sequence diagrams from text inside a web app.

USE CASE 4

Provide a full-featured Markdown editor that works on tablets including iPad.

Tech stack

JavaScriptjQueryCodeMirrorMarked

Getting it running

Difficulty · easy Time to first run · 30min

Requires jQuery to be loaded on the page before editor.md scripts are included.

In plain English

Editor.md is a Markdown editor that web developers can drop into their own website. Markdown is a simple way of writing formatted text using plain characters, for example putting a hash in front of a line to make it a heading, so that it can later be turned into a web page. This project gives visitors a text box where they type Markdown on one side and see the formatted result update live on the other side. It is described as an embeddable component, meaning it is a piece you add to your page rather than a standalone app, and it is built on three existing JavaScript tools: CodeMirror, jQuery, and Marked. The feature list is long. It supports standard Markdown as well as the GitHub-flavored variant, real-time preview, image upload, inserting tables and code blocks, code folding, search and replace, a read-only mode, switchable themes, and multiple languages. It also handles several Markdown extensions: a table of contents, emoji, task lists, and @-mention links. For more technical writing it can render mathematical formulas written in TeX, along with flowcharts and sequence diagrams drawn from text. The README says it works in major browsers, including the old Internet Explorer 8, and on tablets such as the iPad. You can install it through the npm or Bower package managers, or download it directly. To use it, you include its stylesheet and script files along with jQuery, then call a function that turns a chosen page element into the editor. A separate function converts stored Markdown text into HTML for display. The README notes plainly that the reverse, converting HTML back into Markdown, is not supported, with a maybe in the future. The README is bilingual, repeating its description in English and Chinese, and it ends with a long list of configuration options and their default values.

Copy-paste prompts

Prompt 1
Using editor.md, add a Markdown editor to my HTML page that saves the content to a hidden text area on form submit.
Prompt 2
Show me how to enable TeX math formula rendering in the editor.md Markdown editor on my webpage.
Prompt 3
Configure editor.md to allow image uploads and return the uploaded file URL from my server-side handler.
Prompt 4
Add editor.md to a simple HTML page with a custom dark theme and GitHub-flavored Markdown mode enabled.
Open on GitHub → Explain another repo

← pandao on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.