Welcome to markdown-editor

This markdown-editor is a 99% client-side javascript viewer and editor for markdown.

Why 1% missing. Because when you finished to edit your document you can upload it directly to your web server.

It can easily be used to powered client-side Javascript Web site. Jump to the demo.

How to compile ?

Just clone the repository and run the compile.sh provided script file.

git clone git@github.com:cyd01/markdown-editor.git
cd markdown-editor
./compile.sh

It produces a new file install.php. Just upload it on your web site and call it.

How does it work ?

The index.html page embed at the same time

the client-side markdown to html renderer
the markdown editor

Markdown file are read directly from the directory.

Example: this README page is read from a README.md file near the index.html main file.

Here are the editor shortcuts

To switch from page viewer to page editor, just triple-click
To swith between plain text or base64 press ATL+b
To clear local storage press ALT+c
To protect the page with password ALT+p
To revert current changes press ALT+r
To save the page press ALT+s
To change style sheet press ALT+t
To print help page press ALT+F1 or ALT+z
To switch back to the viewer press escape key

Special features

Parameters

Parameter	Description	Example
data	the base64 encoded text	example
engine	the markdown rendering engine	choose between markedjs, mardown-it and showdown (markdown-it is the default)
style	choose a embedded style	see below for the embedded sytles list

Special startup tags

Use Markdown comments to define special page settings at the very start of the page:

Comment	Description
`[//]: # (title:This is the title)`	Define the page title
`[//]: # (style:css/united)`	Define the page style
`[//]: # (icon:coffee.ico)`	Define the favicon page
`[//]: # (readonly)`	Force read only page

Integrated special emoji

Emojis from this markdown emojis page is included.

Example: use this special tag :coffee: to print this emoji ☕

Special Markdown-it features

With markdown-it some new features are available, such as:

Subscript: H2O (H~2~O)
Superscript: 29^th^ (29^th^)
++Inserted text++ (++Inserted text++)
==Marked text== (==Marked text==)
Abbreviations (*[Abbreviations]: This is an abbreviation)
footnotes^[Text of inline footnote] (^[Text of inline footnote]) *[Abbreviations]: This is an abbreviation

Integrated themes

Some style are already embedded into markdown-editor:

original
normalize
github
gitlab
minist
air
modest
retro
splendor
screen
markdown
foghorn
md
mini.css
picocss

Integrated mermaid

It is possible ton include mermaid diagram.

The mermaid code

``` mermaid
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B -->C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
```

will produce the graph

For further informations See mermaid online editor

More examples

Follow this page to see examples mixing markdown and HTML.