All Projects → mb21 → Panwriter

mb21 / Panwriter

Licence: gpl-3.0
Markdown editor with pandoc integration and paginated preview.

Programming Languages

javascript
184084 projects - #8 most used programming language
purescript
368 projects

Projects that are alternatives of or similar to Panwriter

Thiefmd
The markdown editor worth stealing. Inspired by Ulysses, based on code from Quilter
Stars: ✭ 48 (-80.17%)
Mutual labels:  pandoc, editor, markdown-editor
Laravel Editor Md
editor.md for Laravel , markdown editor for Laravel
Stars: ✭ 61 (-74.79%)
Mutual labels:  editor, markdown-editor
Markitdown
📱 A React app to preview and edit Markdown✍. You can also export it as HTML.
Stars: ✭ 26 (-89.26%)
Mutual labels:  markdown-converter, markdown-editor
Markor
Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..
Stars: ✭ 1,394 (+476.03%)
Mutual labels:  editor, markdown-editor
Marker
🖊 A gtk3 markdown editor
Stars: ✭ 644 (+166.12%)
Mutual labels:  pandoc, markdown-editor
Stackedit.js
Add StackEdit to any website
Stars: ✭ 724 (+199.17%)
Mutual labels:  editor, markdown-editor
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: ✭ 1,258 (+419.83%)
Mutual labels:  editor, markdown-editor
Awesome Web Editor
🔨 Open source WEB editor summary
Stars: ✭ 306 (+26.45%)
Mutual labels:  editor, markdown-editor
Md
✍ 一款高度简洁的微信 Markdown 编辑器:支持 Markdown 所有基础语法、色盘取色、一键复制并粘贴到公众号后台、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Stars: ✭ 2,242 (+826.45%)
Mutual labels:  editor, markdown-editor
Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+4751.65%)
Mutual labels:  editor, markdown-editor
Mpeditor
微信markdown编辑器
Stars: ✭ 146 (-39.67%)
Mutual labels:  editor, markdown-editor
Mditor
📝 [ M ] arkdown + E [ ditor ] = Mditor
Stars: ✭ 523 (+116.12%)
Mutual labels:  markdown-converter, markdown-editor
React Md Editor
A simple markdown editor with preview, implemented with React.js and TypeScript.
Stars: ✭ 374 (+54.55%)
Mutual labels:  editor, markdown-editor
For Editor
for-editor - A markdown editor based on React
Stars: ✭ 358 (+47.93%)
Mutual labels:  editor, markdown-editor
Markdown
📖Clean & Modern MarkDown Generator, 🔌Offline Support and Easy Generation of Markdown ⚡️⚛️ https://github.com/JP1016/Markdown-Electron/releases
Stars: ✭ 170 (-29.75%)
Mutual labels:  markdown-converter, markdown-editor
Macdown
Open source Markdown editor for macOS.
Stars: ✭ 8,855 (+3559.09%)
Mutual labels:  markdown-converter, markdown-editor
Phodit
Phodal's markdown/ebook editor with MicroFrontend & Web Components
Stars: ✭ 301 (+24.38%)
Mutual labels:  editor, markdown-editor
Markdown Preview Enhanced
One of the 'BEST' markdown preview extensions for Atom editor!
Stars: ✭ 3,478 (+1337.19%)
Mutual labels:  pandoc, markdown-editor
Retext
ReText: Simple but powerful editor for Markdown and reStructuredText
Stars: ✭ 1,500 (+519.83%)
Mutual labels:  editor, markdown-editor
Pervane
Plain text file based note taking and knowledge base building tool, markdown editor, simple browser IDE.
Stars: ✭ 159 (-34.3%)
Mutual labels:  editor, markdown-editor

PanWriter

PanWriter is a distraction-free markdown editor with two unique features:

  1. Tight integration with pandoc for import/export to/from plenty of file formats (including HTML, docx, LaTeX and EPUB).
  2. Preview pane that can show pages – including page breaks etc. Layout adjustments are immediately reflected in the preview.

Download PanWriter

PanWriter is very usable, but also very much a work in progress, as there are still a few rough edges (see TODOs below). Feedback, suggestions and contributions very much welcome! Please open an issue to start a conversation.

Usage

Export preview to PDF

Select File -> 'Print / PDF' and PDF -> 'Save as PDF' in the print dialog (exact naming might depend on your OS).

This will export exactly what’s shown in the preview, and not use pandoc at all.

You can change the styling of the preview and immediately see the changes. (You can later save your CSS as a theme, see Document types below.)

Export via pandoc

First, install the latest pandoc version, then:

Select File -> Export and choose a format.

If you have a YAML metadata block, like in the following example, PanWriter will look at the extension of the filename you chose in the dialog, and look up the corresponding key in the output YAML metadata, for example when exporting the following markdown to test.html:

---
title: my document
fontsize: 18px
pdf-format: latex  # optional
output:
  html:
    katex: true  # for math output
    include-in-header:
      - foo.css
      - bar.js
  latex:
    pdf-engine: xelatex
    toc: true
    toc-depth: 3
    template: letter.tex
    metadata:
      fontsize: 12pt
  epub:
    to: epub2  # default would be epub3
---

# my document

this command will be executed:

pandoc --toc --include-in-header foo.css --include-in-header bar.js --output test.html --to html --standalone

See the pandoc user's guide for available options.

There are two exceptions to the rule that the key in the output YAML is the file extension:

  1. When exporting to a .tex file, the key should be named latex.
  2. When exporting to a .pdf file, the key for PanWriter to look up in the output YAML can be specified with the pdf-format key (see example above). Default is also latex, but you can also use context, html, ms, beamer, revealjs, etc. In fact, you could set it to anything, if you had a corresponding key in the output YAML with a to: field. See also Creating a PDF with pandoc.

User Data Directory

You can place certain files in the PanWriter user directory, which should be:

  • macOS: /Users/your-user-name/Library/Application Support/PanWriterUserData
  • Linux: ~/.config/PanWriterUserData
  • Windows: C:\Users\your-user-name\AppData\Local\PanWriterUserData

If the directory does not exist, you can create it.

Default CSS and YAML

PanWriter will look for a default.css file in the user data directory, to load CSS for the preview. If that file is not found, it will use sensible defaults.

If you put a default.yaml file in the data directory, PanWriter will merge this with the YAML in your input file (to determine the command-line arguments to call pandoc with) and add the --metadata-file option. The YAML should be in the same format as above.

Document types / themes

You can e.g. put type: letter in the YAML of your input document. In that case, PanWriter will look for letter.yaml and letter.css instead of default.yaml and default.css in the user data directory.

Markdown syntax

We use markdown-it for the preview pane, which is fully CommonMark-compliant. It supports GFM tables (basically pandoc pipe_tables) and GFM Strikethrough (strikeout) out of the box. We also added a bunch of plugins, to make the preview behave as much as pandoc as possible (including attributes, fenced_divs, definition_lists, footnotes, grid_tables, implicit_figures, subscript, superscript, yaml_metadata_block and tex_math_dollars). We explicitly don't support raw_html or raw_tex, since everything should be doable with the fenced_divs, bracketed_spans and raw_attribute extensions.

However, there might still be minor differences between the preview and File -> 'Print / PDF' on one hand, and File -> Export on the other.

Things we should emulate in the preview, but for which there are no markdown-it plugins yet:

  • raw_attribute: we should probably just strip them from preview
  • backslash at end of paragraph, e.g. ![](foo.png) \ An ugly workaround that already works is ![](foo.png)  

Pandoc markdown supports a few more things which will not render correctly in the preview, but which are not so commonly used. However, you can still use them in your markdown file, and export via pandoc will work.

Launching from the command-line

You can set up your system to launch PanWriter with:

panwriter myfile.md

On macOS, you should put the following in your ~/.bash_profile or similar:

function panwriter(){ open -a PanWriter "[email protected]"; }

On Linux and Windows, you can make an alias to the correct location of the panwriter executable.

About CSS for print

Unfortunately, still no browser fully implements the CSS specs for paged media (paged media are e.g. print or PDF). Therefore, PanWriter's preview is powered by pagedjs – a collection of paged media polyfills by pagedmedia.org. Some background on using CSS for print:

Develop

Install yarn, then:

## Download source code
git clone [email protected]:mb21/panwriter.git
cd panwriter

## Install npm dependencies, PureScript compiler, etc
yarn install

## Build the PureScript project
yarn build

## To run the app in development mode:
yarn start

## To build distributable app package (goes to ./dist):
yarn dist

TODOs

  • Preview:
    • respect css, toc metadata fields
  • Editor:
    • expand Format menu
    • spell check
    • improve find/replace
  • add a Settings/Preferences window (or should this just be a settings.yaml file?) where you can:
    • set a CodeMirror editor theme css
    • edit the default CSS and YAML files
    • choose pandoc executable (probably with file-open dialog, which we can use for app sandboxing with security-scoped bookmarks)
  • Write pandoc lua filter that does some PanWriter-specific transformations:
  • GUI popup on file import: at least allow to set -f, -t, --track-changes and --extract-media pandoc options.
  • Unify PanWriter custom document type and pandoc template concepts?
  • Rename type metadata key to doctype?

Powered by

PanWriter is powered by (amongst other open source libraries):

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].