hx markdown editor

I do a lot of writing in markdown and I usually use Macdown for that.

And I also use my normal (code) editors for it: VSCode and Sublime.

But wouldn't it be awesome to have that all in one?

That's the itch and this is how I scratch that!

Screenshot

WIP

Almost everything is wip but this one is more.

Contribute if you like, I will update when I feel more itches.

Improvement

I have looked at the editors that I use (for coding and writing)

• VScode
• Sublime text
• Macdown

And want to take the good parts and integrate them:

• editor short cuts
• Fullscreen editing
• Preview mode
• distraction free edit
• toggle preview
• auto update preview
• subtle markdown styling (preview is full styling)
• Spell check
• scroll sync
• developers keys for text manipulation (like duplicate line, move line up/down)
• edit more then one file (tabs)
• export to different files (html/pdf/rich text/etc)
• snippets
• folder structure (might be useful with a lot of files in one folder...)
• Windows support for keymaps (can't test this, but might be useful for others)
• open last document
• start screen with links (for no documents open)

Features

I "stole" these features from other (Markdown) editors, I think some make sense to have as well. But they are not as important as the previously mentioned features:

(down the list the features are less important)

• Read/Write/Preview mode
• Focus mode
• Live preview
• Shortcuts (ctrl-S, Ctrl-O, etc) read the shortcut list
• Fullscreen (distraction-free) mode
• Preview HTML
• Markdown & code block highlighting
• GitHub Flavored Markdown
• Multiple documents
• Code highlight in preview
• Code highlight themes (powered by highlight.js)
• Syntax highlighting
• Auto reload
• Search in Markdown
• Find & replace
• Words count
• Copy HTML to clipboard
• Export HTML
• Export PDF
• Printing
• Resizable panels
• Dialog for image
• Dialog for videos (mp4)
• Dialog for tables
• Allow drag’n’drop files onto app icon (Finder or Dock)
• Day & Night themes
• Localization
• Finder integration (OS X)
• App will stay alive in tray for quick usage
• Emoji Support

Electron features

You can test and try online the markdown editor. But my personal focus is on Desktop/Electron from now on.

That needs a lot more love before its a workable app:

key short cuts

• new document
• save document
• toggle distraction free mode
• toggle Preview HTML
• toggle fullscreen

electron stuff

• Status bar
• icon
• menu
• download app (osx, windows, linux)

Technologies used

I use Haxe for this project but essentially it's a JavaScript project.

• Haxe externs for Codemirror: https://github.com/clemos/try-haxe/tree/master/src/js/codemirror
• Haxe type definitions for Electron from https://github.com/fponticelli/hxelectron

The biggest part of this project is based upon:

• Electron
• https://codemirror.net/

And some smaller libs are:

• default preview css from MacDown (like github.css)
• http://fontawesome.io/
• normalize.css
• FileSaver.js

And obviously markdown lib (haven't descides yet which one):

• For the conversion of markdown to html I use haxe-markdown: https://github.com/dpeek/haxe-markdown
• https://github.com/markdown-it/markdown-it
• https://github.com/chjj/marked

Haxe

This is a Haxe project, read more about it in the README_HAXE.MD!

Haxe vs JS

Yes I used Haxe, which will throw of some people.... But it shouldn't:

Because Haxe is a compiler language, the folder structure has a src and bin. But that is that different from some JS projects out there.

+ .vscode
+ bin
+ docs
+ externs
+ src

.vscode

Visual Studio Code folder, currently the best crossplatfrom IDE for Haxe This is something you can ignore if you use an other editor

bin

export folder, from a JavaScript developer point of view the source folder

docs

I use this folder to change the css and html, every change will be copied to bin folder. This is also used by Github to create "documentation" pages for your project. I use it to show the web version of the Editor

externs

A folder specific for Haxe. The libraries we use are pure JS. The externs are a strongly typed "connector" between the dynamic language JS and the strongly typed language Haxe.

src

Haxe source folder, the original code is here.

Build

For automatic build

npm run watch

For electron test

npm run electron

Info

Markdown is a plain text formatting syntax created by John Gruber, aiming to provide a easy-to-read and feasible markup. You can find the original Markdown syntax specification here.

MacDown is a simple-to-use editor for Markdown documents. It renders your Markdown contents real-time into HTML, and display them in a preview panel. You can download it here.